Изображения на веб-сайте. Часть I. Форматы.

На сегодняшний день для оформления веб-сайтов применяются графические элементы трех форматов: GIF, JPEG (JPG) и PNG. Чтобы понять, какой из перечисленных форматов для какого вида графики подходит, выясним особенности каждого.

1. GIF.

Формат GIF (Graphics Interchange Format) был разработан в 1987 году компанией CompuServe и изначально предназначался для передачи растровых изображений по Сети(локальной и Интернет). Но поскольку первая версия формата не оправдала надежд - файл изображения получался слишком объемным, что на тот момент делала невозможным его передачу по Сети, двумя годами позже вышла вторая, усовершенствованная версия GIF. Среди новых функциональных возможностей формата оказались: поддержка прозрачности и анимации, значительное сокращение объема файла изображения за счет поддержки LZW-компрессии.

Алгоритм LZW относится к так называемым методам сжатия без потерь. Применительно к формату GIF это означает, что при использовании метода LZW-компрессии не происходит повреждения или искажения данных графического файла. Алгоритм LZW применим только к 8-битным изображениям.

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

Области применения формата: диаграммы, графики, простейшие изображения и анимация.

2. JPEG.

Формат JPEG, расшифровываемый как "объединенная группа экспертов фотографии" (Joint Photographic Experts Group), применяется для хранения многоцветных фотографических изображений, так как обеспечивает сжатие полноцветного изображения практически без уменьшения количества цветов. Процесс сжатия происходит за счет уменьшения числа пикселей, содержащих информацию.

Во время сжатия происходит конвертация изображения в цветовую систему YCbCr. Каналы Cb и Cr, отвечающие за цвет, уменьшаются в 2 раза. Затем уже все цветовые каналы изображения,включая черно-белый канал Y, разбиваются на части (каждая размером 8х8 пикселей). Частички изображения подвергаются дискретному косинусному преобразованию - алгоритму сжатия без потерь. Заключительный этап: упаковка полученных коэффициентов с помощью кодов Хаффмана.

3.PNG.

PNG (Portable Network Graphics) является растровым форматом хранения графической информации без потери качества во время сжатия.

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

Тем не менее, формат PNG отлично подходит для хранения и редактирования изображений на промежуточной стадии их создания. Графический редактор Macromedia Fireworks для сохранения результатов обработки изображения использует именно этот формат.

GIF, JPEG и PNG. Что предпочесть?

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

Советуем почитать

Веб-анимация
Изображения на веб-сайте. Часть II. Методы размещения.
Графика: советы для начинающих
Точечные и векторные изображения