WebP или AVIF? Сравнение форматов изображений для сайта на замену PNG и JPG

Каждый пользователь не любит, когда сайт тормозит и если сайт будет медленно загружаться. Кому ж это понравиться? На каждом веб-сайте есть изображения и, чтобы они быстро грузились, необходимо использовать современные форматы. К примеру PNG, JPG появились в 1992–1995 годах.

Технологии развивались и в 2010 году Google выпустила формат изображения Webp, который весит на 26% меньше1, а в 2019 разработали AVIF2 формат. Они имеют поддержку во всех современных браузерах3.

Сейчас лучше использовать изображения для сайта в WebP и AVIF, так как они меньше весят и имеют лучшее сжатие.

Наглядное сравнение изображений в форматах AVIF, WebP, PNG, JPG (JPEG)

У нас есть замечательный кот, сгенерированной нейросетью. На нём и будем смотреть разницу.

На изображениях сверху справа вывел информацию о его весе.

Кот плавает в бассейне для эксперимента с размером изображений. PNG.
Формат PNG без оптимизации. Вес 2100 КБ.

2,1 МБ — довольно большой размер файла изображения. Однако его можно значительно уменьшить, воспользовавшись сервисом оптимизации изображений.

Кот плавает в бассейне для эксперимента с размером изображений. Tiny PNG.
Формат PNG с оптимизацией через TinyPNG. Вес 494 КБ.
Кот плавает в бассейне для эксперимента с размером изображений. JPG.
Формат JPG. Вес 254 КБ.
Кот плавает в бассейне для эксперимента с размером изображений. WEBP.
Формат WebP. Вес 106 КБ.
Кот плавает в бассейне для эксперимента с размером изображений. Avif.
Формат Avif. Вес 82 КБ.

А вы заметили разницу в качестве изображений? Да, небольшая есть. Но на сколько это критично? Если конечно, вы не фотограф и вам нужно лучшее качество, то это, конечно, PNG, во всех остальных случаях можно использовать современные форматы и не раздражать пользователей сайта долгой загрузкой. А если у них плохой интернет? Все их нервные клетки и ваш лид потеряны!

Нужна помощь в оптимизации изображений?

Комплексная оптимизация сайта

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

Таблица сравнения форматов изображений

ХарактеристикаJPGPNGWebPAVIF
Размер файлаСреднийБольшойМеньше JPG и PNGМеньше всех
Поддержка прозрачности фонаНетДаДаДа
Максимальное разрешение (пикселей)65535 x 6553532767 x 3276716383 x 1638365536 x 65536
Поддержка браузерамиВысокаяВысокаяВысокая, но ниже чем JPG/PNG 4Высокая, но ниже чем JPG/PNG/Webp5
Качество изображенияСреднееВысокоеВысокоеОчень высокое

Таблица с размерами изображений в процентном соотношении

ФорматРазмер файлаРазмер в % от PNG
PNG2100 КБ100%
Оптимизированный PNG494 КБ23.5%
JPG254 КБ12.1%
WebP106 КБ5.0%
AVIF82 КБ3.9%

Основные выводы

  1. Новые форматы WebP и AVIF обеспечивают значительно более высокую степень сжатия по сравнению с исходными форматами PNG и JPEG.
  2. Формат изображений AVIF демонстрирует наибольшую эффективность сжатия, занимая всего 3.9% от размера исходного PNG и 51.0% от размера исходного JPEG.
  3. WebP также показывает хорошие результаты, занимая 5.0% от размера исходного PNG и 68.6% от размера исходного JPEG.
  4. Оптимизированный PNG с помощью сервиса Tiny PNG занимает 23.5% от размера исходного PNG, что также является значительным улучшением, если у вас нет возможности подключить Webp, AVIF.

Таким образом, новые форматы WebP и AVIF позволяют достичь существенно меньших размеров файлов по сравнению с традиционными PNG и JPEG.

Посмотрим разницу в весе изображений на реальном сайте

За пример для сравнения в весе изображений на реальном сайте возьмем один из недавних кейсов по проекту E‑bee. На данном сайте мы использовали для всех изображений форматы PNG, JPG и конечно WebP, AVIF.

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

Отключаем поддержку WebP, AVIF и получаем вес картинок 146КБ.

Замер веса сайта где отключена поддержка Webp и Avif составляет 246КБ
В настройках браузера отключили Webp, AVIF

Теперь смотрим сколько весит сайт, если браузер пользователя поддерживает WebP. Вес картинок 83.4 КБ.

Замер веса сайта где отключена поддержка Avif составляет 83.4 КБ
В настройках браузера отключили AVIF

Настало время AVIF, вес в этом случае 46 КБ

Замер веса сайта где включена поддержка Avif составляет 46 КБ

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

Скриншот сайта где вес картинок составляет 112 МБ

А сколько можно было бы сэкономить нервов пользователей на этом сайте? Изменилось ли количество лидов? Решайте сами.

Нужна помощь в оптимизации изображений?

Комплексная оптизация сайта

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

  1. Источник: https://developers.google.com/speed/webp?hl=ru ↩︎
  2. Alliance for Open Media https://ru.wikipedia.org/wiki/AVIF ↩︎
  3. Поддержка WebP 96% (https://caniuse.com/?search=webp), поддержка AVIF 93% (https://caniuse.com/?search=avif) ↩︎