Какой формат выбрать

Мячиков попросил Ивана кратко рассказать о графических веб-форматах с точки зрения уменьшения веса иллюстрации на гипертекстовой странице.

Формат JPG

Сжатие графики в этом формате определяется одним параметром Quality (уровень качества). Этот параметр меняется в пределах от 0 до 100 (0 — максимальное сжатие, 100 — максимальное качество).

JPG-сжатие устроено совсем иначе, чем, например, сжатие файла при помощи архиватора zip. Zip сохраняет в сжатом файле всю информацию, JPG сжимает картинку с потерей качества.

Большинство картинок сохраняются в JPG-формате с уровнем качества 50-70.

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

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

Обычно:

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

Выбор формата картинки

Когда предпочтение формата не очевидно: Начните с JPG. Уменьшайте Quality, пока изображение остается приемлемым. Запомните размер полученного графического файла. Запишите картинку в GIF-формате. Сравните размеры GIF и JPG. Остановите свой выбор на том формате, который дает меньший размер файла при одном и том же качестве изображения.

Замечание

Для маленьких картинок (меньше 100 пикселов по максимальному размеру) используйте формат GIF, даже если картинка — фотография. Формат JPG не приспособлен для маленьких изображений. Это хорошо видно на примере самой маленькой на свете картинки. Веб-дизайнеры часто используют для выравнивания информационных элементов невидимую картинку-распорку Эта картинка — прозрачный GIF размером 1x1, его вес 43 байта. Один пиксел в формате JPG занимает больше полутора килобайтов.

Формат GIF

Формат GIF хранит палитру картинки — набор цветов, который использовался при ее рисовании или к которому пришел конвертор графики, например, Фотошоп, при преобразовании картинки в GIF (в терминах Фотошопа в индексированные цвета).

Палитра GIF может иметь любое количество цветов от 2 до 256.

Если используется 256 цветов (2 в 8 степени), то в GIF каждый пиксел хранится в 8 битах (одном байте). В то время, как сложные картинки могут выдавать 3 байта (32 бита) на пиксель.

Если используется 128 цветов (2 в 7 степени), то в GIF каждый пиксел хранится в 7 битах.

64 цвета дают в GIF 6 бит на пиксел.
32 цвета дают в GIF 5 бит на пиксел.
16 цветов дают в GIF 4 бит на пиксел.
8 цветов дают в GIF 3 бита на пиксел.
4 цвета дают в GIF 2 бита на пиксел.
2 цвета дают в GIF 1 бит на пиксел.

В силу этой двоичной арифметики, значительного выигрыша при переходе, например, от 60 к 40 цветам не происходит. Скачок оптимизации будет выполнен лишь при переходе от 64 к 32 цветам: тогда число бит на пиксель уменьшится на 1.

Сколько цветов GIF-палитры нужно для рисунка?

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

256 цветов (а иногда и 128) часто бывает достаточно даже для полноценной передаче фотографий.

Формат PNG

На разработанный сравнительно недавно веб-формат PNG (Portable Network Graphics) возлагаются большие надежды. Этот формат реализует более эффективно, чем GIF, сжатие без потерь (на 10-30%), но при этом может хранить не только графику с фиксированной палитрой, но и очень качественные изображения с 32 битами на пиксел.

Четвертые версии основных браузеров без специальных “пятых колес” (plug-in modules — подключаемые модули) с форматом PNG не работают. Это означает, что пока еще рано говорить о массовом переходе интернетовского братства на этот графический формат).

      Иван Сидоров kurs@robotland.pereslavl.ru