Изображения являются самым популярным видом медиа на каждом сайте и зачастую именно они занимают значительную долю ресурсов. Пользователи ценят высококачественные фото и в хорошем разрешении, при условии что они быстро прогружаются. Всегда существовала необходимость в форматах графики, которые при минимальном весе файла обеспечивали максимальное качество для посетителей. С ростом глобального интернет трафика сейчас такая проблема более чем актуальна. В этой статье мы расскажем, как современный формат изображений WEBP может повысить сжатие графики до 50% и обеспечить лучшее качество.
Необходимость в новых форматах
В течение последних 25 лет JPEG был наиболее широко поддерживаемым форматом для интернет графики. JPEG является форматом сжатия с потерями. Хотя скорость декодирования файлов JPEG отличная, ей не хватает других функций, необходимых для изображений на современных веб-сайтах. JPEG не поддерживает прозрачность изображений, анимации, картe глубины цвета или возможность наложения слоев. JPEG лучше всего работает с фотографиями. PNG является форматом без потерь и может поддерживать альфа-прозрачность, но достигнутое сжатие, особенно для фотографий, значительно ниже. JPEG и PNG широко используются в зависимости от типа требуемого изображения.
Таким образом, целью современных форматов изображений является преодоление ограничений JPEG и PNG, предлагая лучшее сжатие и гибкость для поддержки других современных функций. В виду такой необходимости и возникли форматы WEBP и AVIF, которые сейчас активно внедряются на разных сайтах.
Формат изображений WEBP
Формат WEBP был создан Google в 2011 году как формат изображений, который поможет сделать Интернет быстрее. За прошедшие годы он получил широкое распространение из-за его способности сжимать изображения до файлов меньшего размера по сравнению с JPEG и PNG. WEBP предлагает сжатие без потерь и с потерями с приемлемым визуальным качеством и поддерживает прозрачность и анимацию альфа-канала.
Степень сжатия WEBP
Изображения WEBP без потерь обычно на 30% меньше, чем PNG, а изображения WEBP с потерями на 40% меньше, чем изображения JPEG аналогичного качества. Поддержка анимации также делает их отличной заменой изображениям в формате GIF.
Для сравнения ниже представлены два фото в разных форматах: слева стандартный JPG, справа новый формат WEBP.
Формат JPG (91 КБ)
Формат WEBP (45 КБ)
Формат JPG (112 КБ)
Формат WEBP (53 КБ)
Кроме хорошего сжатия, WEBP имеет другие неоспоримые преимущества, такие как:
Прозрачность
WEBP имеет 8-битный канал прозрачности без потерь, в котором всего на 22% больше байтов, чем в PNG. Он также поддерживает прозрачность RGB с потерями, что является уникальной функцией WEBP.
Дополнительные метаданные
Формат файла WEBP поддерживает метаданные фотографий EXIF и метаданные цифровых документов Extensible Metadata Platform (XMP). Он также может содержать цветовой профиль ICC.
Анимация
Формат WEBP поддерживает полноцветные анимированные изображения.
Поддержка WEBP браузерами
За последние пару лет разные интернет браузеры и приложения стали поддерживать WEBP и разработали множество инструментов для создания, просмотра и загрузки файлов WEBP. Сегодня WEBP поддерживается в последних версиях практически всех основных браузеров.
Если разработчики захотят использовать WEBP на своих сайтах, они могут сделать это с помощью элемента
<picture>
<source srcset="img/photo.avif" type="image/avif">
<source srcset="img/photo.WEBP" type="image/WEBP">
<img src="img/photo.jpg" alt="Description" width="360" height="240">
</picture>CDN также поддерживают адаптивные изображения с автоматическим выбором формата для изображений в WEBP или AVIF в зависимости от поддержки браузера. Плагины WEBP доступны для других популярных CMS, таких как WordPress, Joomla, Drupal и пр. Начальная поддержка WEBP также доступна в самом ядре WordPress, начиная с версии 5.8.
Как конвертировать WEBP в JPG и обратно
Часто возникает необходимость конвертировать WEBP формат в JPG или PNG. Полагаясь на наш опыт можем рекомендовать вам несколько отличных сервисов.
- www.squoosh.app — шикарный сервис от компании Google, который позволяет проводить взаимное конвертирования популярных форматов. Вы можете простым перемещением ползунка сравнить онлайн качество загружаемого и получаемого фото.
- www.convertio.co — русскоязычный сервис, предлагающий на выбор посетителя свыше 300 разных графических форматов. Сервис находится в топ 1000 самых посещаемых сайтов мира. Для конвертации вы можете загрузить файл, выбрать нужный вам формат и скачать уже преобразованный.
Недостатки формата WEBP
На первых порах существенным недостатком WEBP было отсутствие поддержки браузера и должного инструментария. При рассмотрении всех функций, которые в идеале должен поддерживать современный формат, по-прежнему есть несколько существенных замечаний.
- WEBP ограничен 8-битной точностью цвета. В результате он не может поддерживать изображения HDR / с широкой гаммой цветов.
- WEBP не поддерживает изображения с потерями цветности. Это может повлиять на изображения с мелкими деталями, хроматическими текстурами или цветным текстом.
- Формат не поддерживает прогрессивное декодирование. В идеале вы можете создавать файлы WEBP из доступных исходных файлов самого высокого качества. Преобразование некачественных файлов JPEG в файлы WEBP не очень эффективно, так как сжимается дважды.
Итоги
Обобщая всю информацию о трех форматах JPEG, PNG и WEBP, а также сравнивая и количественно оценивая сильные и слабые стороны, как представлено в предыдущем разделе, мы составили следующую таблицу.
Степень сжатия фотографических и нефотографических изображений может также отличаться в зависимости от точности (качества) изображений. Здесь мы указали общий балл. В целом формат WEBP лучше поддерживает и предлагает лучшее сжатие по сравнению с JPEG или PNG. Таким образом, применять новый формат на сайте можно, но с осторожностью, так как поддерживается он далеко не всеми браузерами.
