По данным WebsiteBuildersExpert, каждый четвёртый пользователь закроет сайт, если загрузка длится дольше четырёх секунд. На скорость загрузки во многом влияет вес изображений. Чтобы картинки загружались быстрее, в 2010 году Google разработала формат WebP. Разбираемся, как он работает, чем хорош, но почему его при этом так не любят обычные пользователи.
Что такое WebP
WebP — это формат сжатия изображений (от WEB Picture — «веб-картинка»). Изначально WebP был задуман как формат изображений с потерями для замены JPEG, чтобы создавать файлы меньшего размера, но сопоставимого качества:
Чуть позже появились обновления WebP с поддержкой сжатия без потерь. Кроме этого, WebP стал поддерживать анимацию, прозрачность, встроенные цветовые профили ICC и метаданные EXIF и XMP. Это сделало WebP универсальным форматом: его можно использовать как вместо JPEG, так и вместо GIF и PNG.
Для сжатия с потерями и без потерь в WebP используются различные методы.
Сжатие WebP с потерями
Алгоритм сжатия WebP с потерями основан на технологии сжатия видеофайлов с помощью видеокодека VTB, известного также как WebM. Принцип основан на методах предиктивного кодирования: при сжатии значение пикселей предсказывается (прогнозируется).
Картинка делится на блоки, и каждый блок предсказывается на основе трёх блоков над ним и одного слева. Внутри каждого блока декодер предсказывает яркость и цвет следующего пикселя, как бы пытаясь нарисовать недостающую часть изображения. Полученные результаты сравниваются с реальным изображением, и выбирается наиболее близкое совпадение:
Если фрагмент можно предсказать, данные о нём считаются избыточными и удаляются. Алгоритмы стараются сделать так, чтобы терялись только данные, которые не слишком важны. Это позволяет сжимать изображения, сохраняя высокое качество.
Сжатие WebP без потерь
При сжатии без потерь используются алгоритмы, которые позволяют уложить данные более компактно и передать их, не потеряв ни байта. Этот алгоритм изобрёл исследователь и учёный Юрки Алакуйяла, который до Google разрабатывал софт для нейрохирургии и планирования лучевой терапии.
Алгоритм сжатия WebP без потерь использует несколько методов:
- Алгоритм Хаффмана разбивает файл на фрагменты, а потом проверяет, насколько часто встречается каждый из них. Часто встречающиеся фрагменты получают короткие коды, а редко встречающиеся — более длинные, что в итоге позволяет уменьшить общий размер данных.
- При цветовом кэшировании создаётся набор цветов, которые часто встречаются в изображении, и он сохраняется в специальном списке — локальной палитре. Палитра используется, если алгоритм не может найти совпадение. Так процесс сжатия оптимизируется за счёт переиспользования цветов из кэша без их повторного кодирования.
- Представление и кодирование происходит по принципу рекурсивного определения: изображение разбивается на блоки различных размеров — с более крупных, которые также делятся на более мелкие. После этого одни и те же методы сжатия применяются на различных уровнях изображения: к цветовым каналам и слоям.
Сжатие без потерь в WebP также позволяет получить картинку с альфа-каналом, как в PNG. Альфа-канал в изображении — это дополнительный канал, который определяет прозрачность или непрозрачность каждого пикселя на изображении.
Плюсы WebP
➕ WebP задумывался как универсальный формат, который объединяет в себе преимущества JPEG, PNG и GIF. Это позволяет использовать один формат для статических изображений, анимаций и изображений с прозрачностью.
По данным Google, сжатие WebP без потерь на 26% меньше, чем аналогичные изображения в PNG, а с потерями — на 25–34%, чем в JPEG. Такая эффективность достигается за счёт предиктивного кодирования.
➕ Чем меньше размер изображений, тем выше скорость загрузки. Выше скорость загрузки — лучше рейтинг сайта и результат в поисковой выдаче. Компактные изображения также важны не только для скорости загрузки и увеличения пропускной способности сервера, но и для уменьшения размера медиахранилища сайта.
Проверить, насколько загрузка изображений в разных форматах влияет на общую производительность сайта, можно с помощью инструмента PageSpeed Insights. В разделе про формат изображений он показывает, сколько памяти можно сэкономить, используя 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.
Даже сами разработчики из 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 можно генерировать автоматически из одного исходного изображения, создав шаблон или компонент.
