В чем отличия JPEG от GIF и PNG? Как выжать максимум из изображений для веб?
Никогда не знаешь, где найдешь, где потеряешь.
И какой сайт нынче не обходится без использования картинок? Практически каждый использует изображения, причем, в немалых объемах. Считается, что в наш век высоких технологий все пользователи должны иметь толстый интернет-канал с большой пропускающей способностью, а значит насыщенные изображениями сайты не должны становиться для пользователя проблемой: несколько секунд и всё скачалось, пользователь наблюдает наш сайт во всей красе.
Однако, мой дорогой читатель, если ты так действительно считал до этого момента, мне придется тебя разочаровать. В наш век высоких технологий только жители крупных городов имеют возможность пользоваться толстыми интернет-каналами, тогда как периферия фактически лишена такой возможности. Все еще большое количество пользователей живет dial-up`ом или имеет выделенные линии с небольшой пропускной способностью и с дорогостоящим траффиком. Так что вопрос об экономии времени и траффика нашего посетителя остается открытым, и боюсь останется таковым еще много лет.
Тем не менее, хочу отметить, что если некоторое время назад оптимизация изображений для веб не происходила без боевых потерь, то теперь, за последние несколько лет, ситуация изменилась в лучшую сторону, благодаря многочисленному количеству новых опций специально для оптимизации изображений для веб, которые появились в Adobe Photoshop, Macromedia Fireworks и прочих программах. В этой статье, разумеется, речь пойдет о работе с Photoshop, но в принципе, все, о чем я расскажу, вполне справедливо и для других программ.
Итак, поговорим о том, как сохранить равновесие между размером файла и качеством изображения, как и почему лучше использовать общепринятые форматы графики для веб (JPEG, GIF, PNG), и некоторых других вещах.
ЧАСТЬ1
Нужное отступление от темы.
Перед тем, как работать с фотографией или другим изображением, я хочу предупредить читателя:
Никогда не сохраняйте оптимизированные изображения поверх оригиналов!
Это может лишить вас возможности дальнейшего редактирования изображения, допустим, если исходное изображение было хорошего качества. У меня бывали такие моменты, когда я записывала оптимизированное изображение поверх исходника. Сколько волос было потом вырванно в отчаяньи, когда я понимала, что лишилась оригинала, и теперь у меня есть только небольшая превьюшка для веб, и ничего не исправить.
Чтобы не тратиться на операции по восстановлению и наращиванию волос, всегда берегите исходные изображения. Сохраняйте оптимизированные изображения в других папках и под другими названиями, отличными от исходника.
ЧАСТЬ 2
GIF и GIF с прозрачностью.
Как, где и почему мы используем формат GIF.
1. Итак, GIF (Graphics Interchange Format) - формат обмена графичекими данными. Разработан информационной службой CompuServe в 1987 г. (GIF 87a). Максимальный размер изображения 65536х65536 пикселов и 256 цветов. Действующая в настоящее время версия GIF (GIF89a) позволяет также хранить анимированные изображения и поддерживает прозрачность фона. GIF широко используется для хранения простых растровых изображений, содержащих большие поля одного сплошного цвета. Т.е. формат GIF лучше применять для логотипов, текста, и для других картинок, где используется один цвет или небольшое (ограниченное) количество повторяющихся цветов.
2. Формат GIF неэффективно применять для изображений, в которых используются плавные переходы от одного цвета к другому (например, градиент), или для многоцветных изображений (например, фотографии). На примере выше вы можете наблюдать, как ограничение формата по количеству цветов влияет на изображение: вместо плавного перехода цвета при переводе оригнала в GIF мы получили полошение. Кроме того при сохранении оптимизированного изображения (File - Save for Web) вы обнаружите, что в данном случае формат GIF будет весить много больше, чем JPEG.
3. Я говорила, что лучше не использовать формат GIF для полноцветных изображений, однако, мы все-таки можем использовать формат GIF для достижения разных интересных эффектов при работе с фотографиями. В примере выше, уменьшив количество цветов для оптимизированных изображений до 2-х, 4-х и 7-ми, и заменив в палитре с цветами некоторые цвета на другие (так серый, например, был заменен в одном из случаев на розовый и фиолетовый), я получила весьма интересные результаты.
4. Хотя формат GIF ограничен 256 цветами, для каждой картинки мы можем выбрать свою цветовую палитру. В Photoshop, конвертируя изображение в индексные цвета (Image - Mode - Indexed color), вы можете выбрать такие цветовые палитры, как Perceptual (по восприятию, приоритет цветов, к которым человеческий глаз имеет наибольшую чувствительность), Selective (выборочная, алгоритм подобен Perceptual, но при этом отдается предпочтение обширным областям цвета и зарезервированным цветам Web, эта цветовая палитра создает изображения с наибольшей сохранностью цветов), Adaptive (адаптивная, создается пользовательская цветовая таблица путем отбора тех цветов спектра, которые используются в изображении чаще всего), Web (используется стандартная безопасная 8-битовая (256-цветовая) таблица для веб), Custom (пользовательская, сохраняет текущую цветовую таблицу, как фиксированную палитру, которая не обновляется при изменении изображения), Windows/Mac OS (стандартная 8-битовая системная цветовая таблица). Те же цветовые палитры вы найдете в опциях сохранения оптимизированного изображения для веб (File - Save for Web). Какую палитру лучше использовать? Мой выбор обычно Perceptual.
5. Редактировать количество цветов и заменять один цвет на другой вы можете путем вызова палитры Color Table (Image - Mode - Color Table). Данная палитра показывает цвета, используемые в файле изображения, с которым мы сейчас работаем. Также редактирование цветов изображения доступно путем вызова опций для сохранения изображения для веб (File - Save for Web). Уменьшая количество цветов в изображении, мы уменьшаем размер файла формата GIF.
6. Опция Dithering (смешение). Когда мы работаем с изображениями, использующими сплошной цвет, то опцию Dithering лучше отключать. Однако, при необходимости работы с изображениями, использующими плавные переходы от одного цвета к другому или полноцветными изображениями опция Dithering убирает недостатки подобные полошению на картинке, с которым мы столкнулись в примере про градиент, приведенным в пункте 2. Как это происходит: например, чтобы создать иллюзию присутствия одного цвета, который не входит в палитру, например, зеленого цвета, два других (например, синий и желтый) смешиваются в мозаичном узоре (см. пример), и таким образом мы получаем иммитацию недостающего цвета.
7. Еще одна особенность формата GIF: для формата GIF выполняется сжатие по горизонтальным строкам. Эту особенность также можно использовать при оптимизации и создании изображений для веб. На примере, приведенным выше, можно убедиться, что изображение, имеющее однотонные горизонтальные полоски, весит намного меньше, чем изображение, имеющее такие же однотонные, но вертикальный полосы.
8. Как я уже говорила, GIF89a поддерживает прозрачность фона. Что это значит: если вырезать какую-то часть фона изображения, то после сохранения изображения в формате GIF, и помещения данного файла на веб-страницу, сквозь вырезанную часть изображения будет виден фон веб-страницы, на котором находится данное GIF изображение. Для того, чтобы иметь возможность сделать фон изображения прозрачным при вырезании (редактировании изображения в Photoshop) надо предварительно разблокировать фоновый слой изображения, сделав его обычным слоем (см. пример).
9. Однако, прозрачный GIF хорош только в случае, если вырезанные части изображения имеют прямоугольные формы и прямые линии, в случае же, если вырезанные части изображение будут иметь неровные формы, то у нас возникнут проблемы, как на примере выше. При сохранении надписи на прозрачной подложке в GIF и после размещенния данного файла на веб-страннице возникли проблемы ввиде белых "артефактов" вокруг букв. Однако проблема решаема, как вы можете убедиться, посмотрев на следующий пример:
Это тот же GIF с прозрачным фоном, однако здесь мне удалось убрать "артефакты" путем незамысловатых операций.
Я использовала функцию Matte в опциях сохранения для веб (File - Save for Web). Обратите внимание, что для Matte я использовала цвет фона страницы. Путем задания цвета Matte вы можете смешать полупрозрачные пикселы по краям изображения с фоновым цветом вашей страницы. Однако, если потом фоновый цвет будет заменен на другой, то опять же будут видны "артефакты" вокруг букв (в нашем случае это будет серая окантовка).
10. Хуже обстоит дело с большими полупрозрачными областями, например c тенью под текстом.
Боюсь, тут нас ждут поражения и потери. Полупрозрачную тень сделать не получится. Вы, конечно, можете поиграться с опцией Transparency, но результат будет не особо впечатляющ.
Проще обойтись без Transparency, т.к. в GIF все равно не может быть полупрозрачных областей, пиксель может быть либо полностью прозрачным, либо полностью непрозрачным (это называется бинарная прозрачность). Можно попробовать выйти из ситуации при помощи опции Matte. Однако, посмотрите на пример, у букв получается слишком большая окантовка, и в итоге мы не сможем применить данную картинку на странице с несплошным серым фоном (например, серый фон с узорами) т.к. будут видны "артефакты" (большая серая окантовка) по краям.
Выход? Изначально рисовать тень в графическом редакторе непрозрачной.
11. Вроде бы казалось чего проще, нарисуй ты эту дурацкую тень в Photoshop, там же помести эту надпись несчастную на нужный сплошной или затейливый фон, и затем просто вставь это все на страницу. Чего мучаться? Но давайте помнить, что мы все таки говорили об оптимизации изображений, и однородного цвета надпись весит гораздо меньше, чем та же надпись уже на фоне. Опять же в жизни случаются ситуации, когда при верстке страницы вам все таки нужно, чтобы надпись или другая каверзная фигура была именно на прозрачной подложке, так что есть вариант, что вам все, о чем мы тут говорили, еще пригодится.
ЧАСТЬ 3
Работаем с JPEG
Как правильно применять JPEG-компрессию.
1. JPEG (Joint Photographics Experts Group) - стандарт на сжатие полноцветных неподвижных изображений с коофицентом сжатия более 25:1, разработанный группой JPEG. Из-за потери качества при сжатии изображения JPEG обычно не применятся в профессиональной допечатной подготовке (в полиграфии), т.к. на выводе мы получим изображение неудовлетворительного качества, однако, для просмотра в электронном виде полноцветных изображений на экранах вашего мониторов - JPEG весьма замечательный формат, т.к. он спроектирован для широкого диапазона цветов и тонких вариаций яркости тоновых изображений (таких как фотографии или изображения с градиентами). Для предоставления изображения этот формат может использовать миллионы цветов.
2. Image - Image size. При макетировании веб-страниц и создании картинок для веб убедитесь, что ваше изображение JPEG имеет разрешение 72-96 dpi (конецформыначалоформыDots per inch. Число точек на дюйм. Единица измерения плотности печати, разрешающей способности экрана или разрешения сканирования - число различимых точек изображения, выводимых (или распознаваемых) устройством на линии в один дюйм.) Разрешение выше нужно только для выводимых на печать изображений. Для изображений, которые предназначены для просмотра с экрана монитора 72-96 dpi более чем достаточно.
3. Чем больше степень сжатия JPEG изображения, тем больше информации в изображении теряется. Посмотрите на пример выше, рисунок слева - оригинальное изображение, рисунок справа - оптимизированный JPEG c большой степенью сжатия. Потери очевидны.
4. Управлять степенью сжатия JPEG при сохранении для веб помогают нам две опции Quality (качество изображения) и выпадающее меню с опциями Low (низкое качество), Medium (среднее), High (высокое), Very High (очень высокое), Maximum (максимум). Пользуясь опциями в выпадающем меню вы устанавливаете степень сжатия, которую по умолчанию установили для этих опций разработчики Adobe Photoshop, соотвественно для Low будет самая высокая степень сжатия, а для Maximum - самая низкая. Однако, лучше устанавливать качество сохраняемого изображения вручную пользуясь бегунком для опции Quality. Насколько сильно сильно можно сжать изображение лучше ориентироваться по окну Optimized - где показывается каким будет оптимизированное изображение после сохранения. Обычно для веб устанавливают Quality 45-62.
5. Чем меньше размер (ширина х высота) изображения, тем меньше будет его вес килобайтах. Однако, не всегда мы можем пойти на уменьшение размера нашего изображения, боясь, что при этом уйдут какие-то интересные детали. Но будет ли посетитель будет в восторге, от того, что ему придется скачивать такое большое изображение? Что делать? Умные веб-мастера создают превью (preview) - уменьшенное изображение, которое размещается на веб-странице, и при клике на которое открывается большое изображение (естествено, это вы делаете при верстке своих страниц). Однако, когда мы уменьшаем предварительно наше изображение в графическом редакторе, то бывает, что превью получается немного смазанным и некачественным. Избежать этой проблемы не сложно. Как именно я писала в статье:
"Уменьшая теряешь?"
6. А что делать, если в наши планы не входит создание превью, но мы хотим, что пользователь сразу понял, что изображение интересное и стоит дождаться его загрузки? Для это при сохранении изображения для веб (Save for web) не забудьте поставить галочку около опции Progressive. В таком случае загрузка изображения будет происходит в несколько проходов, каждый из которых улучшает качество изображения.
ЧАСТЬ 4
PNG - особенности формата
Младший член семейства - но принимают ли его все?
1. PNG (Portable Network Graphics) - формат используемый для графических файлов в Интернет. Существует две версии формата:
- PNG-8 - аналогичен GIF, также использует индексные цвета, и имеет более хорошее сжатие, чем GIF
- PNG-24 - более интересен, он поддерживает, как JPEG много миллионов цветов, кроме того у него есть замечательная особенность, он поддерживает alpha-transparency (альфа прозрачность), т.е. частичная прозрачность пиксела (переходная прзрачность), именно этого нам не хватало, когда мы пытались ранее сделать полупрозрачную тень под надписью.
2. Однако, не спешите радоваться, мои дорогие друзья, PNG пока что не может стать нашим спасением, дело в том, что старые броузеры не поддерживают этот формат, кроме того альфа-прозрачность PNG не поддерживается броузером Internet Explore - самым распространенным из броузеров, белые поля вместо полупрозрачных или прозрачных писелов - это печально. Кроме того PNG не поддерживает анимацию. Т.е. пока рано говорить о PNG, как об альтернативе и замене GIF на просторах Интернет.
Вот собственно, мы и подошли к завершению разговора о трех форматах для веб. Конечно, жаль, что мы пока что не можем без боязни использовать такой замечательный формат как PNG, но унывать не стоит, со временем, я уверена, постепенно PNG со всеми го особенностями станут поддерживать все броузеры без проблем, и у разработчиков (т.е. у нас с вами) появится еще больше возможностей в реализации своих безумных и не очень безумных затей. Так что стоит приглядывать за младшим PNG и развитием событий. А пока можно только почитать более подробную информацию о его особенностях (тем, кого это интересует):
http://www.rus-linux.net/zen/png_feature/png_feature.html
http://www.umade.ru/log/2004/12/54.html
На этом закончим наш разговор, желаю вам удачной оптимизации.
Обсудить эту статью на форуме
ПРИХОЖАЯ
ОБУЧЕНИЕ
СПРАВОЧНАЯ
О ПРОЕКТЕ