Компьютерные изображения всегда прямоугольны по своей природе.
Поэтому, когда на веб-странице необходимо разместить рисунок, отличный
от прямоугольника - содержащий окружность, треугольник или
другую фигуру, обычно используют формат GIF с прозрачными участками.
GIF для этой цели очень удобен - размер файла получается небольшим,
а прозрачные участки позволяют размещать рисунок на любом цветном
фоне. Когда в качестве фона рисунка используется белый цвет, все
получается в порядке (рис. 1), но как только устанавливаем темный
цвет фона, вокруг изображения появляется некрасивая светлая каемка
(рис. 2).
|
|
| Рис. 1. Рисунок на белом фоне | Рис. 2. Рисунок на цветном фоне |
Связано это со способом представления пикселов в изображении. Если увеличить фрагмент изображения (рис. 3), то можно увидеть, что используется несколько больше цветов, чем может показаться вначале. Такой прием, когда на краях рисунка применяется несколько оттенков одного цвета, позволяет делать края изображения более гладкими. Прием получил название сглаживание или антиальясинг, если пользоваться компьютерным жаргоном. Края при этом получаются чуть размытыми, но зато выглядят действительно более сглаженными. Вот только пикселы светлых оттенков и образуют злополучную каемку.
Конечно, можно вообще отказаться от сглаживания, часто так и делают,
особенно в рисунках небольших по размеру, но при этом отдельные
пикселы выпирают и изображение становится угловатым (рис. 4).
 |
 |
| Рис. 3. Увеличенный фрагмент изображения | Рис. 4. Рисунок без сглаживания |
Но все же есть способ, чтобы в рисунке было сглаживание и отсутствовала светлая каемка. В параметрах оптимизации рисунка следует задать цвет краев (Matte, рис. 5), который должен совпадать с цветом фона. На рис. 5 приведена палитра оптимизации, взятая из программы Adobe Photoshop (File | Save for Web...), но данные параметры есть и в других подобных программах. На рис. 6 представлен результат использования параметра Matte, сравните его с рис. 4, где сглаживание не применяелось.
Если фон неоднотонный, например, применяется фоновый рисунок, следует
указывать средний цвет.
 |
 |
| Рис. 5. Параметр Matte в палитре оптимизации | Рис. 6. Рисунок со сглаживанием на цветном фоне |
Описанный способ применяется при соблюдении некоторых параметров: