01. Графические Web-форматы

На этой странице:

• Особенности Web-графики
• Формат GIF
• Формат JPEG
• Формат PNG

Особенности Web-графики

При сохранении иллюстрации, подготовленной в графическом редакторе, всегда возникают два вопроса:

• как не потерять качество изображения;
• как получить файл небольшого объёма.

Эти вопросы особенно актуальны при подготовке графики для Web, ведь посещаемость сайта напрямую зависит от времени загрузки его страниц. Очень хочется сохранить хорошее качество иллюстраций, но “тяжёлая” графика испытывает терпение пользователя и ударяет по его кошельку.

Посещаемость сайта (при прочих равных условиях) тем выше, чем быстрее он просматривается. Пользователь любит быстрое обслуживание и не хочет тратить деньги на просмотр картинок “для настроения”.

Что понимается под объёмом страницы? Конечно, не геометрический размер страницы на экране, а сумма килобайтов, которые нужно загрузить по сети для построения экранного образа. Это размер самого HTML-файла, размер картинок, размер файлов со скриптами и стилевыми таблицами.

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

Под оптимизацией графики понимается поиск разумного соотношения “килобайтный объём/качество” (небольшой объём при приемлемом качестве изображения).

Старайтесь использовать одну и ту же картинку на разных страницах.

Во-первых, такое украшение обойдётся дешевле: картинка будет загружаться по сети только для первой страницы, а для других — из кэша компьютера.

Во-вторых, пользователь, увидев одну и ту же картинку на всех страницах, получит ощущение фирменности дизайна, связанности страниц друг с другом. Пример многократного использования картинок — кнопки навигационной панели. Уместно повторять на каждой странице логотип сайта. При этом на внутренних страницах его нужно делать ссылкой на главную. Инвариантом страниц является и рисованный заголовок сайта.

Известно, что задержка в 1 сек не прерывает ход мыслей пользователя. Задержка более 10 сек раздражает и заставляет заняться другим делом. При задержке более 20 сек, пользователь покидает сайт (как правило, навсегда).

При работе по модему со скоростью 56 Кбит/с задержка в одну секунду возникает при приёме 2-x килобайтного файла. Задержка в 10 секунд — при приёме 34 килобайт. (В этих числах учитывается время соединения с сервером; данные взяты из книги “Веб-дизайн” Якоба Нильсена.)

Отсюда правило: если на странице более 50 килобайт, нужно бить тревогу и принимать срочные меры.

Один из главных путей оптимизации Web-графики ведёт к выбору графического формата, наиболее подходящего для данной иллюстрации и настройке его параметров при сохранении графического файла.

В Web популярны три графических формата — GIF (файлы с расширением gif), JPEG (файлы с расширением jpg или jpeg) и PNG (файлы с расширением png).

Обычное применение этих графических форматов:

• GIF — для логотипов, надписей, заголовков, рисунков с чёткими цветовыми границами и однотонными заливками (без цветовых растяжек);
• JPEG — для фотографий и сложных по цветовой гамме рисунков с плавными цветовыми переходами;
• PNG — для любых иллюстраций, когда соотношение объём/качество оказывается лучше по сравнению с форматами GIF и JPEG.

В этом разделе приводится описание свойств Web-форматов, более подробное устройство графических файлов смотрите в 9 уроке книги “Рисуем на компьютере”.

Формат GIF

Формат GIF (от англ. Graphics Interchange Format) был разработан в 1987 году (GIF87a) фирмой CompuServe для передачи растровых изображений по сетям. В 1989-м формат был модифицирован (GIF89a), были добавлены поддержка прозрачности и анимации.

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

Файл с картинкой в формате GIF записывается в виде:

Заголовок начинается с текста “GIF89a” — признака GIF-формата, затем указывается ширина, высота картинки и другая информация.

За заголовком следует палитра — 24-битные коды цветов, которые используются в рисунке.

Код самого изображения записывается по строкам в сжатом виде, вместо цвета пиксела указывается номер этого цвета в построенной палитре. Это приводит к существенной экономии килобайтного объёма файла: вместо 24-битного цвета для каждого пиксела указывается 8-битный номер этого цвета в палитре.

Графика в формате GIF не всегда имеет 256-цветную палитру. Можно записывать GIF c цветовыми палитрами, содержащими N = 2ⁿ цветов (n от 1 до 8), то есть с палитрами, состоящими из 2, 4, 8, 16, 32, 64, 128 и 256 цветов.

Такой подход позволяет дополнительно уменьшать размер графического файла, когда цветов в картинке мало. Для палитры в 128 цветов для номера достаточно использовать 7 бит, а для двухцветной — всего один бит:

Сжатие N-цветного GIF выполняется без потерь только тогда, когда в исходном изображении использовано не более N цветов. Если цветов больше — потери неизбежны (редактор перед записью изображения в формате GIF сокращает палитру рисунка до N цветов).

Для этой картинки хорошо подходит формат GIF:

А этой иллюстрации формат GIF противопоказан:

Формат GIF обладает тремя дополнительными возможностями.

• Мультипликация. Используя анимационный GIF-редактор, легко собрать простой мультик — нарисовать отдельные кадры, настроить время задержки в последовательности их показа, “зациклить кино” или показывать кадры только по одному разу. Когда анимация готова, она записывается на диск как обычный GIF-файл. Но в этом файле содержится не одна, а целая коллекция GIF-картинок и разная настроечная информация.

  Ниже показан анимационный GIF из бесплатной коллекции рисунков Интернета и его покадровый состав.

  

  

  В HTML-коде нет различия между заданием вывода на экран простого или анимированного GIF-изображения. О том, что картинка “живая”, браузер узнаёт в момент загрузки GIF-файла (с диска или из Сети) и поступает соответственно. Обычные картинки он просто размещает на экране и “забывает” про них. Анимированные ему приходится опекать постоянно, меняя кадры на экране в соответствии с программой, заложенной в самом GIF-файле.

  Анимация здорово отвлекает пользователя от восприятия других элементов страницы, поэтому не рекомендуется прокручивать её в бесконечном цикле.

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

  

  Прозрачный цвет задается в редакторе при записи GIF-файла на диск. Обычный GIF легко сделать прозрачным. Нужно просто загрузить его в графический редактор и снова записать на диск, указав прозрачные цвета.

• Чересстрочная развёртка (применяется для больших GIF-изображений). Изображение разделяется на четыре части размером с оригинальную картинку. Первая часть содержит 1-ю, 5-ю, 9-ю, … строки исходного изображения. Вторая — 2-ю, 6-ю, 10-ю, … Третья — 3-ю, 7-ю, 11-ю,… Четвёртая — 4-ю, 8-ю, 12-ю, …

  

  Браузер строит на экране сначала первую часть картинки, потом вторую, затем третью и четвёртую. Получается эффект постепенного проявления изображения. На медленных линиях Интернета этот метод позволяет пользователю ещё до загрузки всех частей картинки получить представление об изображении — ведь части строятся браузером по мере их поступления на компьютер. Если картинка загружается не из Сети, то различия в построении обычного и чересстрочного GIF-изображения практически незаметны.

Формат JPEG

Формат JPEG (от англ. Joint Photographic Experts Group) был разработан специально для фотографий. Он поддерживает 16 777 216 цветов (2²⁴) и позволяет получать изображения очень высокого качества.

Конечно, высокое качество отражается на размере файла. Но формат JPEG имеет одну особенность: в графическом редакторе при записи на диск можно указать нужную степень качества и, тем самым, сбалансировав качество и размер файла, достичь нужного компромисса. В самом деле, если из миллиона цветов отсканированной фотографии оставить только 10 000, заменив остальные цвета близкими из оставленного набора, то размер файла существенно сократится, а на глаз такую подмену обнаружить практически невозможно.

При максимальном JPEG-качестве картинка, представленная ниже, занимает на диске 200 килобайт. Уменьшение показателя качества (при записи на диск из редактора) позволило сократить размер графического файла до 27 килобайт без какого-либо визуального ухудшения.

Дальнейшее JPEG-сжатие приводит к очевидной деградации снимка.

Формат JPEG содержит 24-битную информацию о цвете пиксела, но при формировании графического файла используется метод сжатия, при котором часть цветов просто отбрасывается:

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

Анимацию, прозрачную графику формат JPEG не поддерживает.

Формат PNG

PNG (от англ. Portable Network Graphics) — растровый формат хранения графической информации, использующий сжатие без потерь. PNG был создан в 1995 году, как замена формату GIF. Однако возможности PNG-формата гораздо шире — в нём в какой-то мере соединяются свойства GIF и JPEG.

Формат PNG существует фактически в двух видах. В первом варианте (PNG-8, аналог GIF) можно задавать число цветов в палитре от 2 до 256, во втором (аналог JPEG) — палитра не фиксируется, но сжатие выполняется без потерь.

Первый вариант может привести к потере информации, если число цветов в исходной иллюстрации превышает число цветов, задаваемых пользователем для палитры PNG.

Во втором варианте (PNG-24) формат поддерживает 2²⁴ (16 777 216) цветов, то есть столько же, сколько формат JPEG.

В силу того, что PNG во втором варианте сохраняет картинку в файл без потерь, формат можно использовать для хранения промежуточных этапов редактирования. JPEG для этой цели не подходит — даже при выборе максимального значения качества происходит потеря информации.

Следует отметить, что лучшим способом хранения оригинального рисунка является собственный формат того редактора, который используется (например, PSD для Photoshop, XAR для Xara). Эти форматы не только сохраняют исходное качество иллюстрации, но и записывают в файл “историю” создания рисунка, что позволяет продолжить редактирование с текущего места или, при необходимости, откатиться назад на несколько последних правок.

PNG и GIF

PNG в первом варианте сжимает графику без потерь как и GIF. При числе цветов близком к 256, PNG сжимает лучше GIF на 5-25%, при малом количестве цветов формат GIF работает лучше.

PNG не поддерживает анимацию, но поддерживает чересстрочную (прогрессивную) развёртку. Прозрачность, которую можно задавать в PNG не поддерживает браузер Internet Explorer версии 6 (в 7-ю версию такая поддержка уже включена).

Прозрачность PNG существенно отличается от аналогичного свойства формата GIF. GIF поддерживает простую бинарную прозрачность (пиксел может быть либо полностью прозрачным, либо абсолютно непрозрачным), PNG предлагает 254 и более уровней частичной прозрачности (поддержка так называемого альфа-канала).

PNG и JPEG

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

Примеры

Иллюстрация	GIF	PNG	JPEG
	248 Б	343 Б (+27%)	1 200 Б
	10 978 Б	9 697 Б (-12%)	20 000 Б
	17 KБ (плохое качество)	12 KБ	8 KБ