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

Как известно, единственный формат анимированных картинок, который был доступен в вебе до недавнего времени — 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».

Читайте также

Какие графические форматы поддерживает ваш браузер?
Скриншоты браузеров Opera, Chrome, IE, Safari, Firefox и IE на Nokia Lumia 920: список поддерживаемых форматов изображений (JPEG, PNG, GIF и др.) с пометкой «Done». Форматы, поддерживаемые браузерами
2013
Поддержка графических форматов
Браузерный тест поддержки графических форматов в теге IMG: от JPEG и GIF до WebP, SVG, TIFF и JPEG 2000. Тест создаёт невидимый элемент IMG для каждого из сохранённых однопиксельных файлов.
2013
О, этот чудный PNG…
Статья на webscript по поводу кроссбраузерного отображения альфа-канала в PNG.
2003

Комментарии 2

Anthon (deiko.myopenid.com) № 1
MNG только, не MNP. Если я верно помню, был момент когда его в IE6 даже обещали поддерживать.
Но с точки зрения сейлзов зачем сейчас анимированные картинки когда есть flash.
Евгений Степанищев (bolknote.ru) автор № 2
Да, спасибо, опечатался. Flash очень слабо поддерживается на мобильных платформах (где IE, естественно, практически нет) — ресурсы пока не те.