Я уже писал об оптимизации картинок на веб-странице. И, тем не менее, хочу вернуться к этой теме еще раз, чтобы поговорить о графических форматах. Мы вскользь рассмотрим форматы GIF и JPEG, а затем уделим побольше внимания PNG формату, как наиболее распространенному в мире веб.
GIF
Формат GIF способен хранить сжатые без потерь изображения в формате до 256 цветов с палитрой. Изображение в формате GIF хранится построчно, поддерживается только формат с индексированой палитрой цветов. GIF более не является запатентованной технологией, поэтому можете использовать его без риска попасть за решетку(хотя когда нас, советских граждан, сажали за нарушения прав интелектуальной собственности?). Более подробно об истории этого формата вы сможете прочесть в статье The GIF Controversy: A Software Developer's Perspective.
Как я уже упоминал GIF хранит данные без потерь качества, это означает, что после изменения изображения качество останется прежним.
GIF поддерживает анимацию, которая, в темном Web 1.0 веке, насыщала просторы интернета в виде моргающих, переливающихся и подпрыгивающих картинок. Это раздражало. Хотя в светлом настоящем Web 2.0 мы тоже можем наблюдать анимацию “Loading…”, пока ожидаем ответа AJAX запроса…
Формат GIF также поддерживает прозрачность(так называемую булевую или логическую прозрачность). Т.е. каждый пиксель может быть либо абсолютно прозрачным, либо абсолютно непрозрачным. Третьего не дано.
JPEG
JPEG не имеет ограничения в 256 цветов, как GIF формат. Формат JPEG может содержать миллионы цветов и обладает при этом отличным сжатием. Наиболее распространённые расширения для таких файлов .jpeg, .jfif, .jpg, или .jpe. Алгоритм JPEG является алгоритмом сжатия с потерей качества, поэтому некорректно считать что JPEG хранит данные как 8 бит на канал (24 бит на пиксель). Поэтому, для редактирования изображения, промежуточные результаты лучше сохранять в других форматах. Хотя такие операции как вырезание части изображения, поворот или изменение мета информации будут происходить без потери качества.
JPEG не поддерживает прозрачность.
PNG
Формат PNG хранит графическую информацию в сжатом виде. Причем, это сжатие производится без потерь, в отличие от JPEG. Форматов PNG несколько, но мы рассмотрим только два:
PNG8 это формат с палитрой, наподобие GIF. Этот формат также известен как “PNG с палитрой” или “индексируемый PNG”. В сравнении с GIF форматом, PNG8 зачастую имеет меньший размер(при том же качестве графики) и поддерживает alpha-прозрачность(в отличие от GIF). В тоже время, PNG8 не поддерживает анимацию.
Второй тип PNG – TrueColor PNG(или PNG24, PNG32) – может содержать миллионы цветов, как и JPEG. Являясь форматом, хранящим графику без потерь и поддерживающим alpha-прозрачность, PNG имеет больший размер по сравнению с JPEG. Это делает PNG32 идеальным кандидатом на роль промежуточного формата во время редактирования JPEG или в случае когда каждый пиксель играет важную роль, а размер наоборот – неинтересен.
Internet Explorer и PNG прозрачность
Оба формата PNG поддерживают alpha-прозрачность. Но некоторые браузеры(не будем тыкать пальцем –> IE6) имеют свой взгляд на это свойство PNG8-формата. IE6 и раньше отображают alpha-прозрачность как логическую прозрачность – т.е. каждый пиксель либо полностью прозрачен, либо полностью закрашен.
Прозрачность PNG24 и PNG32 в IE6( и раньше) отображается хуже. Прозрачность приобретает почему-то серый цвет…(источник W3C)
IE7 полностью поддерживает alpha-прозрачность для обоих PNG8 и TrueColor PNG форматов. Для более ранних версий вам необходимо добавлять фикс в CSS в виде AlphaImageLoader фильтра.
Так что же использовать?
В большинстве случаев в вебе имеет смысл использовать PNG8 (несмотря на его плохую совместимость с IE). Но для отдельного ряда случаем имеет смысл переключить свой выбор на TrueColor PNG:
- Когда 256 цветов PNG8 будет недостаточно лучше использовать TrueColor PNG(для картинок < 10Кб) или JPG (для картинок > 10Кб). Зачастую человек не отличает качество графики с 200 цветов и 1000 цветов. Поэтому вы можете попробовать сконвертировать картинку в PNG8 и посмотреть, удовлетворит ли вас качество. Бывают такие изображения, что удаление хотябы двух цветов, может значительно ухудшить ее зрительное восприятие. Поэтому тут нельзя дать совет на все случаи жизни.
- Когда большая часть картинки полупрозрачна лучше использовать TrueColor PNG – размер будет меньше.
В большинстве случаев JPEG используют для хранения фотографий – они как правило имеют большой размер(> 10Кб) и требуют хорошего качества.
Формат GIF следует использовать в том случае, если цветовой диапазон исходных изображений не превышает 256 цветов, либо количество цветов может быть уменьшено без существенного ухудшения качества. Это, как правило, изображения с большими площадями однородных одноцветных областей, изображения, полученные конвертированием из векторных форматов, изображения с текстом.
Полезные ссылки
Быстрые веб-страницы: Уменьшаем количество файлов загружаемых браузером
Быстрые веб-страницы: Формирование страницы из нескольких источников
Быстрые веб-страницы: Сжатие и Очистка веб-страниц
Краткое описание формата GIF
Википедия: GIF
Формат файла JPEG
JPEG — Википедия
Myths and Facts about JPG
GIF vs. JPG - Which Is Best?
When and how to use internet image formats
Transparent PNGs in Internet Explorer 6