titaniMOZG.ru

В то время, когда я работал преподавателем в Институте Информационных Технологий, одной из первых тем рассматриваемых в начале курса по веб-дизайну и Flash – была тема о графических форматах и разнице между ними. Сегодня это занятие я решил рассказать в своем блоге, чуть-чуть дополнив повествование и затронув оптимизацию графики для web в целом, а не только рассмотрев основные графические форматы.

Во-первых, давайте вспомним, какие графические форматы мы знаем? Как правило, называется несколько основных форматов: jpg, gif, png, bmp. Это те графические форматы, которые поддерживаются современными браузерами и в разной степени часто используются при разработке сайтов. Для начала необходимо рассмотреть особенности каждого из этих форматов.

Особенности графического формата jpg (jpeg)

Это, пожалуй, самый распространенный графический формат во всей сети Интернет. Именно в нем сохраняется основная часть всей графики, которую мы видим.

Во-первых, формат jpg является форматом, сохраняющий данные с потерями в качестве. Изображение разбивается на блоки 8 на 8 пикселей и записываются усредненные значения о каждом из этих блоков. Однако, сохранять изображения в формате jpg можно с разной степенью качества (0-100%), и в зависимости от выбранной степени качества, детализация записываемых значений о каждом из блоков (а значит, и детализация самого изображения) будет варьироваться. Естественно, что чем выше качество, тем больше данных требуется сохранить внутри файла, тем больше он будет весить, но и тем выше будет детализация картинки.

Качество 100%

Качество 50%

Качество 0%

Во-вторых, формат jpg имеет 24-битную палитру, что позволяет сохранять изображения с 16 миллионами цветов, чего всегда, как правило, достаточно. Формат jpg идеально подходит для сохранения изображений фотографического качества в полном цвете при относительно небольших объемах данных. Особенностью большинства фотографий является отсутствие резких границ в цвете и яркости, где соседние пиксели, как правило, не имеют значительной разницы между собой – именно на таких изображениях результаты сжатия менее заметны. Если же изображение будет содержать большое количество резких переходов цвета, то на таких границах будут появляться дефекты изображения вследствие его сжатия (особенно это заметно на ярких заливках).

Дефекты изображения (артефакты) на изображении (качество 50%)

По этой причине, использование формата jpg для сохранения логотипов, чертежей и аналогичной графики не целесообразно.

Особенности графического формата gif

Вторым по популярности форматом является gif – он же и один из самых первых графических форматов вообще. Он имеет палитру всего в 8 бит, что позволяет сохранять только 256 цветов (чего на момент создания было вполне достаточно, т.к. мониторы тех времен не способны были отобразить больше) и сохранение происходит без потери качества. Сохранение данных в формате gif происходит построчно. При сжатии изображения ищутся идентичные фрагменты, сохраняется один экземпляр такого фрагмента и отмечается, где он используется. Ввиду данного принципа работы алгоритма сжатия, в формате gif лучше всего сохранять изображения наиболее однообразные в рамках каждой строки. Именно поэтому данный формат лучше всего подходит для сохранения логотипов, чертежей и т.д.

Упорядоченное изображение в формате gif
однопиксельная шахматная доска из черных и белых пикселей - 1,78Кб

Неупорядоченое изображение gif
так же состоящее только из черных и белых пикселей - 12,4Кб

Так же стоит заметить, что популяризации формата gif способствовали поддержка прозрачности и анимации. Это является отличительной чертой данного формата, не присущей никаким из других обозначенных нами графическим форматам. Все анимированные смайлики на всех форумах – это gif изображения, где благодаря прозрачности смайлики легко ложатся на фоновый цвет страницы, а анимация позволяет более ярко выражать их суть (на примере, фоновым рисунком положена «шахматная доска», которая часто используется в графических редакторах для индикации прозрачности).

Ввиду того, что палитра ограничена только 256 цветами, то использование данного формата для сохранения фотографий не приемлемо, однако, в веб-дизайне, формат gif удачно используется для сохранения небольших графических элементов дизайна сайта, таких как кнопки, логотип сайта, разделители меню, декоративные элементы рамок и т.д.

Особенности графического формата png

Формат png является нечто средним между jpg и gif, и взял в себя особенности, как первого, так и второго формата с некоторыми улучшениями.

Во-первых, стоит отметить, что формат png имеет палитру от 8 до 48 бит, что позволяет сохранять до 281 триллионов цветов (что на практике используется крайне редко). Как правило, используют аналогичную jpg палитру в 24 бита, иногда 32 бита.

Во-вторых, формат png использует сжатие без потерь качества.

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

Исходя из всего выше перечисленного, следует понимать, что изображение, сохраненное в формате png, будет весить больше, чем в jpg или gif. Кроме того, есть проблемы совместимости со старыми браузерами, Internet Explorer 6 и более ранние – в частности.

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

Особенности графического формата bmp

Графический формат bmp используется в web весьма редко, ввиду того, что он «тяжел», при этом не предоставляет каких-либо весомых преимуществ. Формат bmp имеет палитру до 48 бит. Так же он сохраняет данные без сжатия, что сказывается на объеме итоговых файлов.

Я считаю, что использование bmp сегодня практически не оправдано. Использование данного графического формата при создании сайтов, как правило, не целесообразно.

Изображение jpg в 100% качестве, глубина цвета 24 бит - 92,2Кб

Изображение bmp, глубина цвета 24 бит - 396Кб

Что и как сохранять

При верстке сайта я использую все три основных графических формата: jpg, gif и png. Целесообразность того или иного формата определяется для каждого элемента страницы индивидуально, как и настройки каждого формата.

Оптимизация графики для web формата jpg

Большинство элементов я сохраняю в формате jpg – сюда относятся картинки в шапке сайта, текстуры, фоновые рисунки и прочие элементы дизайна. При сохранении изображения в jpg я выбираю его качество исходя из внимания, которое будет уделено данному изображению. Так, например, логотипы я сохраняю с качеством в 95%, изображения в шапке сайта, с качеством 80-90%, прочие элементы дизайна: 80-85%. Что касается текстур и фоновых изображений, особенно если они блеклы и располагаются за текстом, то тут я часто экономлю на качестве, выбирая 51%, иногда (хоть и редко) – меньше.

Я заметил, что между 50 и 51% есть существенная разница в качестве картинки (я говорю об инструменте «Сохранить для Web» в Photoshop). Часто эта разница в 1% сильно бьет по глазам, хотя бывают картинки, где она мало заметна – тогда можно поэкспериментировать со значениями ниже 50%, хотя я редко снижаю эту планку.

Изображения в формате jpg я никогда не сохраняю в 100%, т.к. разница между 95% и 100% на картинке вообще не ощутима, а по весу – значительно (около 20%, как правило).

Изображение jpg в 100% качестве - 97Кб

Изображение jpg в 95% качестве - 81,2Кб

В высоком качестве, около 95%, я сохраняю и самые ответственные элементы дизайна, особенно если они выполнены в сочных и ярких цветах, что встречается постоянно. Примером могут служить кнопки для отправки заявок (часто красного цвета), заголовки или картинки, которые должны произвести впечатление и т.д. Очень часто все эти элементы очень яркие, и сохранение их в низком качестве, тут же отражается в виде появления артефактов, из-за чего часто теряется задуманный «глянец». При этом, пользователь часто даже не может точно сказать, что именно привлекло или оттолкнуло его в той или иной картинке, хотя причиной часто является только разница в качестве изображения.

При редактировании изображений в формате jpg очень важно всегда сохранять исходник, в случае с Photoshop – это файл psd. Как мы помним, jpg использует компрессию с потерями, поэтому, сохраняя изображения с 95%, при повторном редактировании (допустим, понадобилось внести коррективы), будет выполнено пересохранение, которое приведет к еще большему ухудшению картинки (95% прежние, умножаем на 95% при пересохранении, итого получим около 90%, образно говоря). При этом, хочу заметить, что сохранение в 100% качестве в jpg – не даст Вам фактического 100% качества, т.к. потери будут даже в этом случае. Поэтому всегда держите при себе исходник и все редакции нужно проводить именно в нем, сохраняя результат из него.

Так же важно отметить, что в формате jpg есть поддержка прогрессивной развертки, что позволяет визуально ускорить загрузку страницы. Суть заключается в том, что, сохраняя картинку в jpg с поддержкой прогрессивной развертки, сначала загружается «грубое» изображение, которое, тем не менее, уже дает понять, что и как будет выглядеть, а по мере дальнейшей загрузки – оно конкретизируется и появляются все детали. Это очень важная и полезная опция, которую обязательно нужно использовать как для изображений внутри статьи, так и для крупных изображений в самом дизайне сайта – например, в шапке сайта. Бывало, что я делал «резиновые» дизайны, где в шапке лежала панорама шириной в 2048 пикселей (из расчета на соответствующее разрешение) – естественно, что такая картинка не мало весит, и здесь использование прогрессивной развертки почти обязательно!

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

При сохранении широких панорам в шапке сайта, я часто использовал следующий прием с использованием блюра: я слегка размывал участки изображения не привлекающих внимание и оставлял резкость на нужном уровне в участках, где должно фокусироваться внимание пользователей. Так, например, если это панорама в шапке сайта с «резиновой» версткой и выравниванием по левой границе (т.е. правая часть изображения будет скрываться или показываться, в зависимости от разрешения экрана пользователя), тогда логично сделать, что бы правую часть слегка размыть. Я в этом случае дублировал слой с этой панорамой, размывал его блюром (радиусом до 1 пикселя), клал поверх панорамы с нормальной резкостью, создавал слой-маску, где клал линейный градиент таким образом, что левая часть размытого изображения становилась прозрачной, а ближе к правой части – изображение плавно размывалось. В сумме, это давало экономию около 10-15% веса.

Изображение без размытия, качество 80% - 50Кб

Изображение с размытием в 0,5 пикселя правого края, качество 80% - 44Кб

Оптимизация графики для web формата gif

В формате gif я сохраняю многие мелкие детали дизайна с небольшим количеством цветов. Сюда относятся различные кнопки, разделители меню (сепараторы), иконки, иногда логотипы и т.д.

Что касается логотипов, то часто либо по моей инициативе, либо по инициативе заказчика, нужно сделать блик, который пробегает время от времени по логотипу. Раньше я это часто делал так: клал фоном логотип в jpg, а сверху прозрачный flash-ролик с бликом. Минус в том, что логотип всегда должен быть ссылкой на главную, а flash не у всех может запуститься по тем или иным причинам, поэтому потом я стал делать логотипы в анимированных gif, которые может и чуть больше весят, но полностью кроссбраузерны.

Одной из самых важных деталей при сохранении в формате gif – является использование адаптивной палитры. По-умолчанию, 256 цветов, которые может сохранить в себе gif-изображение, предопределены – это называется стандартной палитрой. Естественно, что Ваши изображения будут использовать другие цвета, которые лишь малой частью могут попадать в число цветов из стандартной палитры gif. А в случае сохранения изображения в данном формате с использованием стандартной палитры, все цвета, которые не попадают в нее, будут «округлены» до ближайших значений из стандартной палитры, таким образом, сохраненное изображение будет сильно отличаться от оригинала (для получения более-менее приемлемого результата, для получения смежных цветов, часто используется поочередное использование пикселей из цветов стандартной палитры). Однако, если использовать адаптивную палитру (адаптивная, потому что она адаптируется к текущему изображению), тогда набор из 256 цветов будет собран из наиболее часто употребляющихся цветов в данном изображении, что дает значительно лучший результат.

Использование стандартной палитры gif

Использование стандартной палитры gif со смешиванием пикселей на смежных цветах

Использование адаптивной палитры gif

Так же иногда бывает полезным сократить объем палитры, сохранив лишь 128 или 64 цвета. Не для всех изображений это подходит, но это стоит иметь ввиду, потому как сокращение цветовой палитры значительно уменьшает их вес. На примере ниже, разница между 256 и 128 цветами почти не заметна, а на изображении с 64 цветами - уже видны заметные изменения.

Оригинал изображения в jpg (для сравнения)

Изображение gif, адаптивная палитра, 256 цветов - 88,7Кб

Изображение gif, адаптивная палитра, 128 цветов - 79Кб

Изображение gif, адаптивная палитра, 64 цвета - 64,2Кб

При создании анимированных gif картинок, что не противоречит замыслу, старайтесь, оставлять статичным. Например, если у Вас одинаковый фон на всех кадрах, то этот фон должен быть на самом деле одним, а не его копия в каждом кадре. На ниже приведенном примере, два абсолютно одинаковых, с точки зрения анимации, gif-ролика – они имеют одинаковые размеры, сценарий ролика, глубину цвета. Разница между первым и вторым заключается в том, что в первом ролике фон один на оба кадра и меняется только круг, а во втором – меняется и круг и фон, хотя подмена фона визуально не видна, т.к. фон во втором кадре является полной копией фона в первом кадре. Разница между ними в весе составляет примерно в 1,5 раза. В случае, если кадров будет больше, а анимация будет еще более сложной, разница будет еще более существенной.

Пример gif-анимации со статичным фоном - 9,3Кб

Пример gif-анимации с подменой фона его копией - 14,8Кб

При создании gif-картинок с прозрачностью, обращайте внимание на края изображения – на них не должно быть полупрозрачных пикселей, потому что в противном случае, при сохранении, они будут преобразованы в «бахрому», которая испортит всю картинку (на приведенном ниже примере, картинка с прозрачностью помещена на фоне красной заливки, что бы белая «бахрома» была более явной)

Для решения этой проблемы, необходимо избавиться от всех полупрозрачных пикселей при сохранении изображения.

Оптимизация графики для web формата png

Использование формата png оправдано лишь в случаях, когда необходима многоуровневая полупрозрачность, т.е. использование альфа-канала. В остальном, данный формат мною не используется, т.к. все остальные задачи, решаются за счет jpg и gif, которые значительно меньше весят, по сравнению с png.

Использование CSS-спрайтов

Конечной целью оптимизации графики является высокая скорость загрузки страниц и еще одним методом ускорения является использование CSS-спрайтов. Суть проста: когда браузер обращается к серверу за получением тех или иных данных, он тратит время на этот запрос. Чем больше файлов нужно загрузить – тем больше запросов должен сделать Ваш браузер. Если в дизайне Вашей страницы будет 20 изображений, то загрузка страницы будет идти значительно дольше, чем, если бы Ваш дизайн содержал 5 изображений, равных по суммарному весу с первыми двадцатью. Проще говоря, получить одну большую посылку можно быстрее, чем несколько маленьких, поэтому логичным решением было – объединение многих маленьких картинок в одну. Это повышает и скорость загрузки страницы и снижает нагрузку на сервер, поэтому, почти все высоконагруженные системы давно взяли данный прием на вооружение (примером может служить поисковая выдача Яндекса, где иконки сайтов объединены в одну большую картинку).

Объединив множество картинок в одну, Вы размещаете их в нужных блоках в качестве фонового рисунка и позиционируете этот фоновый рисунок средствами CSS. Небольшое увеличение самого CSS-файла не сыграет в данном случае весомой роли.

Не все картинки можно объединить в CSS-спрайты. Например, текстуры, которые многократно дублируют себя, объединить вряд ли удастся, если их повторение не ограничено одной осью X или Y – тогда варианты возможны, но и то не во всех случаях. Проще говоря – объединение картинок в CSS-спрайты – это вопрос очень индивидуальный.

Заключение

В целом, это все, что я хотел рассказать об оптимизации графики для web. Верстка сайта и оптимизация графики на этом этапе – это работа хоть и рутинная, но по-своему интересная, т.к. у меня лично, иногда возникает чисто спортивный интерес, как сбросить с каждой картинки по несколько байт, что в итоге сократит время загрузки в разы. Так же как когда перед инженерами Mazda поставили задачу скинуть 100 килограмм массы в новой модели автомобиля, и они разобрали его до последнего винтика, что бы взвесить каждую деталь и попытаться сбросить хотя бы несколько грамм с каждой из них.

Надеюсь, что статья окажется весьма полезной.