К вашему вниманию AVIF - современный формат суперсжатых изображений, который считается одним из самых легких и оптимизированных. По данным Netflix, он превосходит JPEG, PNG и даже новый формат WebP по качеству изображения и размеру сжатого файла.
Стоит ли внедрять эту новую технологию на своих сайтах или это просто проходящая тенденция? Давайте погрузимся и узнаем.
Что такое AVIF
Зимой 2019 года AVIF (AV1 Still Image File Format) ворвался вместе с видеокодеком с открытым исходным кодом AOMedia Video 1 (AV1), предназначенным для потоковой передачи онлайн-видео. AVIF использует сжатие на основе библиотеки кодека AV1 для хранения данных файла в формате HEIF и сжатия последовательностей изображений с помощью AV1.
AVIF поддерживает:
- Высокий динамический диапазон (HDR)
- Формат без потерь (хотя сжатие с потерями работает лучше)
- Различные цветовые пространства
- Зернистость
- Chroma subsampling (технология кодирования изображений, при которой изменения цветового оттенка менее важны, чем изменения яркости).
Netflix была одной из первых компаний, принявших AVIF, за ней последовали гиганты браузеров Chrome и Firefox, а также технологические титаны VLC и Microsoft.
История появления AVIF
В 2015 году Альянс за открытые медиа в сотрудничестве с Google, Cisco и Xiph.org разработал AV1. Их целью было создание формата изображений с открытым исходным кодом, который не требовал бы лицензионных отчислений. Другие форматы, такие как JPEG XR, страдают от низкой степени сжатия и требуют дорогостоящего лицензирования. Для создания AV1 разработчики объединили возможности своих собственных видеокодеков (VPX, Thor и Daala), чтобы создать открытую и бесплатную альтернативу всем коммерческим кодекам (да, даже за кодеки приходится платить).
Технические характеристики AVIF
- Расширение - .avif.
- Категория — растровые изображения (raster image).
- Связанные программы - Microsoft Paint, Paint.net, VLC, Windows File Explorer.
- Браузеры, которые поддерживают формат — Google Chrome, Mozilla Firefox.
Преимущества AV1
AVIF предлагает значительное уменьшение размера изображения. Экономия достигает ~50% с JPEG и ~20% с WebP.
В среднем AVIF сжимает бОльшую часть изображений лучше, но иногда может проиграть JPG.
Используя этот инновационный формат изображений, вы сможете добиться молниеносной скорости загрузки сайта, что не только повысит рейтинг вашего сайта в поисковой выдаче, но и увеличит конверсию и вовлеченность пользователей.
Кроме того, благодаря AVIF вы можете значительно сократить потребление пользователем интернет-трафика и расход заряда батареи его устройства, что в целом улучшает качество просмотра. Кроме того, AVIF может помочь снизить нагрузку на ваш сервер и уменьшить расходы на исходящий трафик. Таким образом, AVIF обеспечивает целый ряд преимуществ, которые помогут оптимизировать работу вашего сайта, от ускорения времени загрузки до более эффективного использования ресурсов.
Как внедрить AVIF на ваш сайт?
Повысьте качество изображения на своем сайте с помощью реализации AVIF прогрессивным методом! Следуя этому подходу, вы можете гарантировать, что формат AVIF будет отображаться в браузерах, которые его поддерживают, а WebP будет использоваться в тех, которые его не поддерживают. А в редких случаях, когда оба формата не поддерживаются, высококачественный JPG будет автоматически отображаться в качестве запасного варианта. Достижение такого уровня оптимизации изображений упрощается благодаря автоматической пакетной обработке на сервере. Так зачем соглашаться на меньшее, если можно обеспечить наилучший возможный пользовательский опыт?
Пример внедрения в HTML с помощью тега picture:
Такой код гарантирует, что браузер Такой код гарантирует, что браузер будет загружать первый формат, который поддерживает. Если тег picture не поддерживается, то по умолчанию указан img.
Можно воспользоваться конвертером изображений
Есть нет возможности со стороны сервера имплементировать сборку, а на сайте еще мало контента, можно пользоваться конвертером. Например, Squoosh от Google.
Одной интересной особенностью сервиса (кроме того, что он бесплатный) является наблюдение за процессом изменения картинки.
AV1 для SEO
С помощью Avif размер файла вашего сайта значительно уменьшается, что приводит к ускорению загрузки страниц. Это, в свою очередь, положительно сказывается на показателях вашего сайта в результатах поиска. Мало того, более быстрая скорость загрузки также улучшает поведенческие факторы и повышает лояльность пользователей за счет экономии пропускной способности и времени автономной работы.
Внедрение Avif в ваш сайт - это разумный шаг, который, несомненно, улучшит SEO и пользовательский опыт.
Минусы Avif
Вот несколько наиболее заметных:
Во-первых, Avif (как и WEBP) не поддерживает прогрессивное сжатие изображений. При прогрессивном сжатии данные сохраняются в выходном потоке в виде серии сканов. Каждое сканирование добавляет больше деталей к изображению, в результате чего конечный продукт получается более четким и детализированным.
Во-вторых, большие файлы Avif могут медленно загружаться на мобильных устройствах, что может негативно сказаться на пользовательском опыте.
В-третьих, Avif не так хорошо работает в режиме "без потерь", как в режиме "с потерями".
Наконец, Avif не подходит для анимированных изображений, что делает его менее универсальным, чем некоторые другие форматы изображений.
Хотя Avif имеет свои ограничения, это все еще мощный инструмент, который при правильном использовании может значительно улучшить производительность вашего сайта и удобство работы пользователей.
AVIF против JPG
Как вы уже поняли из статьи, AVIF сжимает изображения лучше, чем JPG. Зато JPG является прогрессивным.
Из этого следует важное правило: для больших файлов используйте JPG, для маленьких — AVIF.
Зато AVIF и видеокодек, на котором он основан, входят в список аппаратно ускоряемых форматов. Такие форматы использует Nvidia, так что в будущем ускорение появится и на мобильных устройствах.
Итог
В мире форматов сжатия изображений бесспорным чемпионом является AVIF. Netflix по праву называет его лучшим среди конкурентов, включая JPG, PNG и WebP. Если вы выберете разрешение .avif, вы можете рассчитывать на файлы вдвое меньшего размера, чем JPG, и на 30% меньше, чем WebP. При этом важно соблюдать осторожность при работе с большими файлами и помнить, что не все браузеры в настоящее время поддерживают этот формат. Но если вы хотите оптимизировать работу вашего сайта и повысить удобство пользования, AVIF - это то, что вам нужно.
