Алгоритмы уменьшения изображений

За годы существования браузеров их производители встроили в них поддержку, без сомнения, гигантского количества форматов графики: GIF, JPEG, JPEG2000, PNG, APNG, MNG, ART, WMF, EMF, BMP, ICO, XBM, SVG, CUR, ANI, WBMP, TIFF.

Часть форматов исчезла (как поддержка ART и XBM из Internet Explorer или MNG из Firefox), другая часть специфична только для одного браузера (например, WBMP в "Опере" или JPEG2000 в браузерах WebKit/KHTML), так что разумно ориентироваться на форматы, поддерживаемые во всех браузерах, — это GIF, JPEG и PNG.

Интересным также является формат SVG, который активно прокладывает себе дорогу, но, к сожалению, не поддерживается Internet Explorer; впрочем, есть надежда, что следующая версия этого браузера его поддерживать будет. Так что мы рассмотрим и его, с расчетом на будущее.

О формате ICO мы говорить не будем, хотя он и поддерживается всеми браузерами: его использование, во-первых, весьма специфично, а во-вторых, детально было рассмотрено в книге "Разгони свой сайт".

Итак, четыре формата графики: GIF, JPEG, PNG и SVG, у каждого из них своя специфика, у каждого свои особенности, каждый поддается, в разной степени, оптимизации по размеру. Эти вопросы и будут рассмотрены в этой лекции подробнее.

3.1. Уменьшаем GIF (Graphics Interchange Format)

Придуманный в 1987 году фирмой CompuServe формат в настоящий момент имеет два стандарта: GIF87a и GIF89a. С точки зрения пользователя они не различаются, важными же отличиями более поздней версии формата стали наличие анимации, чересстрочный вывод и поддержки метаданных.

Это первый формат (наряду с XBM), применявшийся в вебе, что наложило свой отпечаток: статичное изображение или кадр анимации могут содержать не более 256 цветов.

До появления PNG, который будет рассмотрен ниже, в этом формате ценилось наличие прозрачности, которого не было в JPEG. Но и сейчас формат популярен, в основном из-за наличия в нем анимации, поскольку альтернативные форматы анимации (APNG, MNG, SVG) еще не получили столь широкого распространения. Вторая причина — небольшие изображения могут занимать в формате GIF меньше объема, чем в PNG.

3.1.1. Рецепт № 1: горизонтальное меньше вертикального

Изображения GIF хорошо поддаются оптимизации. В параграфе № 8 "Ководства" Артемия Лебедева есть небольшое, но интересное исследование особенностей этого формата. Вывод из параграфа простой: чем больше на картинке горизонтальных линий одного цвета, тем лучше сжимается изображение. Алгоритм компрессии LZW, применяемый в GIF, вообще лучше сжимает регулярные горизонтальные структуры в пределах одной линии.

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

В Adobe Photoshop этот инструмент называется "Lossy" и находится в диалоге "Save for Web..." ( Ctrl+Shift+Alt+S ) формата GIF.

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

Рис. 3.1. Применение инструмента "Lossy" со значением 13 позволило смягчить переходы и уменьшить вес изображения с 596 Кб до 281 Кб

Рецепт, конечно же, не универсален. Но существует еще несколько способов сделать GIF меньше: изменение параметров сжатия (размер словаря), уменьшение количества цветов, удаление опциональной информации (например, комментариев), а также исключение признаков конца кадра и оптимизациякадров изображения, если изображение содержит анимацию.

3.1.2. Рецепт № 2: уменьшаем количество цветов

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

Формат поддерживает фиксированное число цветов в изображении: 2, 4, 8, 16, 32, 64, 128, 256, но часть палитры может быть не использована. Если выбрать, например, 200 цветов, то в палитре будут указаны 256 цветов, 56 из которых не будут задействованы. Но чем меньше цветов использовано в изображении, тем лучше оно сожмется.

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

Adobe Photoshop предлагает на выбор четыре алгоритма сокращения: Perceptual, Selective, Adaptive и Restrictive (Web).

Последний режим дает наихудшее качество и обязан своему существованию причинам скорее историческим: он подгоняет палитру изображения под 216 цветов, которые отображаются одинаково на всех устройствах с 256 цветами.

Режим Perceptual обычно используется для фотографий, где важна точность передачи; в этом режиме особое внимание уделяется тому, как человек воспринимает цвета.

Selective лучше всего подходит для ярких и четких изображений; режим нацелен на сохранение цветов однотонных элементов.

В режиме Adaptive для палитры выбираются части спектра, где представлено большинство оттенков изображения; в этом режиме изображение, как правило, занимает чуть больше, чем в других.

При уменьшении количества цветов выбранная вами программа будет пытаться заменить недостающий цвет узором из имеющихся цветов, применяя для этого один из алгоритмов. Например, Photoshop предоставляет выбор из "No Dither", "Diffusion", "Pattern" и "Noise". Их значение описывать нет никакого смысла, лучше один раз попробовать их применить, правда, любой из этих инструментов увеличивает размер изображения.

Наиболее удобны для процесса выбора количества цветов и алгоритма их сокращения программы, показывающие одновременно исходное изображение и обработанный результат — например, уже неоднократно упомянутый Adobe Photoshop.

3.1.3. Рецепт № 3: автоматическая оптимизация

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

Чтобы выяснить, насколько качественно справляются программы автоматической оптимизации GIF со своей работой, были использованы три набора изображений.

Первый набор — 494 иконки с небольшим количеством цветов, общим объемом 310 килобайт. Второй набор — 10 произвольных фрагментов фильмов, скачанных с сайта GIFTUBE, характеризующихся отсутствием статичных межкадровых элементов и использованием всей палитры цветов, объем 7,63 Мб. Третий набор — 411 анимированных изображений, с использованием неполной палитры; в изобилии присутствуют статичные элементы, объем — 21,95 Мб.

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

Как показывают тесты, лучше всех справляется с оптимизацией изображения программа SuperGIF (платная программа BoxTop Software, $49,95), но результат ее работы нужно контролировать: полноцветную анимацию она портит. Единственная программа из наших тестов, которая успешно оптимизировала такие изображения, — это GIFLite, тоже платная программа компании White River Software (цена $30, но существует ли компания — неясно), закончившая свое развитие в 1995 году (программа под DOS).

Если с запуском SuperGIF проблем нет — это программа с графической оболочкой и почти без настроек, — то GIFLite запустить сложнее: она работает только из командной строки, не поддерживает длинные имена файлов и не умеет самостоятельно выбирать метод, который оказался лучшим для конкретного файла. Эти печальные недостатки устраняет следующая программа, написанная на языке пакетных файлов Windows:

@ECHO OFF
REM Написал Евгений "BOLK" Степанищев. 2007.
MKDIR GIFLITE.$$$ 2>nul
REM Основной цикл обработки файлов GIF
FOR /R %%N IN (*.gif) DO @CALL :method %%N
REM Удаляем весь мусор, который мог остаться
DEL /Q giflite.tmp 2>nul
RMDIR /S /Q GIFLITE.$$$
EXIT
:method
REM Перебираем методы
FOR %%M IN (0 1 2 3) DO @CALL :giflite %%M %%~s1 %1
REM Сортируем полученное по размеру и забираем последний
REM (наименьший) файл
FOR /F "usebackq skip=3" %%R IN (`DIR /B /O-S GIFLITE.$$$`) ?
DO @CALL :getresult %%R %1
GOTO :EOF
:getresult
REM Переписываем файл на место прежнего, удаляем мусор
MOVE /Y GIFLITE.$$$\%1 %2
DEL /Q GIFLITE.$$$\*.*
GOTO :EOF
:giflite
REM Запускаем преобразование
GIFLITE.EXE -t -h -m%1 -o %2 GIFLITE.$$$\%1

3.1.4. Рецепт № 4: уменьшаем анимацию вручную

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

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

3.1.5. Рецепт № 5: когда GIF лучше PNG

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

Самый простой принцип получения полноцветного GIF следующий: исходное изображение разбивается на несколько кусков, так, чтобы количество цветов в каждом из них было не более 256 (проще всего — сделать куски 16x16, это как раз 256 пикселей, значит, и цветов не может быть больше). Каждый кусок вставляется в отдельный кадр, и между ними выставляется нулевая задержка. Таким образом, пользователь увидит все кадры одновременно, и они сложатся в цельную картинку.

Рис. 3.2. Пример изображения, занимающего меньше в полноцветном GIF, чем в png

Существуют несколько программ, работающих подобным или чуть более сложным способом. Лучшая, на наш взгляд, — платная программа itsagif, фирмы Pedagoguery Software.

Авторы itsagif заявляют, что полноцветный GIF может выиграть у PNG по эффективности сжатия на изображениях с количеством цветов от 300 до 1000. Это действительно так, если в изображении не встречаются элементы, которые PNG умеет сжимать лучше GIF, например, градиенты.

Вот этот рисунок бабочки 756x488 пикселей содержит 1073 уникальных цвета. В файле PNG, оптимизированном программой PNGout, он занимает 77,6 Кб, тогда как в полноцветном GIF — 68,4, экономия составляет 12%.

3.1.6. Резюме

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

Однородные по горизонтали изображения сжимаются лучше, чем остальные, поэтому в зашумленные изображения имеет смысл вносить горизонтальные искажения инструментом "Lossy" (Adobe Photoshop). "Lossy" и уменьшение количества используемых цветов являются способами ручной оптимизации статических изображений. В редких случаях позволяет уменьшить размер изображения применение чересстрочного режима.

Для программной оптимизации полезны программы GIFLite и SuperGIF, причем результат работы последней необходимо контролировать.

Анимированные изображения можно оптимизировать как вручную, если воспользоваться неполным перекрытием кадров, так и автоматически, при помощи уже упомянутых программ. Интересной техникой оптимизации, основанной на анимации с нулевыми задержками, является использование программы itsagif фирмы Pedagoguery Software, которая позволяет получать полноцветные изображения, в определенных условиях занимающие меньше, чем PNG.