Растровые графические форматы для веб

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

1. JPEG: фотографии и красочные рисунки

JPEG — очень популярный формат представления графики в интернет. Фотографии, картины, рисунки высокого качества с большим количеством цветов – все это сохраняется с расширением .jpg. Формат способен отображать 16,7 миллионов оттенков. Прозрачность и анимация не поддерживаются.

Качество изображения зависит от степени сжатия файла: чем больше ужат файл, тем хуже картинка, но зато меньше размер самого файла. Потому хранение фотографий в JPEG – это компромисс между качеством изображения и его размером. На сильно ужатом файле этого формата появляются размытые области, теряется контрастность. Качество картинки теряется с каждым новым сохранением файла в JPEG, потому хранить промежуточные результаты работы нужно в формате, который не влияет на качество изображения. Например, в PSD.

Изображения в формате JPEG, как и все остальные форматы для интернета, бесполезно архивировать – их размер не уменьшится, поскольку они уже являются архивом.

2. GIF: хранение контрастных рисунков + анимация

Формат GIF уменьшает размер своей графики без потери качества за счет уменьшения количества цветов на рисунке. Максимум цветов может быть 256, но этого хватает для сохранения логотипов, схем, надписей и контрастных рисунков.

Формат GIF поддерживает прозрачность, но прозрачность только одной градации: нельзя сделать пиксель прозрачным на 20% или на 77%. Он может быть или прозрачным, или непрозрачным.

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

3. PNG: четкость изображения и частичная прозрачность

Графический формат PNG разрабатывался как альтернатива защищенному патентом и не поддерживающему переменную прозрачность формату GIF. Формат PNG сочетает лучшие качества форматов для интернета JPEG и GIF: сжимать изображение, оставляя только нужные цвета, при этом обеспечивая четкость и контрастность для графики. В большинстве случаев изображение в формате PNG занимает меньше места, чем оно же в JPEG (кроме фотографий) или в GIF (кроме крошечных изображений с несколькими цветами).

Изображения в PNG можно сохранять, используя или 8 бит (PNG-8) или 24 бита (PNG-24).

Результаты сохранения картинки в PNG-8 и GIF мало чем отличается. Оба формата альфа-прозрачность не поддерживают. Обычно файл в PNG-8 весит чуть меньше, чем в GIF, если нужно сжимать области постоянного цвета с сохранением четкости линий в больших картинках. Т.е. сохранять в PNG-8 лучше логотипы, иллюстрации с текстом, карикатуры, схемы и т.п.

PNG-24, как и формат JPEG, позволяет сохранять насыщенную графику, градиенты, изображение не теряет яркости, оттенков и четкости. В нем можно хранить и фотографии, но в JPEG они обычно занимают меньше места. Формат PNG-24, как и форматы GIF и PNG-8, сохраняет четкость деталей в штриховой графике, логотипах и иллюстрациях с текстом. Кроме того, PNG-24 поддерживает альфа-прозрачность, т.е. прозрачность может быть частичной. К сожалению, этим важным свойством формата пока не получится воспользоваться – браузеры Internet Explorer младше 7й версии не поддерживают частичную прозрачность в PNG-24.

4. ICO: формат для иконок

Формат ICO специально разработан для хранения иконок – маленьких изображений с простой графикой. Формат ICO ужимает файл за счет потери цветов. Разводов, характерных для изображений в JPEG, нет. Иконки, сохраненные в формате ICO, Windows отображает сразу, дополнительная программа просмотра не нужна. Это свойство формата ICO активно используется в браузерах, интернет-пейджерах для отображения иконок возле адресной строки, в избранном, закладках и т.п.

Наиболее популярным применением формата ICO является изготовление иконок favicon.ico для сайтов и блогов. Для создания иконок и конвертации иконок в ICO из других форматов разработано множество специальных программ. Кроме того, можно обойтись только программой Adobe Photoshop, если установить специальный плагин для сохранения файлов в формате ICO. Без установки этого плагина Фотошоп не умеет сохранять файлы в ICO.