Оптимизация графики для Web

На данный момент в Web используется два типа растровых файлов: в форматах JPEG и GIF.

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

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

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

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

1. Подбирайте минимальное количество цветов вручную (для качественной передачи антиалиасного одноцветного изображения на одноцветном фоне достаточно 5-8 цветов, двух-трехцветного изображения — 15-25 цветов) Если исходное изображение Grayscale, перед индексацией переведите его в RGB-гамму.

2. По возможности избегайте включения опции «dithering»— она увеличивает размер файла.
Эта опция необходима только если в изображении присутствует цветовой или тоновой раскат (напр. тень). Назначая прозрачный фон, после применения «dithering» убедитесь что фон не стал «клетчатым».

3. В сложных случаях перед индексированием выделите наиболее важные элементы изображения. Цвета внутри выделенной области индексируются корректнее остальных.

Posted in Учебник по HTML, DHTML, CSS.