Как форматировать качественные изображения с помощью AVIF, Squoosh и go-avif
После выпуска в 2018 году он быстро зарекомендовал себя как лучший видеокодек. Такие компании, как Facebook и Netflix, протестировали его, чтобы увидеть, как он будет работать в их собственной инфраструктуре потокового видео, и были впечатлены результатами.
Разработчики кодека AV1 также решили создать формат файла изображения, в котором использовались бы те же алгоритмы сжатия для создания высококачественных изображений с меньшими размерами файлов, что в конечном итоге привело к разработке формата AVIF, который был официально утвержден в феврале 2019 года.
В этой статье показано, как использовать этот формат изображения для сжатия изображений с сохранением визуальной точности, что в конечном итоге обеспечивает лучший опыт для ваших пользователей.
Сравнение AVIF с JPEG и WebP
Формат AVIF обеспечивает заметное уменьшение размера файла по сравнению с форматами JPEG и WebP. Вот сравнение каждого формата примерно с одинаковым визуальным качеством:
Слева направо: JPEG, WebP и AVIF. Вы видите разницу?
Изображения выше были созданы с помощью Squoosh с использованием настроек по умолчанию для каждого формата. Вот ссылка на эталонное изображение, если вы хотите попробовать сами.
Как создавать изображения AVIF
Squoosh прост и удобен в использовании. Вы можете выбрать изображение из своей файловой системы или использовать один из образцов изображений, предоставленных редактором.
После загрузки изображения вы можете выбрать один из нескольких методов сжатия, включая MozJPEG, AVIF, WebP и OptiPNG. Вы можете сделать это как с правой, так и с левой стороны редактора, чтобы вы могли сравнить один метод сжатия с другим или с исходным изображением. Вы также можете настроить уровень сжатия, а также погрузиться в более сложные настройки.
Когда вы вносите изменения в настройки, вы увидите ожидаемый размер файла результата по сравнению с настройками на другой стороне редактора, а в середине есть кнопка-ползунок, которую вы можете перетащить в любом направлении, чтобы вы могли легко сравнить два результата.
Настройки формата AVIF понятны. Вы можете настроить минимальное и максимальное качество изображения (от 0 до 62) и выбрать уровень усилий (чем выше значение, тем больше времени потребуется для получения результата). Если вы измените эти настройки, вы увидите впечатляющие результаты при приемлемом уровне качества.
Преобразование пакета изображений
Создадим скрипт, чтобы мы могли легко обрабатывать сразу несколько изображений. Создайте новый файл avif.sh и введите в него следующий код:
Переместите скрипт в папку, содержащую ваши изображения, отметьте его как исполняемый и выполните:
Это обработает каждое изображение и поместит выходной файл AVIF в ту же папку. Вы также увидите сравнение размеров файлов после каждого преобразования. Как видно на изображении ниже, вы можете получить невероятную экономию даже без изменения каких-либо настроек.
Как использовать AVIF в Интернете
Давайте решим проблему поддержки браузеров. На данный момент поддержка AVIF очень ограничена. Он поддерживается только в настольном Chrome (версия 85 и более поздние), хотя ожидается, что в ближайшее время появится официальная поддержка Firefox (вы можете включить экспериментальную поддержку в Firefox 77 или более поздней версии с помощью флага image.avif.enabled внутри about:config ). Что касается Safari, то давайте просто не будем тратить 10 лет на добавление такой поддержки, как WebP.
В любом случае вам не нужно ждать, пока все браузеры поддержат его, прежде чем использовать AVIF на своих веб-сайтах и в приложениях. Вы можете использовать элемент picture для обеспечения отката к JPEG или WebP, когда AVIF не поддерживается:
Ограничения AVIF
В дополнение к очевидному ограничению поддержки форматом AVIF браузером (который со временем обязательно улучшится), вот два основных недостатка принятия AVIF для использования в Интернете.
Нет поддержки прогрессивного рендеринга
Стандартные изображения JPEG и WebP загружаются построчно сверху вниз до полной загрузки изображения. Формат JPEG также поддерживает метод прогрессивного кодирования, при котором сначала загружается размытая версия полного изображения, которая постепенно становится более резкой по мере поступления остальных байтов.
Преимущество прогрессивного рендеринга заключается в том, что вы можете видеть все изображение, даже если была загружена только часть файла. Это также делает загрузку изображения более быстрой, чем рендеринг сверху вниз, потому что все изображение видно с самого начала.
К сожалению, AVIF не поддерживает ни вертикальный, ни прогрессивный рендеринг. Вы либо видите полностью загруженное изображение, либо ничего не видите, как показано в приведенном выше видео (спасибо Джейку Арчибальду за создание демонстрации). Это делает формат потенциально непригодным для больших изображений. Об этом следует подумать, прежде чем размещать AVIF на своих веб-сайтах.
Поддержка программного обеспечения слабая
Вывод
Обзор формата изображений AVIF: преимущества, сравнение с JPG, польза для SEO
Сегодня я хочу познакомить вас с AVIF — современным суперсжатым форматом изображений, который считается одним из самых легких и наиболее оптимизированных. По соотношению качества изображения и размера сжатого файла компания Netflix считает его лучше JPEG, PNG и даже нового WebP.
Что это такое — восходящая технология, которую стоить внедрять на свои сайты, или сиюминутный тренд? Давайте разбираться.
Что такое AVIF
AVIF (AV1 Still Image File Format) стал использоваться зимой 2019 года одновременно с открытым видеокодеком AOMedia Video 1 (AV1), предназначенным для потокового интернет-видео. Собственно, AVIF использует сжатие на основе библиотеки этого кодека. Он хранит данные файлов в формате HEIF и сжимает последовательности изображений с помощью AV1.
Одной из первых компаний, использующих AVIF, стала Netflix. После нее этот формат стали поддерживать браузеры Chrome и Firefox, а также разработки таких компаний, как VLC и Microsoft.
История появления AVIF
AV1 был разработан в 2015 году. Разработчиком считается компания Alliance for Open Media (в сотрудничестве с Google, Cisco и Xiph.org). Целью было создать формат изображений с открытым исходным кодом и отсутствием лицензионных отчислений. Например, есть такой формат, как JPEG XR — он очень слабо сжимается, зато требует дорогостоящего лицензирования. Разработчики объединили возможности собственных видеокодеков (VPX, Thor и Daala) и создали AV1 — открытый и бесплатный (да, за кодеки тоже надо платить) аналог всех коммерческих кодеков.
Технические характеристики AVIF
Расширение
Категория
Растровые изображения (raster image)
Связанные программы
Windows File Explorer
Браузеры, которые поддерживают формат
Google Chrome, Mozilla Firefox
Официальный сайт
Преимущества AV1
AVIF предлагает значительное уменьшение размера изображения. Экономия достигает
Chrome, у которого самая большая доля рынка, поддерживает AVIF по умолчанию.
Теперь давайте расскажу вам, зачем AVIF стоит внедрять на свой сайт:
В принципе, ключевые преимущества AVIF — быстрая загрузка за счет уменьшения размера файла и снижение нагрузки на сервер.
Как внедрить AVIF на ваш сайт?
Внедрять AVIF на сервер желательно прогрессивным методом. Т.е. если браузер поддерживает AVIF, то будет показываться AVIF. Если этот формат не поддерживается, то подключается WebP. Если не поддерживается ни то, ни другое, выводится «стандартный» JPG.
Это делается с помощью имплементации автоматической пакетной обработки на сервере. Как это можно сделать на веб-сервере Nginx, вы можете узнать в инструкции по данной ссылке.
Для такой задачи вам понадобится технический специалист.
Пример внедрения в HTML с помощью тега picture:
Такой код гарантирует, что браузер будет загружать первый формат, который поддерживает. Если тег picture не поддерживается, то по умолчанию указан img.
Можно воспользоваться конвертером изображений
Есть нет возможности со стороны сервера имплементировать сборку, а на сайте еще мало контента, можно пользоваться конвертером. Например, Squoosh от Google.
Если вы уже использовали этот сервис ранее, но у вас не появился выбор AVIF, нужно с помощью ctrl+f5 обновить страницу и сбросить кэш.
Одной интересной особенностью сервиса (кроме того, что он бесплатный) является наблюдение за процессом изменения картинки.
AV1 для SEO
Насколько использование Авиф помогает SEO? Что ж, если вы хоть немного разбираетесь в SEO-продвижении, то поймете, что на этот вопрос я уже ответила 🙂
Все дело в том, что AVIF уменьшает объем файла и ускоряет загрузку страницы, что само по себе влияет на показатели сайта в поиске. Кроме того, высокая скорость загрузки улучшает поведенческие факторы и повышает лояльность пользователей за счет экономии трафика и батареи.
Минусы Avif
Я говорила только положительные вещи об этом формате. Теперь давайте разберемся и с негативными моментами. К ним относятся:
AVIF против JPG
Как вы уже поняли из статьи, AVIF сжимает изображения лучше, чем JPG. Зато JPG является прогрессивным.
Из этого следует важное правило: для больших файлов используйте JPG, для маленьких — AVIF.
Зато AVIF и видеокодек, на котором он основан, входят в список аппаратно ускоряемых форматов. Такие форматы использует Nvidia, так что в будущем ускорение появится и на мобильных устройствах.
Вывод
Три малоизвестных факта об AVIF
AVIF — графический формат, основанный на видеокодеке AV1, представляет собой один из самых современных форматов хранения изображений. Судя по ранним публикациям и исследованиям, AVIF показывает достойные результаты в сравнении с JPEG и WebP. Но, даже учитывая то, что этот формат хорошо поддерживается браузерами, AVIF, в плане кодирования и декодирования изображений, всё ещё представляет собой ультрасовременную технологию, которой свойственны определённые проблемы.
Несомненно то, что использование AVIF позволяет эффективно сжимать изображения, что помогает сокращать объёмы данных, передаваемые от серверов к клиентским системам. AVIF-изображения, при этом, хорошо выглядят. Но, прежде чем принимать решение о полном переходе на AVIF, стоит знать о некоторых особенностях этого формата, которым и посвящён этот материал.
1. Для хранения изображений, имеющих маленькие размеры в пикселях, лучше всего подходит формат WebP
Есть одно интересное наблюдение, в соответствии с которым WebP-кодирование изображений, имеющих маленькие размеры в пикселях, позволяет добиться лучших результатов, чем перевод таких же изображений в формат AVIF.
Вероятно, это вполне поддаётся объяснению, а систему кодирования изображений можно настроить так, чтобы решить эту проблему. Но большинство тех, кто пользуется AVIF, не станет заниматься чем-то подобным. Эти люди, вероятно, просто воспользуются возможностями оптимизаторов изображений, вроде squoosh.app, или функциями CDN, ориентированных на работу с изображениями, вроде ImageEngine. На следующем графике приведено сравнение размеров AVIF-изображений, получаемых средствами двух вышеупомянутых сервисов, с размерами оптимизированных WebP-изображений.
Зависимость эффективности сжатий изображений от их размера в пикселях
Видно, что обычно байтовые размеры WebP-изображений оказываются больше размеров AVIF-изображений. На изображениях, имеющих большие пиксельные размеры, AVIF показывает себя лучше, при этом с большими изображениями ImageEngine работает значительно эффективнее, чем squoosh.app.
А теперь обратим внимание на одну примечательную деталь, видную в начале графиков. На изображениях размером примерно 100×100 пикселей squoosh.app работает лучше ImageEngine, а затем, на изображениях размером примерно 80×80 пикселей, как и на изображениях меньшего размера, первенство оказывается за WebP.
Этот тест показывает сравнительно однородные результаты на изображениях разных типов. В данном случае использовалось это изображение с Picsum.
| Размер (пиксели) | Исходный JPEG-файл (байты) | Оптимизированный WebP-файл (байты) | ImageEngine, AVIF-файл (байты) | squoosh.app, AVIF-файл (байты) |
| 50 | 1,475 | 598 | 888 | 687 |
| 80 | 2,090 | 1,076 | 1,234 | 1,070 |
| 110 | 3,022 | 1,716 | 1,592 | 1,580 |
| 150 | 4,457 | 2,808 | 2,153 | 2,275 |
| 170 | 5,300 | 3,224 | 2,450 | 2,670 |
| 230 | 7,792 | 4,886 | 3,189 | 3,900 |
| 290 | 10,895 | 6,774 | 4,056 | 5,130 |
2. Формат AVIF, возможно, не очень хорошо подходит для хранения высокоэнтропийных изображений товаров
Обычно на веб-страницах, представляющих собой карточки товаров, имеются изображения этих товаров. Если посетитель страницы наводит на такое изображение указатель мыши, или если щёлкает по нему, изображение увеличивается, позволяя посетителю рассмотреть мелкие особенности товара.
Стоит сказать о том, что использование AVIF в определённых ситуациях приводит к снижению количества различимых деталей, или воспринимаемой резкости увеличенных изображений. Особенно это заметно на типичных фотоснимках товаров, где фон размыт, или, другими словами, отличается низкой энтропией, а передний план, то есть — изображение самого товара, содержит больше деталей, и, возможно, имеет более высокую энтропию.
Ниже показан увеличенный фрагмент фотографии товара (вот — её полные JPEG — и AVIF-варианты), на котором чётко видна разница между обычным оптимизированным JPEG-изображением и AVIF-изображением, оптимизированным с помощью squoosh.app.
Сравнение JPEG и AVIF
AVIF-файл гораздо меньше JPEG-файла, но в данном случае компромисс между визуальным качеством изображения и меньшим размером файла зашёл слишком далеко. На разных изображениях этот эффект проявляется неодинаково. Поэтому в системах автоматизированной обработки изображений (например — изображений для веб-проектов, построенных с использованием принципов отзывчивого дизайна) сложно заранее оценить уровень его воздействия на качество изображений и принять соответствующие меры.
Более того, AVIF, в отличие от JPEG, не поддерживает прогрессивный рендеринг изображений. При создании типичной страницы товара прогрессивный рендеринг может стать важнейшим механизмом по улучшению ключевых показателей производительности страниц. Например, это нечто вроде показателя Largest Contentful Paint (LCP, время отображения наибольшего элемента страницы) и других метрик Core Web Vitals. Даже если на загрузку JPEG-версии изображения требуется немного больше времени, что объясняется тем, что JPEG-файл больше AVIF-файла, JPEG-файл, скорее всего, начнёт рендериться раньше, чем AVIF-файл. Понаблюдать за подобным поведением изображений разных форматов можно в этом видео.
3. Формат JPEG 2000 — это сильный конкурент AVIF
Главной сильной стороной AVIF называют чрезвычайно маленький размер файлов при приемлемом визуальном качестве изображений. В ранних публикациях об AVIF и в отчётах об исследованиях этого формата основное внимание уделялось именно этому моменту. Но в некоторых случаях те же задачи, для решения которых применяют AVIF, можно более эффективно решить, прибегнув к формату JPEG 2000 (JP2). JPEG 2000 — это сравнительно старый формат, он не привлекает к себе столько же внимания, сколько AVIF, даже учитывая то, что его уже поддерживает компания Apple.
Для того чтобы на практике разобраться в том, о чём идёт речь, давайте посмотрим на этого очаровательного щенка. Размер файла AVIF-версии изображения, созданный средствами squoosh.app с применением стандартных настроек, имеет размер 27,9 Кб. Преобразование того же изображения в формат JPEG 2000 средствами ImageEngine даёт файл размером 26,7 Кб. Разница небольшая, но достаточная для демонстрации возможностей JPEG 2000.
А как насчёт визуального качества изображений? Для сравнения как-либо обработанных версий изображений с их оригиналами часто используется оценка их структурных различий (DSSIM, Structural Dissimilarity). При расчёте показателя DSSIM исходное изображение сравнивается с его вариантом, преобразованным в другой формат. Чем ниже этот показатель — тем выше качество нового изображения. Инструмент для вычисления показателя DSSIM, ссылка на который дана выше, работает с PNG-файлами. Для проведения сравнения файлы форматов JPEG 2000 и AVIF без потерь преобразовали в формат PNG. Результаты эксперимента обобщены в следующей таблице.
| Формат | DSSIM (0 — неотличим от оригинала) | Размер файла (Кб) |
| JPEG 2000 | 0,019 | 26,7 |
| AVIF | 0,012 | 27,9 |
AVIF отличается немного лучшим показателем DSSIM, но разница в качестве изображений практически незаметна.
Слева направо: исходное JPEG-изображение, AVIF-изображение, JPEG 2000-изображение
Итоги
Главный вывод, который мы можем сделать, заключается в том, что формат AVIF вряд ли стоит считать «решением всех проблем», или тем самым графическим форматом, с появлением которого другие отошли на второй план. Во-первых, сейчас — самое начало разработки средств кодирования и декодирования для этого формата. Кроме того, использование нового формата означает и необходимость решения новых задач. Как справедливо отмечено в этом материале, использование более 3-х версий изображений на веб-странице приводит к определённым сложностям в том случае, если весь процесс подготовки изображений (изменение размеров, сжатие, преобразование, выбор, доставка) не является полностью автоматизированным.
Кроме того, как мы уже видели, то, что браузеры поддерживают формат AVIF, ещё не означает того, что этот формат наилучшим образом подойдёт для пользователей некоего сайта.
Конечно, использование отзывчивых изображений и включение в список графических ресурсов, создаваемых заранее, файлов формата AVIF, лучше, чем полное игнорирование этого формата. Но и тут может возникнуть проблема, которая заключается в том, что браузер может выбрать формат AVIF в том случае, если этот формат поддерживается, не учитывая при этом ничего другого.
В качестве подхода к решению задач подбора оптимальных графических форматов и автоматизированной обработки изображений может выступить использование специализированного CDN-сервиса, ориентированного на работу с изображениями.
Пользуетесь ли вы графическим форматом AVIF?
Обзор нового графического формата AVIF
Постоянно растущие потребности в качественном видео и графическом контенте пользователей интернета стимулируют крупные IT-компании на создание новых расширений файлов и кодеков. Задача разработчиков – создать формат, который бы без существенных потерь качества изображения занимал меньше места на дисковом пространстве, при этом потреблял меньше аппаратных ресурсов при открытии.
AVIF – новое расширение графических файлов, которое претендует на лидерство среди ныне используемых.
Особенности AVIF
Формат AVIF основан на библиотеках сжатия видеокадров AV1, которые имеют статус открытых и распространяются бесплатно. Разработчиком этого стандарта является «Альянс за открытые медиа», в состав которого входят отраслевые гиганты: Google, Apple, Intel, Microsoft, Netflix, Mozilla.
Как показали исследования, AVIF на 50% лучше сжимает изображения с минимальными потерями качества, чем JPEG и на 20% по сравнению с WebP. Но несмотря на внушительные результаты и выпуск в 2018 году, формат только начинает внедряться и по умолчанию поддерживается штатными программными инструментами для работы с графическими файлами в ОС Windows 10 и браузерами Google Chrome и Mozilla Firefox. Поэтому если пользуетесь более ранней операционной системой от Microsoft или дистрибутивом Linux, без стороннего софта открыть AVIF не выйдет.
Если не знаете, чем открыть AVIF, воспользуйтесь возможностями Фотоконвертера. Это программное обеспечение способно не только просматривать содержимое файла, но и осуществлять его конвертирование в любой поддерживаемый формат.
Преимущества использования AVIF
Графический файловый формат AVIF поддерживает:
Внедрение AVIF на сайтах дает следующие преимущества:
Недостатки нового расширения:
AVIF – отличная альтернатива проприетарному JPEG, который выигрывает только возможностью прогрессивного сжатия. Но из-за того, что новый формат еще не распространен и активно внедряется только Netflix, тяжело понять его реальные преимущества. К тому же при работе с AVIF нужно быть осторожным с большими файлами. Формат плохо работает, если изображение сохранялось без сжатия.
В любом случае, если довелось встереться с AVIF и не получилось открыть его – всегда можно воспользоваться Фотоконвертером.
Онлайн конвертация
Некоторые возможности Фотоконвертера можно попробовать онлайн. Выберите файлы или ZIP архивы для конвертации:
Интерфейс командной строки
Профессиональные пользователи могут использовать командную строку для конвертации и редактирования в ручном или автоматическом режиме. За дополнительными консультациями по использованию cmd интерфейса обращайтесь в службу поддержки пользователей.
Как конвертировать AVIF в JPG
Способы преобразования формата AVIF в JPG
Есть несколько способов конвертации AVIF файлов в формат JPG. Самый простой способ – это онлайн конвертация. В процессе, ваши файлы загружаются на сервер, и там обрабатываются. Такой вариант будет удобен, если вам нужно конвертировать всего несколько файлов.
Другой способ – установить Фотоконвертер. Установленная программа работает быстрее и эффективнее онлайн конвертации, так как все файлы обрабатываются на локальном диске. Фотоконвертер – это хороший вариант конвертировать множество файлов AVIF в формат JPG за раз, сохраняя конфиденциальность информации.
Вы довольно быстро оцените, как Фотоконвертер способен сэкономить массу времени, необходимого при обработке файлов вручную или онлайн.
Скачайте и установите Фотоконвертер
Фотоконвертер легко скачать, установить и использовать – не нужно быть специалистом, чтобы разобраться как он работает.Установить Фотоконвертер
Добавьте AVIF файлы
Вы можете выбрать AVIF файлы через меню Файлы → Добавить файлы либо просто перекинуть их в окно Фотоконвертера.
Выберите место, куда сохранить полученные JPG файлы
Во вкладке Сохранить выберите папку для записи готовых JPG файлов.
Во вкладке Редактировать есть возможность добавить эффекты редактирования изображений для использования во время конвертации, но это не обязательно.
Выберите JPG в качестве формата для сохранения
Теперь просто нажмите кнопку Старт, чтобы начать конвертацию. Созданные JPG файлы сохранятся в указанное место с нужными параметрами и эффектами.
Видео инструкция
Интерфейс командной строки
Опытные пользователи могут использовать конвертер AVIF в JPG через командную строку в ручном или автоматическом режиме.
За дополнительной помощью по использованию по использованию командной строки обращайтесь в службу поддержки пользователей.
AVIF В JPG ОНЛАЙН
ФОРМАТ AVIF
AVIF – настоящая находка для вебмастеров, которые постоянно борются за скорость загрузки сайта. Однако расширение поддерживается только браузером Google Chrome, поэтому для корректного открытия в Opera или Firefox его потребуется конвертировать. Для решения этой задачи хорошо подойдет Фотоконвертер.
