Почему формат изображения Avif имеет значение (и что такое планы Imagify)

Вы уже пробовали Avif — новейший мощный формат изображений? Мы в Imagify начали получать вопросы о том, почему наш плагин его не поддерживает (спойлер: пока ).

В этой статье вы узнаете, почему Avif может изменить правила игры в области оптимизации изображений и какое место он занимает по сравнению с самыми популярными форматами, такими как JPG и WebP. И, конечно же, вы узнаете больше о планах Imagify по поддержке Avif.

Что такое формат изображения Avif?

Avif — это формат изображения, основанный на видеокодеке AV1 — он сжимает изображения с помощью AV1 в формате файла HEIF (High-Efficiency Image File). Проще говоря, это означает, что изображения максимально сжимаются — они меньше по размеру, чем когда-либо, сохраняя при этом то же качество . Такое мощное сжатие сочетается с другими важными функциями, такими как поддержка HDR (расширенный динамический диапазон) и 12-битное цветовое разрешение.

И это еще не все.

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

Avif был разработан многими технологическими гигантами, такими как Google, Amazon, Cisco, Netflix и многими другими. Причина проста. Эти компании чрезвычайно заинтересованы в разработке и распространении высококачественного формата изображения, который не требует слишком большой пропускной способности — именно так все больше и больше людей могут потреблять контент на своих устройствах.

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

Какие браузеры поддерживают Avif

Долгое время только небольшая часть браузеров поддерживала Avif. Другими словами, большинство пользователей не смогут просматривать фотографии в формате Avif. По состоянию на октябрь 2021 года все по-другому. Теперь Avif поддерживается Firefox, Chrome и Opera. В целом, 67% пользователей могут извлечь выгоду из этого формата.

Вот почему пришло время серьезно задуматься об Avif для оптимизации производительности изображений.

Сравнение производительности: Avif и WebP (и другие форматы)

Мы упоминали, что формат Avif обеспечивает лучшее сжатие на рынке и сохраняет высокое качество изображений. Давайте проведем сравнение производительности изображений и посмотрим, как Avif выглядит по сравнению с такими форматами, как JPEG и WebP.

Мы будем использовать Squoosh, веб-приложение, которое легко сравнивает разные форматы.

Давайте возьмем за отправную точку один из самых тяжелых форматов изображений и посмотрим, как работают другие форматы. Мы выбрали изображение PNG с исходным размером 15,6 МБ и измерили разницу между исходным размером и преобразованием в формат JPG.

Преобразование из PNG в JPG показывает сокращение на 92% . Размер изображения теперь составляет 1,20 МБ. Поскольку JPG — не самый легкий формат, и мы это знаем, мы не могли ожидать большего.

А как насчет WebP? Мы снова провели сравнение. На этот раз изображение PNG было сжато на 95% . Размер изображения теперь составляет 704 КБ. Учитывая начальный размер (15,6 МБ), это отличный результат — и сложно увидеть какое-либо падение качества изображения. В конце концов, WebP — это формат изображений, который вы должны использовать в WordPress.

Затем мы снова провели сравнение и обнаружили, что формат Avif оправдывает ожидания по производительности.

Размер изображения был уменьшен на 98% . Это всего 261 КБ — и по-прежнему трудно заметить разницу в качестве изображения.

Вот полный обзор проведенных нами сравнений. Он показывает, как Avif может уменьшить размер ваших изображений.

И теперь вам может быть интересно: почему Imagify не поддерживает Avif? Это подводит нас к следующему разделу.

Почему Imagify не поддерживает Avif (пока)

Жан-Батист Маршан-Арвье, соучредитель и генеральный директор WP Media, объясняет: «Avif был выпущен как экспериментальный формат, и его поддерживал очень небольшой процент браузеров. Более того, Avif столкнулся с некоторыми проблемами из-за времени кодирования. Поначалу кодирование одного изображения занимало несколько секунд, что очень медленно. Для сравнения, сжатие изображений в Imagify обычно занимает менее 100 мс. С тех пор было проделано много работы по улучшению показателей».

Как вы можете видеть на скриншоте ниже, время кодирования становится все лучше и лучше:

Жан-Батист продолжает: «Помимо улучшения времени кодирования, теперь все больше браузеров поддерживают Avif. И этот формат чрезвычайно интересен по двум причинам: он поддерживает альфа-канал (прозрачность), поэтому его можно использовать в качестве замены PNG, и поддерживает анимацию, которую можно использовать в качестве замены GIF.

Вот почему Imagify обязательно поддержит Avif в ближайшем будущем».

И добавляет: «Мы, вероятно, заменим WebP на Avif. В противном случае это может быть слишком сложным или запутанным для наших пользователей».

Если вам интересно, что это значит, вот некоторый контекст.

WebP был выпущен в 2010 году, более 10 лет назад. Тем не менее, он по-прежнему не полностью совместим с браузерами и операционными системами. Единственная частичная совместимость влечет за собой две вещи. Как владелец веб-сайта, вам по-прежнему необходимо работать с двумя разными форматами: «классическим», таким как JPG или PNG, и более производительным, таким как WebP или Avif. С другой стороны, плагины для оптимизации изображений, такие как Imagify, должны хранить на своих серверах оба формата.

«С точки зрения пользователя, — говорит Жан-Батист, — это означает, что новый формат, такой как Avif, не поможет в конце концов заменить JPG или PNG — они останутся. Однако преобразование этих форматов в Avif поможет улучшить производительность изображения, и поэтому Avif в какой-то момент заменит WebP. Пользователям не понадобятся оба формата. И мы хотим, чтобы плагин был максимально простым ».

WebP по-прежнему отличный способ оптимизировать ваши изображения

Таким образом, вы уже не можете конвертировать свои изображения в Avif с помощью Imagify, но вы всегда можете преобразовать свои изображения в WebP и повысить производительность своих изображений прямо сейчас.

Более 90% пользователей по всему миру смогут увидеть ваши изображения, преобразованные в формат WebP, так что это по-прежнему отличный способ сделать ваши фотографии светлее и оптимизировать производительность вашего сайта.

При проведении аудита PageSpeed ​​Insights вы могли столкнуться с рекомендацией по производительности при показе изображений в форматах нового поколения. Что ж, WebP — это формат следующего поколения, который Google рекомендует наряду с Avif. Это все, что вам нужно, чтобы ваши изображения загружались быстрее.

Мы провели тест и создали три страницы. Каждая страница содержит изображение только в определенном формате: PNG, JPG или WebP.

При выполнении аудита PageSpeed ​​Insights для страницы, содержащей изображение PNG, мы получили красный флаг о рекомендации формата следующего поколения. Вы можете видеть, насколько огромна предполагаемая экономия: 1076,7 КБ .

То же самое происходит при тестировании страницы с изображением JPG. Производительность немного улучшилась, и мы получили оранжевый флаг. Тем не менее, есть возможности для улучшения — возможная экономия 16,8 КБ .

Неудивительно, что рекомендация прошла аудит, когда мы преобразовали изображение в WebP с помощью Imagify и создали специальную страницу:

Такой же результат мы получили при тестировании страницы с изображением Avif:

Итак, WebP и Avif дают одинаковый отличный результат . Более того, оценка PageSpeed ​​Insights почти такая же:

Оценка производительности — страница WebP	Оценка производительности — страница Avif

Мы также проверили разницу в размере изображения и байтах между страницами WebP и Avif. И мы тоже не заметили огромной разницы:

Как видите, WebP и Avif очень похожи в обеспечении выдающейся производительности изображения.

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

Более того, с Imagify преобразование ваших изображений в формат WebP стало проще и быстрее, чем когда-либо, благодаря новому более быстрому сжатию, которое позволяет вам конвертировать ваши изображения в кратчайшие сроки.

Вот что вы должны сделать:

1. Скачать Имаджифай бесплатно
   
2. Перейдите в «Настройки» > «Оптимизация» > «Формат WebP» и установите оба флажка:

3. Преобразуйте свои изображения (и воспользуйтесь преимуществами массовой оптимизации):

Вот и все. Это так просто — но эффективно!

И вы можете выбрать план, который подходит вам лучше всего.

Вы можете оптимизировать 20 МБ изображений в месяц бесплатно или выбрать план роста (500 МБ за 4,99 доллара в месяц) или бесконечный план (неограниченное количество изображений за 9,99 доллара в месяц). Неважно, какой план вы выберете: вы можете установить Imagify на неограниченное количество сайтов.

Начните оптимизировать свои изображения с помощью Imagify и сообщите нам, как улучшилась ваша производительность в комментариях.