Создание сайтов в Москве

Форматы Gif, Png, Jpg (Jpeg) растровой графики для сайта — Gif анимация, Png картинки с прозрачным фоном и Jpg полноцветные изображения

Растровая графика (форматы Gif, Png, Jpg, Jpeg)

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

Все картинки любого формата, относящегося к растровой графике, включая и упомянутые чуть выше Gif, Png и Jpg обладают некоторыми свойствами. Во-первых, размер картинки в растровой графике определяется таким понятием как разрешение, которое представляет из себя размер изображения в пикселах по горизонтали и вертикали, например, 300 на 200 пискселей. Иногда, правда, говорят об общем количестве пикселей в картинке, например, производители фотоаппаратов (12 Мега пикселей и т.п.).

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

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

Одним из основных недостатков растровой графики является большой размер результирующих картинок, даже в форматах Gif, Png и Jpg, которые используется в вебе. Естественно, что для уменьшения результирующих изображений в растровой графике используются различные алгоритмы сжатия, которые работают как с ухудшением качества (сжатие с потерями), так и без оного.

Все это очень похоже на принципы работы алгоритмов сжатия аудио — MP3 сжимает с потерями, причем, в первую очередь удаляются всякие переходы, которые скорее всего не будут восприниматься ухом человека. Такой аналогией в мире растровой графики может служить формат Jpg, сжатие информации в котором осуществляется с потерями. При сжатии фотографий в Jpg (Jpeg) учитываются возможности визуального восприятия человека и, в первую очередь, удаляются те детали, которые будут особо и не заметны.

Но существуют в растровой графике и алгоритмы сжатия картинок без потерь — BMP, Gif и Png. Формат BMP вообще, чаще всего представляет из себя не сжатое изображение, а Gif и Png сжимаются без потерь за счет удаления повторяющейся и избыточной информации (получается что-то на вроде архивирования, но учитывающим особенности растровой графики).

Существует множество графических редакторов, которые умеют работать с растровой графикой (например, все тот же фотошоп), но для подготовки графики для веба следует использовать ориентированные именно на это редакторы, ибо только тогда вы сможете получить максимально оптимизированные (сжатые) картинки в формате Gif, Png, Jpg, которые затем не будут создавать излишней нагрузки на сервер вашего хостинга при их загрузке в браузеры пользователей. Наверное, самым ярким примером редактора для работы с растровой графикой ориентированной на использование в вебе является Fireworks от Adobe.

Формат Gif — картинки и анимация для сайта

На данный момент практически все браузеры поддерживают три формата растровой графики — Gif, Png и Jpg. Исторически первым появился формат Gif и именно с помощью него в первых браузерах можно было бы добавлять и отображать графику и медийную информацию, которая в первую очередь выражалась в так называемой Gif анимации.

Аббревиатура Gif расшифровывается как Graphics Interchange Format — формат обмена графикой. Произносится как гиф, но разработчики стандарта считали, что правильно его называть джиф, но гиф прижилось лучше. Т.к. Gif был разработан давно, а скорость интернета у большинства пользователей в то время была ох какой малой, то и при его создании делали основной упор на максимальное уменьшение размера результирующей картинки. В связи с этим, Gif может в себя включать палитру состоящую всего лишь из 256 цветов (ее так же еще называют индексированной палитрой).

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

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

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

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

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

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

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

Но проблема состоит в том, что для любого пиксела в изображении Gif возможно лишь два значения — прозрачный или непрозрачный (два крайних состояния без возможности промежуточных вариантов типа полупрозрачный, на четверть прозрачный и т.п.). Т.е. о таком понятии как альфа-канал (используемого в Png) в прозрачном Gif речи не идет. Из-за этого возникают сложности с отображением плавно изменяющего уровня прозрачности.

Но все равно прозрачный Gif находит применение в вебе, например, в таком формате очень часто сохраняют различные маркеры, используемые на веб страницах. Фон вокруг маркера делается прозрачным и сквозь него будет просвечивать фон веб страницы. Например, вот так бы выглядел маркер без использования прозрачности в Gif:

А так этот же маркер будет выглядеть при замене серого фона на прозрачный цвет при сохранении в Gif:

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

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

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

Алгоритм сжатия в Gif работает таким образом, что лучше всего он будет оптимизировать размер картинок при вертикальном изменении (градиенте) цвета. Т.е. имеет смысл использовать Gif для сжатия картинок с вертикальным градиентом цвета (картинок, цвет в строках которых сильно не меняется).

А вот при сжатии в формат Gif изображений с горизонтальным или наклонным градиентом итоговая картинка может получиться очень большого размера, например, по сравнению все с тем же Png (имеется в виду Png 8). Ну, а кроме большого размера картинок в Gif, при наклонном градиенте (изменении цвета) возможно вылезание неприятных артефактов.

Алгоритм сжатия, используемый в Gif был запатентован, после чего началась усиленная работа над альтернативным форматом Png 8, но на данный момент сроки патентов на алгоритм сжатия Gif уже истекли.

Формат Jpg (Jpeg) — полноцветные изображения

Формат Jpg (Jpeg) был разработан для сжатия и хранения полноцветных картинок (фотографий). Данный формат является собственность ассоциацией американских фотографов, о чем, собственно, и говорит аббревиатура Jpeg — Joint Photographic Experts Group. Хотя сама же эта ассоциация говорит, что это открытый формат.

Как я уже упоминал чуть выше, формат Jpg (Jpeg) сжимает изображения с потерей качества. Вся картинка делится на квадраты размером 8 на 8 пикселей и затем начинает работать алгоритм сжатия, который группирует из этих простейших квадратиков разные простые фигуры. Все те различия в цветах, которые человеческий глаз заметить не в состоянии, из картинки в Jpg (Jpeg) удаляются.

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

Вы можете проверить это сами, взяв какую-нибудь очень качественную фотография и сжать ее в Jpg (Jpeg) с максимальным качеством несколько десятков раз подряд. Поэтому лучше не сжимать повторно в Jpg (Jpeg) исходники такого же формата — будут серьезные потери в качестве из-за накапливания и накладывания артефактов.

Но несмотря на указанные недостатки Jpg (Jpeg) стал очень популярным особенно после появления цифровой фотографии. Основные его достоинства — это возможность быстрого, нересурсозатратного и очень сильного сжатия полноцветных изображений. Правда, формат Jpg (Jpeg) назвать полноцветным трудно, т.к. он не совсем охватывает всю палитру RGB, но это можно отнести к несущественным недостаткам.

Формат Jpg (Jpeg) лучше всего подходит для сжатия фотографий с плавными переходами яркости и контраста, а вот для сохранения изображений вроде чертежей, текстов и других изображений с резкими контрастными переходами Jpeg подходит очень плохо и в этом случае лучшим вариантом будет использование формата сжатия без потерь — Png:

У Jpg (Jpeg), как я уже упоминал, есть возможность задать качество получаемого изображения регулируя степень его сжатия. При сохранении изображений, на которых, например, много неба, следует ставить качество (степень сжатия) Jpeg близкое к максимальному (минимальное сжатие) во избежании заметных артефактов на этом самом небе. А при сохранении в Jpeg изображений с множеством деталей разных цветов качество можно понизить (увеличить степень сжатия), не боясь появления заметных артефактов.

Я упоминал, что при сжатии изображения в формат Jpg (Jpeg) происходит разбиение всего изображения на квадратики со стороной в восемь пикселей. Так вот, если у вас будет возможность выбирать размер результирующего изображения Jpeg, то лучше его брать кратным восьми, т.к. в этом случае вы получите чуть меньше артефактов, что будет особенно заметно на картинках с тонкими линиями и т.п.

Формат Png — замена Gif (Png 8) и Jpeg (Png 24), картинки с прозрачным фоном (Png 32)

Изначально формат Png разрабатывался как альтернатива проприетарного в то время Gif (к его разработке не подпускали никого со стороны). Расшифровывается аббревиатура Png как «portable network graphics» и изначально он был заточен именно для применения в вебе. Формат Png полностью открытый и его описание есть на сайте веб консорциума W3C.

Напомню, что Png является форматом сжатия без потерь, а значит можно спокойно сохранять незаконченное изображений в Png, а затем продолжать его редактирование не боясь получить дополнительные артефакты, как это было в случае формата сжатия с потерей качества Jpg (Jpeg). Существует несколько вариаций Png, каждая из которых призвана выполнять свои задачи:

1. Png 8 — восьмерка обозначает битность цвета и говорит о том, что при сохранении изображения в Png 8 будет использоваться только 256 цветов по аналогии с уже описанным чуть выше Gif. Т.е. Png 8 разрабатывался как полноценная замена Gif и результаты сжатия изображений в этих двух форматах будут практически идентичными. Так же как и в Gif — в этом формате поддерживается прозрачность, но уже с альфа-каналом.

2. Png 24 — цифра 24 означает, что на каждый пиксел изображения в этом формате выделяется три цветовых канала по 8 бит каждый (по 1 байту), тем самым реализуется полноцветное формирование изображения. Т.о. с помощью Png 24 вы сможете передавать цвета как есть, без искажений. Даже Jpg (Jpeg) не может этого сделать на все сто процентов.

   Сохраняя исходную картинку в Png 24 вы получаете абсолютно точно такое же изображение, но зато его размер будет все же больше, чем при использовании формата Jpg (Jpeg). Но это, правда, не всегда так. При больших изображениях или картинках, имеющих резкие переходы Png 24, может показать даже лучший результат, чем Jpeg приемлемого качества.

   Т.е. как я уже упоминал чуть выше, для обычных фоток лучше всего подойдет Jpg (Jpeg), а вот для изображений с текстом или там, где ни в коем случае нельзя будет ухудшать качество, Png 24 будет незаменим. Для сохранения скриншотов, которые я использую в статьях, Png 24 и Png 8 мне кажутся оптимальным решением.

   Например, то же самое изображение с текстом, которое чуть выше вы могли видеть сохраненным в Jpeg (правда с низким качеством, чтобы подчеркнуть возможные артефакты) в Png будет выглядеть так:

   

   А вот полноцветную картинку вначале каждой статьи я сохраняю обычно в Jpg (Jpeg), т.к. соотношение качество/размер говорят в пользу именно такого варианта. Сразу скажу, что существуют разные способы сжатия изображений в формат Png и один из лучших алгоритмов используется, на мой взгляд, в онлайн сервисе Puny Png.

   Я прогнал через него все имеющиеся на блоге изображения и регулярно прогоняю все новые картинки в формате Png, используемые для новых статей. О том, как сжать в нем все свои Png картинки вы можете прочитать здесь — сервис для оптимизации изображений.

3. Png 32 — наверное, вы поняли по аналогии, что в этом формате для одного пикселя возможно использовать аж четыре байта информации. Три отвечают за формирование полноцветного изображения по аналогии с Png 24, а вот четвертый байт выделяется отдельно для формирования альфа-канала, позволяющего использовать формат Png 32 для получения картинок с прозрачным фоном.

   В Png 32 вы сможете указывать изменение степени прозрачности без всяких MATE цветов, а значит такие изображения будут одинаково хорошо смотреться на абсолютно любых веб страницах с любым фоном. Примером такого изображения может служить логотип из шапки моего блога:

   

   или иконка RSS ленты:

   

   Наверное, понятно, что Png 32 просто незаменим и не имеет аналогов по предоставляемых возможностям. Кстати говоря, альфа канал можно использовать так же и в Png 8, но, к сожалению, не все редакторы растровой графики позволят вам это сделать. Фотошоп, например, этого делать не умеет, но зато Fireworks или Gimp умеют.

   Кроме этого, у Png 32 и Png 8 с альфа-каналом есть такая проблема, что альфа канал в браузере IE, начиная с версии 6 и ниже, не поддерживается полноценно и вместо прозрачного фона для Png 32 будет подмешиваться серый цвет, а Png 8 с альфа-каналом там вообще показываться не будет. Правда, таких архаичных браузеров у пользователей уже практически не осталось, но все же.