Опубликовано: четверг, 27 февраля 2025 г. в 08:16

Гиф в 2025 году

Frontend

Вам нужно автовоспроизводящееся зацикленное видео без звука? В разговорной речи именно такое значение имеет слово «гифка». Слово прижилось, но сам формат изображения уже древний и устаревший. Существует множество способов добиться такого результата, но ясно одно: больше нет причин использовать громоздкий формат .gif.

Форматы изображений

GIF, PNG, WebP, AVIF и JPEG-XL поддерживают как статичные, так и анимированные изображения. Формат GIF существует с 1987 года и ограничен 256-цветной палитрой. GIF и PNG считаются устаревшими форматами, а WebP в значительной степени вытеснен AVIF.

AVIF

Формат AVIF был создан AOM, группой, в которую входят Google, Apple, Microsoft, Netflix, Meta, Zoom, Amazon, Adobe и Intel. AVIF базируется на видеокодеке AV1.

На сайте AOM описаны особенности формата изображения:

AVIF поддерживает сжатие без потерь и с потерями, а также высокий динамический диапазон (HDR), широкую цветовую гамму (WCG), прозрачность и анимацию.

Хотя анимированный AVIF поддерживается во всех браузерах уже несколько лет, в Safari этот формат может вызывать проблемы с частотой кадров.

WebP

WebP — это значительное улучшение по сравнению с GIF или анимированным PNG. По данным Google (создателей WebP), анимированные GIF, преобразованные в WebP с потерями, на 64% меньше, а WebP без потерь — на 19% меньше. Поддержка браузерами универсальна и гораздо шире, чем поддержка анимированного AVIF.

JPEG-XL

WebP и AVIF базируются на видеокодеках, поэтому было бы удивительно, если бы JPEG-XL, созданный с нуля как формат статичных изображений, смог превзойти их.

В статье озаглавленной «Преимущества AVIF» Jon Sneyers, один из создателей JPEG-XL, сравнил анимированный JPEG-XL с AVIF и видеокодеками в невыгодном свете:

Несмотря на то, что в JPEG XL можно создавать анимацию, он не предлагает продвинутых функций видеокодека, таких, как оценка движения. JPEG XL сжимает лучше, чем GIF, APNG и анимированный WebP, но не может конкурировать с современными видеокодеками при создании «естественного» видео. Даже для трёхсекундного зацикленного видео или синемаграфа, где большая часть изображения статична, реальные видеокодеки, такие, как AV1 и HEVC, могут сжимать гораздо лучше, чем кодеки для статичных изображений.

Видео

Альтернативой форматам анимированных изображений служит элемент <video>:

<video autoplay loop muted playsinline src="friends.mp4"></video>

Большинство браузеров разрешают автовоспроизведение, если видео не содержит звуковой дорожки или содержит атрибут muted, но это зависит от пользовательских настроек.

HTML <video> может иметь любой размер и соотношение сторон, а также отображаться без кнопок play/pause/mute, поэтому он более гибок, чем можно подумать.

AV1

Созданный AOM, видеокодек AV1 является лучшим кодеком для видео в Интернете. AV1 обеспечивает качество, эквивалентное H265/HEVC и VP9, с битрейтом на 30% ниже.

Ниже представлено древнее видео, конвертированное в AV1. Если оно не воспроизводится, значит, ваш браузер или устройство не поддерживают этот кодек.

AV1 поддерживается во всех браузерах, но с некоторыми существенными оговорками:

Safari поддерживает WebM для некоторых видеокодеков, но не для AV1, поэтому необходимо использовать MP4.
Safari воспроизводит видео AV1 только на устройствах, поддерживающих аппаратное ускорение декодирования.

Большинство современных устройств Apple поддерживают аппаратное ускорение декодирования видео в формате AV1. К концу 2025 года, скорее всего, это будет возможно для всех устройств. В обращении находятся миллионы старых устройств Apple, которые будут использоваться ещё долгое время. Резервный видеоролик, использующий более широко поддерживаемый кодек, например H.264, может быть предоставлен с помощью нескольких элементов <source> и атрибута type.

<video controls playsinline>
  <source src="myvideo-av1.mp4" type="video/mp4; codecs=av01.0.08M.08" />
  <source src="myvideo-h264.mp4" type="video/mp4" />
</video>

Adobe Media Encoder не поддерживает экспорт видео в формате AV1. DaVinci Resolve 19 под Windows поддерживает экспорт видео в формате AV1. Для преобразования видео в формат AV1 можно использовать инструмент командной строки FFmpeg или GUI, например Shutter Encoder.

VP9

VP9 поддерживается во всех браузерах. В отличие от AV1, он не зависит от того, поддерживает ли пользовательское устройство аппаратное ускорение декодирования.

Форматы видео vs форматы изображений

Отзывчивое видео

Раньше у изображений было уникальное преимущество — использование медиа запросов через тэг <picture>. На данный момент медиа запросы для тэга <video> поддерживаются во всех браузерах.

Используя несколько элементов <source>, можно указать разные видеофайлы в зависимости от размера экрана, ориентации, светлого/тёмного режима или любого другого медиа-запроса.

<video autoplay loop muted playsinline>
    <source media="(orientation: landscape)" src="/fish-desktop.mp4">
    <source media="(orientation: portrait)"  src="/fish-mobile.mp4">
</video>

Измените размер окна браузера и перезагрузите страницу, чтобы увидеть разницу.

Поддержка медиа-запросов для видео была реализована во всех браузерах, затем убрана из Chrome и Firefox, а в 2023 году появилась вновь.

Прозрачность/Альфа

Если видео содержит прозрачность, лучшее решение будет гораздо более сложным.

AV1 не поддерживает прозрачность.
Анимированные AVIF-файлы, содержащие прозрачность, страдают от проблем с производительностью во всех браузерах, а в Safari они практически непригодны для использования.
Safari поддерживает видеокодек HEVC с прозрачностью, а Chrome — нет.
Chrome поддерживает видеокодек VP9 с прозрачностью, а Safari — нет.

Анимированный WebP, похоже, позволяет избежать проблем с производительностью в Safari, поэтому на него стоит обратить внимание.

Зацикленное видео за пределами «gif»

Giphy, поисковик гифов, когда-то оцениваемый в сотни миллионов долларов, обвинил в спаде своего бизнеса молодых людей, считающих гифы несерьёзными:

Они вышли из моды как форма контента: молодые пользователи, в частности, описывают gif как «для бумеров» и «кринж».

Несмотря на то что термин «gif» часто ассоциируется с пиксельной графикой, отсылками к поп-культуре 90-х и ужасающе устаревшим арт-стилем, область применения зацикленного беззвучного видео шире, чем реакция в чате. Я работал над веб-приложением, импортировавшем целую библиотеку JavaScript для анимации загрузочного спиннера. Хотя с помощью SVG, CSS и JavaScript-анимации можно добиться многого, а современные кодеки предлагают все более крошечные размеры файлов, возможно, современные «гифы» недостаточно используются в дизайне пользовательского интерфейса.

Заключение

Хотя AVIF должен стать очевидным выбором, проблемы с производительностью частоты кадров и ошибки браузера в данный момент не позволяют полностью рекомендовать его. AV1, к сожалению, требует дополнительных усилий по экспорту видео в два разных формата, чтобы обеспечить резервный вариант для старых устройств Apple.