WebP — что это за формат, как устроен, зачем нужен и почему он так всем не нравится
easy

WebP — что это за формат, как устроен, зачем нужен и почему он так всем не нравится

Изображения легче, а качество — то же

По данным WebsiteBuildersExpert, каждый четвёртый пользователь закроет сайт, если загрузка длится дольше четырёх секунд. На скорость загрузки во многом влияет вес изображений. Чтобы картинки загружались быстрее, в 2010 году Google разработала формат WebP. Разбираемся, как он работает, чем хорош, но почему его при этом так не любят обычные пользователи.

Что такое WebP

WebP — это формат сжатия изображений (от WEB Picture — «веб-картинка»). Изначально WebP был задуман как формат изображений с потерями для замены JPEG, чтобы создавать файлы меньшего размера, но сопоставимого качества:

WebP — что это за формат, как устроен, зачем нужен и почему он так всем не нравится

Чуть позже появились обновления WebP с поддержкой сжатия без потерь. Кроме этого, WebP стал поддерживать анимацию, прозрачность, встроенные цветовые профили ICC и метаданные EXIF и XMP. Это сделало WebP универсальным форматом: его можно использовать как вместо JPEG, так и вместо GIF и PNG.

Для сжатия с потерями и без потерь в WebP используются различные методы.

Сжатие WebP с потерями

Алгоритм сжатия WebP с потерями основан на технологии сжатия видеофайлов с помощью видеокодека VTB, известного также как WebM. Принцип основан на методах предиктивного кодирования: при сжатии значение пикселей предсказывается (прогнозируется).

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

Сжатие WebP с потерями
Например, если над блоком и слева от него фиолетовый цвет, то предполагается, что этот блок — фиолетовый. Источник: developers.google.com

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

Сжатие WebP без потерь 

При сжатии без потерь используются алгоритмы, которые позволяют уложить данные более компактно и передать их, не потеряв ни байта. Этот алгоритм изобрёл исследователь и учёный Юрки Алакуйяла, который до Google разрабатывал софт для нейрохирургии и планирования лучевой терапии.

Алгоритм сжатия WebP без потерь использует несколько методов:

  • Алгоритм Хаффмана разбивает файл на фрагменты, а потом проверяет, насколько часто встречается каждый из них. Часто встречающиеся фрагменты получают короткие коды, а редко встречающиеся — более длинные, что в итоге позволяет уменьшить общий размер данных. 
  • При цветовом кэшировании создаётся набор цветов, которые часто встречаются в изображении, и он сохраняется в специальном списке — локальной палитре. Палитра используется, если алгоритм не может найти совпадение. Так процесс сжатия оптимизируется за счёт переиспользования цветов из кэша без их повторного кодирования.
  • Представление и кодирование происходит по принципу рекурсивного определения: изображение разбивается на блоки различных размеров — с более крупных, которые также делятся на более мелкие. После этого одни и те же методы сжатия применяются на различных уровнях изображения: к цветовым каналам и слоям.

Сжатие WebP без потерь
Локальная палитра обновляется при сканировании картинки сверху вниз. Источник: developers.google.com

Сжатие без потерь в WebP также позволяет получить картинку с альфа-каналом, как в PNG. Альфа-канал в изображении — это дополнительный канал, который определяет прозрачность или непрозрачность каждого пикселя на изображении. 

Сжатие WebP без потерь
Разница в качестве альфа-канала: PNG без потерь слева, WebP с потерями в центре и без потерь — справа. WebP без потерь меньше на 844 КБ, чем PNG. Источник: smashingmagazine.com

Плюсы WebP

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

По данным Google, сжатие WebP без потерь на 26% меньше, чем аналогичные изображения в PNG, а с потерями — на 25–34%, чем в JPEG. Такая эффективность достигается за счёт предиктивного кодирования.

Плюсы WebP
Слева: JPEG, 562 КБ. Справа: WebP, 416 КБ. Изображение WebP меньше на 25 %. Изображения неразличимы. Источник: 99designs.com

➕ Чем меньше размер изображений, тем выше скорость загрузки. Выше скорость загрузки — лучше рейтинг сайта и результат в поисковой выдаче. Компактные изображения также важны не только для скорости загрузки и увеличения пропускной способности сервера, но и для уменьшения размера медиахранилища сайта. 

Проверить, насколько загрузка изображений в разных форматах влияет на общую производительность сайта, можно с помощью инструмента PageSpeed Insights. В разделе про формат изображений он показывает, сколько памяти можно сэкономить, используя WebP:

Плюсы WebP

Минусы WebP

Если с качеством и сжатием в WebP всё так хорошо, то почему пользователи его не любят, а разработчики не спешат внедрять повсеместно? Например, на конец 2022 года только 10,7% сайтов использовали WebP. 

😐 Почему пользователи не любят WebP: до 2022 года сохранённый файл WebP нельзя было открыть стандартными средствами macOS, а до 2023-го — в стандартной программе «Фото» на Windows. Как шутили на Reddit, инструмент «Ножницы» снова стал актуальным: проще было сделать скриншот картинки на сайте, где она отображалась, чем сохранить её и открыть на компьютере.

Photoshop также не поддерживал WebP по умолчанию — приходилось использовать дополнительные плагины. И только в версии 23.2 2023 года была добавлена полная поддержка формата. 

🦊 Почему не любит Mozilla: создатели браузера Firefox долго сопротивлялись внедрению WebP, считая, что формат недоработан и слишком распиарен Google. Mozilla продвигала свой формат, но широкой поддержки он не получил. Браузеры Firefox стали отображать WebP только в 2019 году — спустя 9 лет после появления формата.

🧑‍💻 Почему не любят другие разработчики: у WebP могут быть проблемы с размытием деталей, низким разрешением цвета и использованием цветового пространства с меньшим количеством битов на канал, чем стандартный 24-битный (8 бит на каждый из трёх каналов: красный, зелёный и синий). Это может также привести к потере деталей и качества изображения, особенно при работе с изображениями, требующими высокой точности цветопередачи.

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

Минусы WebP
На изображении WebP справа кожа выглядит более пластиковой. Источник: smashingmagazine.com

Даже сами разработчики из Google признают, что при загрузке анимированных WebP-изображений по сравнению с GIF нагрузка на процессор может быть в 2,2 раза выше. Поэтому WebP — не всегда оптимальный вариант.

Доступность формата

Старые браузеры, например Edge 12–17 и Firefox 2–64, не поддерживают WebP. Поэтому для оптимизации сайта можно загружать сразу два изображения — WebP и JPEG. Для этого в HTML-вёрстке в теге <picture> можно указать два источника изображения:

<picture>
  <source srcset="./img/avatar.webp" type="image/webp">
  <img src="./img/avatar.jpeg" alt="avatar">
</picture>

Тег <source> определяет альтернативный источник изображения в формате WebP. По умолчанию будет загружаться изображение в формате WebP меньшего размера, а если браузер не поддерживает этот формат, то загрузится JPEG.

Как подготовить изображения WebP для проекта

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

Для конвертации в WebP есть такие инструменты:

  • Модуль Node.js Imagemin позволяет автоматически сжимать изображения в WebP с помощью скриптов на Node.js.
  • XnConvert — программа для преобразования различных форматов изображений, включая WebP.
  • Squoosh — веб-приложение, разработанное Google. Позволяет оптимизировать изображения и конвертировать их в WebP прямо в браузере.
  • Плагин Photoshop для WebP, если работаете в старых версиях Photoshop.
  • Графические редакторы Sketch, GIMP и ImageMagick, которые поддерживают WebP.

Если делаете веб-проект, то лучше использовать инструменты сборки Gulp, Webpack или SSG, где формат WebP можно генерировать автоматически из одного исходного изображения, создав шаблон или компонент.

Текст:

Кристина Тульцева

Редактор:

Инна Долога

Обложка:

Алексей Сухов

Корректор:

Ирина Михеева

Вёрстка:

Маша Климентьева

Соцсети:

Юлия Зубарева

Получите ИТ-профессию
В «Яндекс Практикуме» можно стать разработчиком, тестировщиком, аналитиком и менеджером цифровых продуктов. Первая часть обучения всегда бесплатная, чтобы попробовать и найти то, что вам по душе. Дальше — программы трудоустройства.
Начать карьеру в ИТ
Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию Получите ИТ-профессию
Еще по теме
easy