Что такое APNG: анимированный PNG, который обходит GIF

Что такое APNG простыми словами

APNG (Animated PNG) — это анимированная версия привычного формата PNG. Если коротко: берём PNG, который умеет показывать одну неподвижную картинку с прозрачностью, и добавляем ему ещё несколько кадров. Получается мини-видео без звука, которое крутится в браузере по кругу — как GIF, но качественнее.

Главное, что нужно запомнить: APNG не выбрасывает ни одного достоинства PNG. Он сохраняет полный цвет (16,7 миллиона оттенков), плавную прозрачность (когда край объекта мягко растворяется, а не обрезается «лесенкой») и сжатие без потерь (картинка ужимается, но ни одна деталь не теряется). Просто теперь всё это умеет двигаться.

Откуда взялся формат

APNG родился в 2004 году в недрах Mozilla — компании, которая делает браузер Firefox. Инженерам нужен был лёгкий способ показывать анимированные интерфейсы (вроде вращающегося индикатора загрузки), и они решили не изобретать тяжёлый формат, а просто аккуратно расширить PNG.

Дальше история сделала забавный крюк. Официальная рабочая группа PNG поначалу отказалась принимать APNG в стандарт — мол, идёт вразрез с философией формата. Но браузеры рассудили иначе: Firefox внедрил APNG ещё в 2008 году, за ним подтянулись Safari, Chrome, Edge и Opera. Формат жил и работал годами без формального «благословения».

Точку поставили только недавно: в 2023 году APNG официально включили в третью редакцию стандарта PNG. То, чем браузеры пользовались полтора десятилетия, наконец стало частью официальной спецификации.

Как PNG научился двигаться

Файл PNG внутри устроен из блоков, которые называют чанками (chunks). Это как пронумерованные кирпичики: один хранит размеры, другой — палитру, ещё один — собственно пиксели. APNG добавляет к этому набору всего три новых кирпичика — и этого достаточно, чтобы картинка ожила:

• acTL — «паспорт анимации». Стоит в начале файла и сообщает: это анимированный PNG, в нём столько-то кадров, и крутить их нужно столько-то раз (ноль означает «бесконечно»).
• fcTL — «режиссёр кадра». Перед каждым кадром описывает его: размер, положение, сколько миллисекунд держать на экране, что делать со старым кадром перед показом нового.
• fdAT — «плёнка кадра». Хранит сами пиксели каждого дополнительного кадра (первый кадр лежит в обычном PNG-блоке).

Красота решения — в его экономности. Не нужен новый движок, новый кодек, новая программа. Любая система, которая уже умеет читать PNG, понимает большую часть файла; нужно лишь научить её трём новым чанкам.

Главный трюк: старые программы тоже его откроют

Вот самый изящный приём APNG, ради которого его и стоит полюбить. Первый кадр анимации хранится как абсолютно обычный PNG. Все «двигающиеся» данные спрятаны в дополнительных чанках, которые старая программа имеет полное право пропустить.

Что это значит на практике? Откройте APNG в древнем просмотрщике, который про анимацию слыхом не слыхивал, — и вы увидите аккуратную статичную картинку (первый кадр) вместо ошибки или пустого квадрата. Откройте тот же файл в современном браузере — и он оживёт. Один файл одинаково корректно ведёт себя и в прошлом, и в настоящем.

Почему APNG обходит GIF

GIF появился в 1987 году, когда экраны показывали жалкую горстку цветов, и с тех пор почти не менялся. Его ограничения сегодня выглядят как привет из каменного века:

Самая заметная разница — прозрачность. GIF умеет назначить ровно один цвет «полностью невидимым»; всё остальное непрозрачно. Поэтому стикер на GIF часто окружён уродливой белой или серой каймой. APNG же делает край мягким: пиксель может быть прозрачным на 30%, на 70% — на любую долю. Объект ложится на любой фон чисто, без «грязного ореола».

Где вы встречаете APNG

APNG — формат-невидимка: вы пользуетесь им каждый день, не подозревая об этом.

• Стикеры в мессенджерах. Apple ещё в 2016 году выбрала APNG основным форматом для анимированных стикеров iMessage — именно из-за плавной прозрачности.
• Интерфейсы сайтов и приложений. Лоадеры, переключатели, мелкие подсказки-анимации, эмодзи-реакции.
• Промо и баннеры. Короткие зацикленные ролики, где важно качество картинки, а не размер файла.

Если хотите глубже — мы разобрали сценарии применения в отдельном материале про APNG в вебе и стикерах.

Как создать и открыть APNG

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

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