Web-Anatomy.Ru

Десятилетию Рунета посвящается

К выпуску № 28 («Веб-графика в картинках»)

Для оформления одного из сайтов мне понадобилось нарисовать небольшой металлический ключик с тенью. Целых три фактора — малые линейные размеры (77×77 пикселей), четкие контуры ключа, изначальная ограниченность количества цветов (160) в изображении — говорили в пользу сохранения этого рисунка в формате GIF.

Я оставил в палитре исходные 160 цветов — получился файл размером 4135 байт:

GIF, 160 цветов, 4135 байт

(Здесь и далее картинки для пущей наглядности растянуты в 4 раза посредством применения CSS-свойств width и height.)

Это, фактически, исходное изображение без каких бы то ни было потерь.

А что, если сохранить ключик в формате JPEG? Наверняка ерунда получится, поначалу подумалось мне. Но все же попробовал для очистки совести. Установил качество равным 100% и… несказанно удивился результату! При практически полном отсутствии потерь качества (во всяком случае, для невооруженного глаза) объем файла снизился почти вдвое (!) и составил 2265 байт:

JPEG, качество 100%, 2265 байт

Дальше уже начались чисто исследовательские эксперименты. Попытался достичь тех же цифр при сохранении картинки в формате GIF путем редукции палитры. Но даже при сокращении палитры до 64 цветов мне не удалось выйти на недосягаемый уровень в 2265 байт — ключик, заметно потеряв в точности, все еще весил больше, а именно, 2690 байт:

GIF, 64 цвета, 2690 байт

Сравнять объемы эталонного JPEG-файла и GIF-изображения удалось только при 39 цветах в палитре последнего. Но 39 — это уже почти 32, поэтому я ничтоже сумняшеся выбросил еще 7 цветов из палитры и получил очень заманчивый объем оптимизированного файла — 1977 байт, правда, при уже совершенно никаком качестве изображения:

GIF, 32 цвета, 1977 байт

Может быть, положение поможет выправить dithering — добавление псевдослучайного сигнала, «заметающего следы» редукции палитры? Так, Photoshop CS предлагает нам три вида dithering’а: классическую диффузию (diffusion; чередование пикселей наиболее близких цветов к отсутствующему в палитре для имитации последнего), шум (noise) и узор (pattern), напоминающий шахматный. Применение «узорного» dithering’а породило вот такую картинку:

GIF, 32 цвета, dithering, 2170 байт

По правде говоря, даже и не скажешь — что лучше: с dithering’ом или без него. Объем файла после добавления любого псевдослучайного сигнала закономерно возрастает — в данном случае он составил 2170 байт, почти вплотную приблизившись к размеру нашего любимого JPEG’а.

А что с PNG? При нетронутой палитре емкостью в 160 цветов получаем 3097 байт, что в 1,34 раза экономнее по сравнению с GIF:

PNG, 160 цветов, 3097 байт

А при сокращении палитры до 64 цветов уже удается перекрыть рекорд JPEG’а — получается 2215 байт:

PNG, 64 цвета, 2215 байт

PNG-файл с 64-цветной палитрой меньше такого же GIF-изображения всего в 1,21 раза — по сравнению с результатами для картинок с исходной, 160-цветной, палитрой экономия не так впечатляет.

Но самое интересное во всей этой истории то, что файл, сохраненный в 24-битном формате PNG, весит чуть меньше, чем изображение, сохраненное в PNG со 160-цветной палитрой — 3068 байт против 3097:

PNG, 24 бита, 3068 байт

Так или иначе, JPEG все равно рулит. ;-)

Кстати, да. Про JPEG. Вот вам на десерт однопиксельный «Черный квадрат», сохраненный в этом формате, объемом 302 байта, а вот — точно такая же черная точка, но уже представленная пятикилобайтным файлом. В нашей жизни возможно все! Так что при оптимизации картинок будьте внимательнее.

[Перейти к оглавлению]

© Артемий Ломов, 2004, 2005.