APNG или анимированный WebP: что выбрать для веб-анимации

В чём вообще спор

Сравнивать APNG с GIF — занятие почти бессмысленное: APNG лучше почти во всём (мы разобрали это в статье APNG против GIF). А вот APNG против WebP — спор настоящий, потому что оба формата современные и сильные. Разница между ними не «лучше/хуже», а в философии:

• APNG хранит каждый кадр без потерь — пиксель в пиксель, как PNG. Никаких артефактов сжатия, абсолютная чистота. Платой за это бывает размер.
• WebP (анимированный) умеет сжатие с потерями и оптимизирует кадры между собой. Результат — заметно меньший файл, иногда ценой лёгкой потери деталей.

Сжатие: с потерями против без

Это корень всех различий. APNG — наследник PNG, а значит, сжимает только без потерь. Он никогда не выбрасывает данные: что нарисовали, то и хранится. Поэтому APNG идеален там, где любая «грязь» сжатия недопустима — резкие края текста, тонкие линии, плоские заливки.

WebP гибче: он умеет и без потерь, и с потерями. В режиме с потерями он, как при сжатии видео, выбрасывает то, что глаз почти не замечает, и дополнительно убирает повторяющиеся части соседних кадров (межкадровое сжатие). Для фотореалистичной анимации это даёт огромную экономию.

Размер файла: кто легче

Честный ответ: в большинстве «тяжёлых» сценариев анимированный WebP меньше. На длинных роликах с десятками кадров и фотореалистичным содержимым разница может быть кратной — WebP легче в разы. Именно поэтому для веб-доставки, где каждый килобайт влияет на скорость загрузки, WebP часто оказывается практичнее.

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

Качество и прозрачность

По прозрачности формы равны: оба поддерживают полноценную 8-битную альфу — плавный край, чистая накладка на любой фон. Никакого «грязного ореола», как у GIF, ни там, ни там.

А вот по чистоте пикселей APNG надёжнее. Поскольку он всегда без потерь, в нём физически не может появиться артефактов сжатия — мутных краёв, «звона» вокруг контрастных линий. WebP в режиме без потерь тоже идеально чист, но если включить сжатие с потерями ради размера, на сложных краях возможны лёгкие искажения. Для дизайна, где важна каждая линия, это аргумент за APNG.

Поддержка и запасные варианты

Оба формата понимают все актуальные браузеры — здесь паритет. Но в нюансах есть разница, важная для практики.

У APNG козырь — обратная совместимость: если декодер вдруг не знает анимацию, он покажет первый кадр как обычный PNG. Файл не «сломается». Поэтому APNG можно вставлять простым тегом <img> и ни о чём не думать.

У WebP такого «мягкого отступления» нет: браузер без поддержки просто не покажет картинку. Поэтому для WebP часто заранее готовят запасную картинку в другом формате — на случай, если браузер не откроет WebP (на языке вёрстки это делают тегом <picture>). Сегодня это редкость, но в продакшене такую страховку часто оставляют.

Что выбрать: короткая шпаргалка

Без воды, по делу:

• Берите APNG, если важна абсолютная чистота: логотипы, иконки, стикеры, графика с резкими краями, короткие анимации, где недопустимы артефакты. Плюс — если цените простую вставку и обратную совместимость.
• Берите WebP, если главное — лёгкость: длинные фотореалистичные ролики, баннеры с множеством кадров, всё, где ради меньшего веса допустимо лёгкое сжатие с потерями.

И не забывайте про третий путь: для совсем длинных и тяжёлых анимаций иногда правильнее всего обычное видео (форматы MP4 или WebM) — оно весит меньше и APNG, и WebP. Но видео — это уже плеер, а не картинка тегом <img>.

Как получить нужный формат

Если у вас на руках набор PNG-кадров, собрать из них APNG — дело пары секунд в браузере. А если есть готовый APNG, из него легко достать статичный кадр обратно в PNG.

Хотите вытащить кадр из анимации — поможет конвертер APNG в PNG. Пошаговый процесс сборки описан в статье как создать APNG, а основы формата — в материале что такое APNG. Полный список преобразований — на странице всех форматов.