13 заметок с тегом

gif

Позднее Ctrl + ↑

Сжатие картинок

Вчера попробовал натравить инструменты для оптимизации картинок на свой каталог с картинками этого блога. Результат следующий: выигрыш составил около 10 процентов (больше всего у меня JPEG-файлов). Немного, но и не мало в некоторых ситуациях. Я использовал только утилиты для командной строки.

PNG. Для сжатия PNG использовался известнейший pngcrush. Интересен в режиме «brute force» (перебора), где перебираются комбинации фильтров (фильтры — это специализированные методы сжатия, например, для градиента и т. д.). Я запускал сделующим образом: «pngcrush -brute -fix -e .png1 *.png». В итоге, все файлы png у меня в папке получают свою оптимизированную копию с расширением png1. Есть опасный момент — если у вас есть файлы APNG, pngcrush их превратит в файл без анимации. Экономия получилась порядка 7%.

JPEG. В JPEG’e особо оптимизировать нечего, формат сжатия с потерями, поэтому оптимизацию без участия человека не произвести — трудно просчитать насколько критично изменился рисунок. Оптимизировать тут нечего, но можно убрать мусор — многие программы записывают в файл комментарии, лишнюю информацию. Я использовал для чистки PureJPEG, после него прошёлся своим Photoshop Crap Remover, чтобы дочистить файл. Формат запуска PureJPEG следующий: «dir /B /S /A-D *.jpg | purejpeg», в итоге все файлы с расширением jpg будут вычищены. Моя утилита написана на PHP, так что я даже не буду упоминать как её запустить — кому надо разберётся, остальным объяснить очень трудно. Экономия — около 10%.

GIF. Несмотря на то, что утилите GIFLite уже около 12 лет, мне она кажется лидером по переупаковке GIF. Утилита написана White River Software, её разработка начата ещё в 1992 году и она рабоатет под DOS, т. е. должна запускаться даже в Linux из-под какого-нибудь DOSEmu. Утилита платная, но кому платить уже непонятно — никаких координат этой фирмы в сети нет. Поэтому ищем любой ключ, запускаем giflite с ключём /R и «регистрируемся».

Запускать её сложнее, чем предыдущие — в 1992-м году длинных имён не было, да и перебирать свои методы она не умеет. Поэтому я написал небольшую batch-программу. Она проходит по всем GIF-файлам в папке, применяет на каждый один из четырёх методов (видимо выбирается какая-то стратегия для выбора словаря в LZW-сжатии), после чего выбирает файл с наименьшим размером. Экономия составила около 8%.

giflite.cmd:

@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 Сортируем полученное по размеру и забираем последний (наименьший) файл
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 >nul 2>nul

Анимация в вебе

Как известно, единственный формат анимированных картинок, который был доступен в вебе до недавнего времени — Animated GIF. Его недостатки общеизвестны — поддерживается только 256 цветов, нет полупрозрачности (альфа-канала). На смену GIF, теоритически, должен прийти более совершенный PNG, с выходом Internet Explorer 7, который стал поддерживать альфа-канал почти так же хорошо, как его младшие братья, ситуация всё улучшается, но…

В PNG, увы, нет анимации. Три новых формата, которые пока знакомы редкому веб-мастеру — APNG, MNG и SVG позволяют, в какой-то степени, исправить это досадное упущение.

MNG (Multiple-image Network Graphics) в данный момент поддерживается без плагинов в Konqueror и Netscape 6 и выше. Формат похож на PNG, но использует больше типов данных. Фрейм, используемый в анимации, может сохраняться в форматах PNG или JNG (JPEG Network Graphics, по сути — JPEG с прозрачностью).

Анимированный PNG (10.98КиБ)

APNG (Animated PNG) — формат расширяющий PNG и совместимый сверху вниз. Если ваш браузер не поддерживает APNG, вы увидите просто статичную картинку. В настоящее время формат поддерживают Opera 9.50 и далёкий пока от релиза FireFox 3. Картинка выше этого абзаца — тест, поддерживает ли ваш браузер APNG. Если вы видите «Your browser does support Animated PNG», значит поддержка есть.

SVG (Scalable Vector Graphics) — относительно молодой векторный формат, который поддерживают достаточно много браузеров: Opera с восьмой версии, Safari 3 и выше, FireFox с версии 1.5, а так же все браузеры на движке Gecko, начиная с версии 1.8. Это XML формат, который для меньшего размера можно сжать алгоритмом GZip (формат SVGZ). Обычно, анимацию в SVG делают при помощи внедрённого туда EMCAScript, сменяя кадры из картинок в любом другом формате. Не совсем то, но поддерживается почти любым современным браузером, хотя в стандарте SVG есть собственные методы анимации, по этой теме можно почитать статью на несложном английском «Advanced SVG Animation Techniques».

Фокусы с GIF, прозрачность и hover

Самые внимательные, наверное, заметили, что в прошлых заметках у меня на картинке использовалась эмуляция эффекта наведения на ссылку — посмотрите, если навести на картинку мышку, «ссылка», выделенная синим, на картинке подчеркнётся. И это не JavaScript.

Объяснение очень простое — картинка сделана с прозрачностью, далее при помощи CSS под неё подставлен белый фон, а при наведении (селектор «:hover») фон меняется на голубой. Такой же эффект использован на картинке с пистолетом слева (наведите мышку). Ссылка на картинке обязательна — без неё в Internet Explorer (версии ниже 7-й) фон менять не будет, «:hover» просто не сработает. Таблица стилей для этой картинки выглядит вот так:

a.gun:hover img { background: black } /* стиль при наведении мышкой */
a.gun img { margin: 0px; background: white } /* убираем поля в Opera и подкладываем белый фон */

HTML, соотвественно:

<a href="#" class="gun"><img src="gun.gif" /></a>

Если вам не ясно, почему пистолетик «стреляет» (т. е. почему изображение движется, когда наводишь мышку), то тут всё просто — прозрачная область движется (это animated GIF), на белом фоне этого не видно, когда фон меняется, создаётся эффект движущейся пули.

Ещё интересные эффекты можно получить, если использовать альфа-канал (полупрозрачность) в формате PNG, но, к сожалению, об анимации тут придётся забыть.