png

Переложил на хостинг «Гитхаба» свой проект семилетней давности — «Какие графические форматы поддерживает ваш браузер?». Я его иногда обновляю и мне было бы проще это делать через репозиторий.

Из всего, что я там проверяю, сразу не сработала только проверка на AVIF — это новейший формат, у меня на компьютере его поддерживает пока только «Файерфокс», ему важно указание типа содержимого, а «Гитхаб» передаёт неправильное значение.

Браузеры (сверху вниз): «Сафари» 13, «Файерфокс» 78 и «Опера» 69

Я подумал, что наверняка есть какой-то способ указать правильный тип в файле конфигурации сайта, но нет, так это не работает, такой настройки в нём нет. В принципе, известно откуда «Гитхаб» берёт свою базу типов содержимого — из проекта mime-db. Но этот путь тоже не сработал — я добавил туда тип для AVIF больше недели назад, но ничего не изменилось. Видимо синхронизация изменений происходит нечасто.

Пришлось идти другим путём — вместо того, чтобы загружать файл картинки, внедрил его внутрь при помощи протокола data:, это позволило обойти проблему. Можете протестировать на своём браузере.

Ссылка на проект: https://bolknote.github.io/detect-browser-graphics-formats/
Ссылка не репозиторий проекта: https://github.com/bolknote/detect-browser-graphics-formats

Недавно мне нужно было восстановить несколько сотен картинок в формате PNG и JPEG силами командной строки — часть содержимого в файлах испорчена и задача была вытянуть хоть что-нибудь.

Пальцы стёр о гугл, но ничего не нашёл. Тем не менее такие утилиты всё-таки нашлись обычным перебором всего, что работает с этими форматами. Так что, мало ли, может вам тоже надо и вы так же не можете найти. Делюсь.

Заклинания для восстановления звучат так:

optipng -fix broken.png -out fixed.png
jpegtran -outfile fixed.jpg broken.jpg

Первая утилита распространяется самостоятельно, вторая — в составе libjpeg или mozjpeg.

Тема Internet Explorer и PNG как-то удивительно неисчерпаема. Совершенно случайно накнулся на способ, который широко известен в буржуинских интернетах, а в рунете мне как-то на глаза не попался, хотя, судя по поиску, всё-таки известен.

Касается он отображения полупрозрачных PNG в Internet Explorer 6 и ниже. Как известно, без ухищрений, у PNG полупрозрачность в указанных версиях не появится, вместо этого IE покажет серый фон.

Оказывается, есть способ заменить этот цвет на любой другой. Например, на белый. Это можно сделать, например, утилитой TweakPNG:

• открываем PNG в TweakPNG
• в меню «Insert» выбираем «bkGD (Background-color)»
• выделяем свежесозданную строку «bkGD»
• клик правой клавишей → «Edit chunk…», меняем цвет, к примеру, на белый
• сохраняем файл
  Кстати, многие инструменты оптимизации PNG удаляют параметр «bkGD».

Отличный способ сделать graceful degradation.

Совершенно случайно обнаружил поразительную штуку: оказывается IE, загружая картинку через VML, понимает альфа-прозначность у PNG:

<xml:namespace ns="urn:schemas-microsoft-com:vml" prefix="v" />
<style>
    v\:* { behavior: url(#default#VML); display: inline-block; }
</style>
<v:image src="http://www.w3.org/Graphics/PNG/alphatest.png" style="width: 380px; height: 287px"></v:image>

К сожалению, есть существенный недостаток: картинка отображается чувствительно медленнее.

Вчера попробовал натравить инструменты для оптимизации картинок на свой каталог с картинками этого блога. Результат следующий: выигрыш составил около 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%.

@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 с прозрачностью).

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».