Web оптимизация графики

Сегодня в WEB применяются два вида растровых файлов: в форматах JPEG и GIF.

GIF-формат неплохо изображает жесткие границы (например, векторную графику, логотипы), а также гладкие (ровные) плоскости цвета. У этого формата - максимальная компрессия, допускается прозрачный фон.

Но в браузере он плохо масштабируется, искажаются тоновые и цветовые раскаты.

В случае перевода изображения в 128-цветовую гамму при активированной опциии "dithering" без значительных потерь, можно использовать GIF-формат. Если такой возможности нет, изображение стоит сохранять в JPEG-формате.

Если файл экспортируется в GIF-формат, первоначально следует проиндексировать его цветовую палитру, например в Adobe Photoshop:

Стоит вручную подбирать минимальное количество цветов. Чтобы на одноцветном фоне антиалиасное одноцветное изображение передавалось качественно, хватает пяти - восьми цветов; а если это двух- или трехцветное изображение, то необходимы 15 - 25 цветов. Если индексируется исходное изображение Grayscale, то перед этим его следует перевести в RGB-гамму.

Нужно стараться избегать включать опцию "dithering". Иначе размер файла увеличивается. Если в изображении присутствуют тоновый или цветовой раскаты (например, тень), то используется только эта опция. После использования"dithering" если Вы хотите назначить прозрачный фон нужно, удостовериться в том, что он - не стал "клетчатым”.

Если случаи сложные, то перед индексированием следует выделить самые важные элементы изображения. Внутри выделенной области цвета по сравнению с другими индексируются более корректно.

JPEG-формат прекрасно изображает раскаты цвета и тона, а также размытые границы (к примеру, фото). JPEG-файл неплохо масштабируется в браузере.
Однако ровные плоскости цвета передает плохо, уступает GIF-формату в компрессии.
При сохранении в формате JPEG лучше выбирать качество "medium".