WEBP, AVIF и JPEG XL - лучшие форматы изображений для веб-сайтов

Информация о материале: Категория: SEO (search engine optimization) — Поисковая оптимизация

WEBP, AVIF и JPEG XL. Какой из форматов картинок выбрать для сайта. — Лучшие форматы изображений для веб-сайтов WEBP, AVIF и JPEG XL

Предыстория форматов изображений.

Одной из отрицательных черт последних 25 лет была медленная поддержка новых форматов изображений производителями браузеров. По сути, из-за отсутствия поддержки со стороны производителей такие превосходные методы кодирования, как JPEG2000, остались практически невостребованными.

Серьезно, если вы посмотрите на поддержку JPEG2000:

Это только Safari и "иди туда, куда Макар телят не гонял". Смешно, но в те времена можно было добиться его работы в IE на Windows, если установить Apple Quicktime и показать его в теге OBJECT.

Во многом это связано с тем, что такие группы, как Motion Picture Encoding Group (MPEG) и Joint Photography Encoding Group (JPEG), никогда не пользовались большим доверием со стороны сообщества разработчиков открытого кода. Стандарты, опубликованные этими организациями, могут быть безвозмездными, но в сознании многих (правда это или нет) они по-прежнему считаются слишком "проприетарными". Единственная причина, по которой ванильный стандарт JPEG 1992 года имеет такую широкую поддержку, заключается в том, что он был первым реальным способом кодирования изображений в реальном цвете, который привлек внимание, несмотря на его многочисленные недостатки. То же самое можно сказать и об абсолютно проприетарном формате GIF (авторские права принадлежат compuserve).

Во многих отношениях PNG был первым настоящим "открытым" форматом, получившим распространение, и остается лучшим выбором для кодирования без потерь и/или поддержки альфа-прозрачности.

За последние несколько лет ситуация сильно изменилась.

Внедрение WEBP, меняющего правила игры.

Формат изображения WEBP был "создан" компанией Google, а на самом деле это просто ключевой кадр видео в отдельном контейнере, обычно с использованием кодека VP8. Это полностью открытая спецификация, получившая широкую поддержку.

А WEBP - это формат, который изменил все, когда дело дошло до поддержки форматов. Посмотрите на таблицу поддержки "CanIUse".

Единственным исключением является Apple, и даже они, после десятилетия топанья ногами, говоря "глаза на лоб лезут", потому что они намучились с JPEG - группой, а не с форматом изображения - наконец признали свое поражение и внедрили его в Safari 14.

Это заставило разработчиков перестать тянуть время, чтобы внедрить что-то новое для нас, потому что WEBP действительно выполняет свои обещания, а лицензирование не наводит "страх" на разработчиков, как некоторые другие форматы изображений, которые можно было бы упомянуть.

WEBP поддерживает формат с потерями и без потерь, альфа-прозрачность и даже многокадровую анимацию, поскольку по сути это просто видеофайл. Технологическая разница между WEBP и очень популярным видеоформатом WEBM практически ничтожна. Файлы меньше, быстрее декодируются на современном оборудовании и просто дают гораздо больше возможностей.

WEBP - это здорово, так что же это за штука AVIF?

AVIF заимствует базовую концепцию у WEBP, поскольку использует логику ключевых кадров видеокодека для кодирования. В данном случае это достаточно новый формат AV1. (не путать с Windows .AVI). AV1 в значительной степени основан на VP10, что ставит его в один ряд с WEBP, но со многими оптимизациями, которые делают его еще более мощным.

Поддержка браузеров AV1 на данный момент по этой ссылке.

Поддерживается практически только Chrome, хотя FF позволяет включить его в конфигурации браузера.

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

Так что же делать с JPEG XL?

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

Поддержка JPEG XL произойдет, причем раньше/быстрее, чем можно было бы ожидать, учитывая скорость, с которой видеоформаты принимались до 2010 года. Ожидается, что из опции разработчика, скрытой в конфигурационных файлах, он превратится в официально поддерживаемый формат до конца 2022 года.

Однако на данный момент отсутствие поддержки браузерами и ОЧЕНЬ сырое состояние спецификации означает, что лучше воздержаться от попыток его внедрения. Все проводимые тесты показывают примерно в четыре раза больший размер, чем AVIF, несмотря на заявления о том, что он соответствует ему. Возможно, виноваты инструменты, доступные для конвертирования, а может быть, дело в том, что это просто слишком ранняя версия формата.

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

Что делать с браузерами, которые не поддерживают новые форматы картинок?

Именно здесь на помощь приходят новые теги из HTML 5 и новые свойства в CSS. Тег PICTURE можно использовать не только для выбора изображений на основе их размера / PPI, но и на основе формата файла изображения!

<picture>
  <source srcset="/testImage.avif" type="image/avif">
  <source srcset="/testImage.webp" type="image/webp">
  <img src="/testImage.png" alt="describe this image">
</picture>

Тег PICTURE будет загружать тот формат файла, который поддерживается, в порядке убывания, игнорируя остальные. Конечно, хранить изображение в четырех разных форматах не очень удобно, но это означает, что пользователи, работающие в поддерживающих нужные форматы изображений браузерах, смогут получить файлы меньшего размера с лучшим качеством и с более быстрым декодированием.

Что касается фоновых изображений, у нас также есть новый оператор - image-set - для обеспечения такой же "изящной деградации" поддерживаемых форматов!

body {
  background-image:url('testImage.png');
  background-image:image-set(
    "testImage.avif" type("image/avif"),
    "testImage.webp" type("image/webp")
  );
}

И снова, пройдя весь путь через стек поддержки до .png (при необходимости можно заменить .png на .jpg или даже .gif).

Самое приятное, что старые браузеры, не знающие image-set или <picture>, будут использовать обычное выражение.

На сколько сравнимы форматы изображений?

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

Исходное изображение размером 2667x4000, которое пришлось сгладить по краям на 3px, чтобы уменьшить видимые артефакты JPEG, изменить размер до более практичного 1440x2160, а затем увеличить резкость.

Исходный PNG без потерь: 6,664k
TinyPNG.COM : 645k
5% JPEG с потерями: 2,000k
15% JPEG с потерями: 1,174k
5% Lossy WEBP : 1,127k
CloudConvert WEBP : 817k
AVIF "по умолчанию" : 1,254k
JXL "по умолчанию" : 4,561k

Конвертеры "по умолчанию" - это конвертеры, используемые в различных онлайн-конвертерах, причем указанный размер является средним значением, по крайней мере, для трех разных конвертеров.

Из этого можно сделать вывод, что пока JXL не стоит даже пытаться внедрять, но это потому, что конвертеры и кодировщики все еще находятся в очень примитивном состоянии. На практике предполагается, что в конечном итоге он будет соответствовать или превосходить AVIF. Время покажет, так ли это на самом деле, но пока лучше НЕ пытаться внедрять JXL. Подождите и посмотрите. Дайте ему время созреть как технологии. Возможно, это будет еще одна неудачная попытка JPEG, подобная JPEG 2000, а возможно, это будет величайший формат в истории. Мы еще не знаем, и инструментов, чтобы дать ему справедливую оценку, просто не существует на момент 30 июня 2021 года.

WEBP, оптимизированный для работы в Интернете, примерно равен по качеству изображения JPEG с потерями 15%. Это очень сильно, но стоит заметить, что если вы сжимаете лайн-арт с большими областями сплошного цвета, то "высокий" WEBP с потерями может быть неотличим для всех, кроме самых больших придирок, от PNG без потерь. Только на изображениях появляется окаймление и артефакты. Чем равномернее окраска изображения, тем лучше выглядит WEBP.

Это также показывает, что все еще очень трудно победить tinypng.com, но нужно помнить, что они обычно изменяют участки изображения и используют ограниченную 256-цветную палитру, чтобы попытаться выжать из этого формата все до последней капли. Это МОЖЕТ привести к неприемлемому уровню ухудшения качества изображения.

Если вас действительно волнует разница в качестве, рекомендую вам ознакомиться с отличной статьей Йоханнеса Слиполы на эту тему.

Выводы по тому, какой формат картинок выбрать для сайта.

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

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

Перевод с английского:
medium.com

Заберите ссылку на статью к себе, чтобы потом легко её найти!
Раз уж досюда дочитали, то может может есть желание рассказать об этом месте своим друзьям, знакомым и просто мимо проходящим?
Не надо себя сдерживать! ;)