Веб-графика: современное состояние в целом и классические растровые форматы

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

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

Таким образом, растровые картинки имеют фиксированные размеры в пикселях; их трудно масштабировать (увеличивать — почти бесполезно). Векторные же изображения, напротив, легко поддаются произвольному масштабированию. Перевод из «вектора» в «растр» — задача тривиальная; обратное же преобразование (трассировка) сопряжено с весьма существенными трудозатратами.

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

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

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

  • Растровые
    • GIF
    • JPEG, или, более правильно (но не общепринято в профессиональной среде веб-технологов), JFIF
    • PNG
    • Canvas
  • Векторные
    • SVG
    • Flash
    • Silverlight

Мы употребили аккуратную формулировку «графические форматы и сопутствующие технологии» не случайно, поскольку многие из перечисленных сущностей графическими форматами в традиционном понимании язык не поворачивается назвать. Скажем, Canvas — это технология на стыке HTML, JavaScript и специализированного API, а Flash — штука, главным образом «заточенная» под анимацию и сложное интерактивное взаимодействие с пользователем. Разделение перечисленных выше технологий на «растр» и «вектор» также местами достаточно условно. Например, многие объекты Canvas ближе по стилю работы с ними к векторным примитивам. Ну, а тот же Flash допускает использование растровых объектов.

В этой и последующих статьях мы обсудим многие принципиальные моменты, связанные с использованием графики на веб-сайтах. Начнем, пожалуй, с общего обзора форматов и технологий. Прежде всего остановимся на «классической тройке» растровых графических форматов, давно и прочно укоренившихся во Всемирной паутине — GIF, JPEG и PNG.

Формат GIF предполагает сжатие без потерь качества по алгоритму LZW (Лемпеля — Зива — Велча), но при этом число цветов в палитре ограничено 256-ю, в результате чего этот формат больше всего подходит для малоцветных изображений с четкими чертами.

Миру известны две разновидности формата GIF — GIF87a и GIF89a (цифры означают годы создания). Обе они прекрасно поддерживаются всеми графическими браузерами. GIF89a получил в Сети наибольшее распространение за счет поддержки прозрачных областей и анимации. Помимо прочего, в GIF изначально предусмотрена возможность чересстрочной развертки.

JPEG — полноцветный (до 24 бит на пиксель, то есть до 224 = 16 777 216 оттенков) формат, предполагающий компрессию с потерями качества. Основной свой удар алгоритм сжатия, основанный на разновидности дискретного преобразования Фурье, наносит по областям изображения с высокими частотами изменения цветового тона, яркости и насыщенности (иначе говоря, с высокой детализацией). В итоге JPEG больше всего подходит для изображений фотографического характера, состоящих большей частью из плавных цветовых переходов, ибо вблизи резких контуров даже при незначительном сжатии начинают проявляться неприятные артефакты.

Существует несколько вариантов формата JPEG. Следует сразу заметить, что JPEG2000 — это не разновидность привычного JPEG, а совсем другой формат, который не нашел применения на веб-страницах. Его мы не затрагиваем. Имеются по крайней мере три общеупотребительные разновидности «классического» формата JPEG: Baseline (базовый), Baseline Optimized (оптимизированный) и Progressive (с прогрессивной разверткой).

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

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

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

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

Плавно переходим к PNG. Он позиционируется как полноценная замена обоим вышеозначенным форматам сразу. PNG использует сжатие без потерь качества и может иметь глубину цвета вплоть до 48 бит на пиксель. Правда, при подготовке графики для веб-страниц в основном применяются варианты формата PNG либо с индексированной палитрой, когда на каждый пиксель приходится от 1 до 8 бит информации, как в случае с GIF, либо с 24-битной глубиной цвета. Одним из ключевых достоинств PNG является поддержка альфа-каналов — это дает возможность определять в изображениях области дробной прозрачности. (GIF89a позволяет наделять пиксели только полной прозрачностью или полной непрозрачностью — промежуточных вариантов не дано.) В PNG, правда, в отличие от GIF89a, отсутствует возможность создания анимированных изображений.

Что касается вопросов размера файла, то PNG позволяет добиться экономии (порядка 20%) по сравнению с GIF в типичных случаях, то есть применительно к изображениям с резкими контурами и ограниченной цветовой палитрой. Что же касается фотографических изображений, то PNG оказывается почти всегда намного «тяжеловеснее» очевидного для этих случаев JPEG (даже с наилучшим качеством).

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

Артемий Ломов, WebHiTech