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

Меня зовут Алексей, я работаю верстальщиком в компании FunBox. Мы разрабатываем продукты для мобильных операторов: геосервисы, мобильную рекламу, платежи, интерактивные сервисы и разное другое. Вы пользуетесь нашими продуктами каждый день или нет — тут у меня NDA.

В FunBox хороший продукт — это результат развитой инженерной культуры, и наш корпоративный сайт это подтверждает. Для нас это история о сапожнике в сапогах, ведь разрабатывать для веба, но не сделать нормальный сайт для себя как минимум не круто. Дальше расскажу, как делать хорошо.

Зачем использовать актуальные форматы изображений

Основное преимущество современных форматов изображений — это уменьшение объёма передаваемого по сети трафика, когда пользователь взаимодействует с сайтом или веб-приложением. Как следствие, страницы открываются быстрее, что положительно влияет как на впечатление пользователя, так и на позиции в поиске: сайты, которые быстро загружаются, получают более высокие позиции в выдаче Яндекса и Google. При этом качество графических материалов остаётся по-прежнему высоким при минимальных трудозатратах на внедрение. В то же время не рекомендуем использовать только самые модные форматы, так как в отдельных случаях это не принесёт большой пользы.

Краткое сравнение основных форматов изображений для веба

Все форматы изображений, которые используются в вебе, можно разделить на две большие группы: векторные и растровые. Из векторных форматов сейчас используется только SVG. Он отлично подходит для изображений с простыми геометрическими формами, например, пиктограмм или логотипов, и они одинаково хорошо выглядят как на обычных экранах, так и на устройствах с HiDPI-дисплеями, что делает SVG идеальным для адаптивной вёрстки под различные устройства. Но он не годится для изображений с большим количеством деталей, например фотографий, из-за размера файла, плюс браузеру потребуются немалые вычислительные ресурсы CPU для отрисовки.

Для фотографий на сайте лучше всего подходят растровые форматы. Самые известные и проверенные временем — JPEG и PNG. Есть ещё GIF для анимированных изображений, но он теряет актуальность, и всё чаще его рекомендуют заменить на HTML5-видео. С развитием веб-технологий JPEG и PNG всё чаще стали использоваться как фолбеки для браузеров, которые не поддерживают современные форматы растровых изображений, такие как WebP и AVIF. Сейчас в вебе JPEG отходит на второй план и уступает своё место новым форматам, так как они во многих аспектах его превосходят.

В 2010 году Google выпустили формат WebP как альтернативу PNG и JPEG. Он использует алгоритм сжатия ключевых кадров из видеокодека VP8, поэтому искажение исходного изображения выглядит иначе относительно других форматов. Сжатие состоит из двух этапов: на первом этапе предсказывается содержимое блоков по уже декодированным, на втором — кодируется ошибка предсказания (Википедия). WebP оставляет чёткие края фотографии, но сжатие с потерями ухудшает детализацию и текстуру. Также надо учитывать, что его настройки сжатия не соответствуют таковым для JPEG, другими словами, качество 50% для WebP и JPEG будет отличаться. В случае с WebP качество снижается достаточно сильно, поэтому рекомендуется начинать с наибольших значений и постепенно их уменьшать (Хабр).

WebP объединяет все достоинства форматов JPEG, PNG и GIF: сжатие с потерями и без потерь, поддержку прозрачности и анимации. Это позволяет использовать его для разных изображений, что упрощает подготовку и обработку графики на сайте. Кроме того, WebP обладает рядом преимуществ:

• сжатие изображения без потерь на 26% лучше, чем у PNG;

• сжатие изображения с потерями лучше JPEG на 25-34% при одинаковом индексе структурного сходства (SSIM);

• поддержка прозрачности без потерь при увеличении размера всего на 22%.

С недавних пор появилась возможность использовать для изображений в вебе ещё один формат — AVIF. Это свободный формат сжатия с потерями качества, основанный на библиотеке для сжатия кадров AV1 (Википедия). Первая версия спецификации была выпущена в начале 2019 года, а первым браузером, который поддерживает изображения в формате AVIF, стал Google Chrome 85, релиз которого состоялся в конце августа 2020 года. Из основных возможностей этого формата отмечают следующие:

• значительное уменьшение размера файла при сохранении визуального качества изображения;

• поддержка анимированных изображений;

• поддержка прозрачности.

К недостаткам AVIF относят отсутствие поддержки прогрессивного рендеринга: пока изображение не скачается полностью, на его месте ничего не будет отображаться, тогда как JPEG и WebP могут показывать частично загруженное изображение (видео с наглядной демонстрацией).

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

Выбор формата для изображений на сайте

Помимо преимуществ того или иного формата изображений, важно учитывать, поддерживают ли его браузеры. WebP поддерживается практически везде — его доля составляет более 95%:

AVIF в вебе поддерживают почти 70% браузеров:

Есть основания полагать, что все актуальные браузеры начнут полноценно поддерживать AVIF быстрее, чем это получилось с форматом WebP (формат анонсировали в 2010 году, но до браузера Safari его поддержка добралась только в конце 2020 года (!) с выходом Safari 14 и macOS 11 Big Sur). WebKit уже внедрил декодирование AVIF, но ещё не включил его по умолчанию.

Подготовка изображений в форматах WebP и AVIF

Рассмотрим инструменты для подготовки изображений в новых форматах. Одну-две иллюстрации можно обработать с помощью привычных инструментов: онлайн-сервисов, например Squoosh или avif.io, или графических редакторов. Ещё Google выпустили плагин WebPShop для Фотошопа, который добавляет возможность открывать и сохранять изображения в формате WebP, предварительно оценив качество в окне просмотра.

AVIF пока не так широко поддерживается: пока только в GIMP и Pixelmator Pro. Есть надежда, что по мере роста его популярности больше фоторедакторов научатся с ним работать.

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

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

Если стоит задача автоматизировать конвертацию изображений только в WebP, можно воспользоваться утилитой Google cwebp. Пример вызова утилиты из документации Google:

cwebp -q 80 image.png -o image.webp

Другим вариантом может быть использование утилит, поддерживающих работу сразу с несколькими форматами изображений. Например, мы в FunBox разработали утилиту optimizt. Она работает с наиболее популярными форматам изображений (PNG, JPEG, GIF, SVG) и конвертирует растровые изображения в WebP и AVIF. Пример вызова утилиты для конвертации всех изображений по переданному пути в WebP:

optimizt --webp path/to/directory

Аналогично для AVIF:

optimizt --avif path/to/directory

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

Как использовать актуальные форматы изображений на сайте

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

<picture>
  <source srcset="/path/to/image.avif" type="image/avif">
  <source srcset="/path/to/image.webp" type="image/webp">
  <source srcset="/path/to/image.jpg">
  <img src="/path/to/fallback-image.jpg" alt="">
</picture>

Если браузер поддерживает AVIF или WebP, он загрузит и отобразит соответствующее изображение. В противном случае он проигнорирует путь до него и попытается загрузить следующее, указанное в source. Подробнее можно почитать в описании на MDN.

Для декоративных (фоновых) изображений, которые подключаются в CSS, потребуется чуть больше действий. Например, можно использовать специальные классы на корневом элементе html. Имена классов могут быть любыми, главное, чтобы было понятно, за что они отвечают. При помощи JS-кода можно проверять, какой формат поддерживает браузер, и присваивать элементу html соответствующий класс.

Вот пример такого кода, который размещается в блоке head разметки страницы:

<script>
    var imageData = {
      avif: 'data:image/avif;base64,AAAAIGZ0eXBhdmlmAAAAAGF2aWZtaWYxbWlhZk1BMUIAAADybWV0YQAAAAAAAAAoaGRscgAAAAAAAAAAcGljdAAAAAAAAAAAAAAAAGxpYmF2aWYAAAAADnBpdG0AAAAAAAEAAAAeaWxvYwAAAABEAAABAAEAAAABAAABGgAAAB0AAAAoaWluZgAAAAAAAQAAABppbmZlAgAAAAABAABhdjAxQ29sb3IAAAAAamlwcnAAAABLaXBjbwAAABRpc3BlAAAAAAAAAAIAAAACAAAAEHBpeGkAAAAAAwgICAAAAAxhdjFDgQ0MAAAAABNjb2xybmNseAACAAIAAYAAAAAXaXBtYQAAAAAAAAABAAEEAQKDBAAAACVtZGF0EgAKCBgANogQEAwgMg8f8D///8WfhwB8+ErK42A=',
      webp: 'data:image/webp;base64,UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA',
    };

		// Функция проверки написана на основе документации Google:
		// https://developers.google.com/speed/webp/faq#in_your_own_javascript

    function checkImageFormatSupport(imageFormat, callback) {
      var img = new Image();
      
      img.src = imageData[imageFormat];
      
      img.onload = function () { var result = (img.width > 0) && (img.height > 0); callback(result); };
      img.onerror = function () { callback(false); };
    }

		// Проверяем поддержку WebP Lossy (сжатие с потерями)
		
    checkImageFormatSupport('webp', function (isWebpLossySupported) {
      if (isWebpLossySupported) {
        document.documentElement.className = document.documentElement.className.replace('no-webplossy', 'webplossy');
      }
    });

		// Проверяем поддержку AVIF
	
    checkImageFormatSupport('avif', function (isAvifSupported) {
      if (isAvifSupported) {
        document.documentElement.className = document.documentElement.className.replace('no-avif', 'avif');
      }
    });
</script>

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

Теперь нам нужно немного доработать стили, добавив в них подключение тех или иных изображений в зависимости от класса на элементе html. Вот как это может выглядеть на примере (синтаксис SCSS):

.block-name {
	background-color: #d3dae0;
	background-size: cover;
	background-repeat: no-repeat;
  
	.no-webplossy &,
	.no-avif & {
		background-image: url('./path/to/image.jpg');
	}
  
	.avif & {
		background-image: url('./path/to/image.avif');
	}
  
	.webplossy & {
		background-image: url('./path/to/image.webp');
	}
}

Из кода видно, что если браузер не поддерживает форматы AVIF и WebP, то изображение загружается в формате JPEG.

С помощью этих нехитрых приёмов мы готовы использовать изображения в формате AVIF и WebP на клиенте (в браузере). Также отмечу, что в настройках сервера нужно добавить кеширующие заголовки для форматов .avif/.webp наряду с остальными форматами изображений, если это не сделано по умолчанию.

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

• в Google Chrome 85+ и Firefox 93+ загрузится AVIF;

• в Safari 14+ на macOS 11+ — WebP;

• во всех остальных браузерах — JPEG или PNG.

Что нам дало использование новых форматов изображений

Мы исследовали, как новые форматы изображений влияют на объём трафика и скорость загрузки, на своём корпоративном сайте. Для оптимизации выбирали страницы, на которых есть иллюстрации, и сравнивали показатели до и после. 

Начали с главной страницы, так как на неё попадают практически все посетители сайта и скорость её загрузки влияет на общее впечатление о компании. Она содержит два достаточно больших изображения: на первом экране и над футером. После перехода на WebP размер передаваемых данных при загрузке сократился почти на 55% для мобильных устройств и десктопа, а значение Largest Contentful Paint (LCP, время отрисовки самого большого видимого объекта) уменьшилось почти на 25%.

Следующая страница с изображениями — О нас. Она содержит много контентных фотографий, но большинство из них имеют небольшой размер в пикселях. Замена на WebP сэкономила 65-70% трафика в зависимости от устройства. Кстати, эта интересная особенность формата WebP — лучшее сжатие для небольших изображений в сравнении с AVIF — упоминается в статье на Хабре. А вот значение LCP практически не изменилось: стало меньше всего на 5%. Кажется, что такого не может быть, но всё логично: LCP определяется по длительности загрузки самого большого элемента на странице, которым в нашем случае является заглавная фотография, а после конвертации в WebP её размер несильно уменьшился. О причинах этого напишу далее.

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

Здесь экономия от перехода на WebP уже не так заметна и составляет 17% по сравнению со старым добрым JPEG. И здесь возникает вопрос: почему же в этом случае трафик уменьшился не так значительно, как на других страницах? Всё дело в исходных изображениях, насколько они насыщены мелкими деталями. Для хорошо детализированных изображений, например фотографий на схемах проезда к офисам, пришлось практически вручную подбирать степень сжатия. Нередко она была выше принятых по умолчанию 75%, чтобы изображение после конвертации в WebP сохранило приемлемое качество по сравнению с оригиналом. Из этого можно сделать вывод, что использование WebP для реальных фотографий, насыщенных большим количеством мелких деталей, не всегда приводит к существенной экономии трафика. В отдельных случаях после конвертации изображение может весить даже больше, чем иллюстрация такого же визуального качества в формате JPEG.

Если коротко, внедрение WebP помогло нам сократить размер изображений на сайте:

• на главной странице иллюстрации стали весить в 2 раза меньше;

• на странице «О нас» удалось достичь почти трёхкратного сокращения общего размера изображений;

• в разделе «Контакты» цифры оказались скромнее: всего –17%.

В начале 2021 года мы провели другой эксперимент: решили перевести все изображения в AVIF. Были опасения, что из-за отсутствия поддержки в nginx может ничего не получиться, к тому же AVIF слишком новый формат и при его использовании ещё встречаются некоторые проблемы. Одна из них проявилась спустя несколько месяцев после добавления на сайт AVIF-изображений. Мы заметили, что в одной из dev-версий браузера Firefox перестала отображаться часть иллюстраций. Выяснилось, что эти AVIF-изображения не соответствуют спецификации и содержат технические ошибки (подробное описание можно прочитать на баг-трекерах Chromium и Mozilla). Ошибка закралась в известную библиотеку sharp, которая используется под капотом нашего optimizt. Спустя 4 месяца автор sharp выпустил исправленную версию библиотеки, после чего мы заново переконвертировали изображения.

Тем не менее, результаты внедрения AVIF оказались неоднозначными. Так, на главной странице Retina-изображения показали гораздо лучшую компрессию с сохранением визуального качества (размер файлов уменьшился почти в 2 раза по сравнению с WebP), чем обычные. Надо учитывать, что используемые на странице иллюстрации созданы в графическом редакторе, это не реальные фотографии, а такие изображения, как правило, лучше сжимаются, потому что обычно на них гораздо меньше мелких деталей. А вот на странице «О нас» и на схемах проезда конвертация изображений в AVIF сэкономила всего 5-15% на общем размере файлов по сравнению с WebP. Можно сказать, что в этом случае нет большой разницы между WebP и AVIF. Поэтому если у вас на сайте уже есть WebP-изображения, то вам необязательно их переводить в AVIF — по итогу может оказаться, что результат не оправдает приложенных усилий. Другое дело, если вы ещё не внедрили WebP, в этом случае переход сразу на AVIF может кардинально ускорить загрузку страниц.

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

Что дальше?

Добавление поддержки WebP и AVIF на нашем сайте сэкономило нам до 50-60% трафика на отдельных страницах. При этом сами форматы привычны и их можно де-факто считать стандартом для изображений в вебе. Да, есть свои минусы (привет, Safari), но в конечном итоге их можно и нужно использовать на сайтах и в веб-приложениях. Посмотрим, что будет дальше. Уже завели таймер на следующий заход, когда появится новый формат изображений для веба, способный потеснить AVIF.