ЧТО ТАКОЕ ФОРМАТ ИЗОБРАЖЕНИЯ WEBP

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

О чем идет речь?

• Что такое WebP?
• Преимущества и недостатки формата изображения WebP
• Как преобразовать файл WebP в JPEG или PNG?
• Выводы

Что такое WebP?

Формат изображений WebP разработан Google в 2010 году. Концепцию придумала приобретенная корпорацией компания On2 Technologies. Новый тип файлов стал альтернативой PNG и JPG, поскольку поддерживает прозрачность и анимацию и делает возможным уменьшение размера сжатых изображений без потери их качества. Изображения WebP с потерями в среднем на 30% меньше JPG, а изображения WebP без потерь в среднем на 25% меньше PNG. Методы сжатия WebP с потерями хорошо подходят для популярных анимированных изображений, созданных из видеофайлов.

Суть технологии WebP заключается в том, что изображения хранятся в формате контейнера, основанном на формате файла обмена ресурсами (RIFF). Контейнеры RIFF очень легкие, их размер составляет всего 20 байт, при этом сохраняется возможность добавлять больше метаданных. Контейнер RIFF может поддерживать изображения с длиной стороны до 16 383 пикселей.

Файлы WebP можно распознать по расширению .webp. Это технология с открытым исходным кодом, а значит, любой может внести изменения в него. Уменьшение размера изображений без потери качества осуществляется путем предиктивного кодирования. Максимальный размер изображения в формате WebP достигает 16 383 × 16 383 пикселей.

В 2022 году WebP занимал 97% рынка среди веб-браузеров, таких как Google Chrome, Safari, Firefox, Edge и Opera. Изображения WebP поддерживают различные CMS и значительная часть графических редакторов.

Преимущества и недостатки формата изображения WebP

Facebook, eBay и другие крупные компании активно используют этот формат изображений, чтобы сэкономить полосу пропускания благодаря улучшенному сжатию. Все больше CMS и платформ поддерживают формат WebP. Он выделяется среди других своими преимуществами.

• Прозрачность

В отличие от JPG, WebP-изображения поддерживают альфа-прозрачность. Для PNG эта возможность также доступна. Прозрачность является важным преимуществом при разработке веб-сайтов. Она позволяет создавать неровные границы фигуры и видимый фон вне ее, глубину и контраст с помощью различных элементов страницы и другие визуальные эффекты, необходимые для современного веб-дизайна.

• Анимация

Анимированные файлы WebP имеют меньший размер, чем GIF или APNG, а формат JPG вообще не поддерживает анимацию.

• Метаданные

С помощью них изображениям можно придать цифровой контекст, в частности, указать данные о времени и местоположении для фото с цифровой камеры. В целях оптимизации страницы и наращивания органического трафика важно присваивать изображениям метатеги title и description. WebP поддерживает добавление метаданных к изображениям с помощью XMP и EXIF.

• Профиль цвета

С помощью Adobe Photoshop или другой программы для редактирования изображений в WebP-файл можно встроить профиль ICC для управления цветом.

• Сжатие с потерями и без потерь

В первом случае данные теряются при распаковке файла, во втором — потери минимальны или отсутствуют. Преимущество сжатия с потерями заключается в значительно меньшем размере файла. Это ключевое преимущество формата WebP, поскольку использование таких изображений может существенно ускорить работу сайта.
Сжатие без потерь — это новый алгоритм, который разработал Юрки Алакуйяла, инженер Google. Он включает традиционные методы (индексированные цвета, кодирование Хаффмана и кодирование по словарю и продвинутые методы (специальные энтропийные коды для каждого цветового канала и кэш последних цветов).

• Экономия пропускной способности

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

• Улучшенная поисковая оптимизация (SEO)

В рамках рекомендаций Core Web Vitals от Google рекомендуется использовать современные форматы изображений, такие как WebP.

• Улучшение производительности сайта

Формат WebP легче JPEG и PNG, поэтому страница с изображениями WebP загружается быстрее, что крайне важно для пользователей.

Таким образом, использование на сайте WebP-изображений улучшает клиентский опыт, уменьшает показатель отказов и увеличивает конверсию. Согласно исследованиям, при увеличении времени загрузки на 10 секунд увеличение показателя отказов достигает 123%. Конверсия падает на 0,3% на каждую секунду дополнительного времени загрузки, что очень важно для e-comerce.

Быстрая загрузка сайта также способствует эффективной поисковой оптимизации (SEO). С 2021 года скорость сайта является одним из факторов, которые учитываются поисковой системой Google и влияет на рейтинг веб-ресурса.

Следует отметить, что тяжелые файлы занимают много места на сервере. Использование формата WebP устраняет эту проблему. Изображения PNG и JPG занимают много места на сервере сайта, где, в зависимости от хостинга, хранение данных может стоить дорого.

Для анализа факторов, влияющих на скорость сайта, можно использовать онлайн-инструмент PageSpeed Insights. Сервис определяет правильный размер изображений, их эффективное кодирование и использование оптимальных форматов.

Недостатки WebP

• В некоторых случаях сжатие с помощью WebP может несколько ухудшить качество изображения. Это важно при работе с изображениями высокого разрешения, которые должны отображаться с высокой точностью.
• Формат WebP был создан прежде всего для просмотра файлов в интернете, многие графические редакторы не поддерживают WebP, поэтому могут возникать определенные трудности в работе с изображениями в автономном режиме.
• Также формат поддерживают не все конструкторы сайтов. Однако самые популярные платформы, например, WordPress Joomla, Drupal позволяют использовать WebP.
• Не подходит для пиксельной графики, потому что сжатие приводит к потере цвета. Кроме этого, сжатие с потерями не поддерживает модель RGB и кодирует изображение YUV.
• При сильном сжатии края объектов на изображении сохраняются четкими, но теряется текстура.

Согласно данным Сапіцѕе, 96,3% браузеров на данный момент поддерживают WebP. Исключение — некоторые старые браузеры, Internet Explorer 11 и KaiOS, которые требуют специальных расширений для работы с новым форматом.

При условии правильной настройки изображений на сайте они будут открываться корректно в любом браузере — либо в оригинале, либо в формате по умолчанию, например, PNG или JPEG. Для этого существуют соответствующие решения для интеграции с WebP.

Как преобразовать файл WebP в JPEG или PNG?

Чтобы использовать изображения WebP на своем веб-сайте, вам нужна CMS, которая поддерживает WebP. Конвертировать изображения можно как непосредственно в CMS, так и на компьютере.

Самый простой, однако далеко не лучший способ — открыть изображение в новой вкладке и сделать его скриншот. Поскольку при этом существенно пострадает его качество, следует воспользоваться другим методом.

Встроенный в Windows редактор может открывать изображения WEBp и преобразовывать их в формат JPEG или PNG.

1. Запустите MS Paint, выберите в меню «Файл» и «Открыть».
2. Найдите на ПК файл нужный файл WEBp и нажмите кнопку «Открыть».
3. После загрузки выберите вкладку «Файл» и наведите курсор мыши на пункт «Сохранить как».
4. В боковом меню выберите «Изображение JPEG» или «Изображение PNG», назовите и сохраните файл.

Если вы пользуетесь ПК Mac или макбуком и хотите обработать файл WEBp, достаточно загрузить картинку и открыть ее в стандартном просмотрщике macOS (Preview). В верхнем меню выберите «Файл» и «Экспортировать», далее в окне экспорта укажите формат JPEG или PNG, качество, место сохранения и название файла. После этого можно работать с данным изображением.

Открыть, создать новый или редактировать существующий файл позволяют различные графические программы, в частности Adobe Photoshop, Google Photos, Blender и др. На сайте поддержки от Adobe размещен внешний модуль для Photoshop под названием WebPShop, который позволяет работать с WebP и использовать функцию предварительного просмотра.

Змінити формат зображення можна за допомогою онлайн-конвертера, наприклад, Squoosh, Online-Convert.com або TinyIMG.

В последнем это происходит буквально за несколько секунд: достаточно перетащить изображение и нажать символ загрузки, чтобы найти вновь созданный файл на своем устройстве. Аналогично в данных онлайн-сервисах и программах происходит создание изображений WebP.

Конвертацию изображений в WebP можно выполнить через инструменты командной строки. Форматы JPEG, PNG и TIFF преобразуют в WebP с помощью утилиты cwebp и декодируют с помощью dwebp.

Также вы можете добавить расширение для обновленной версии браузера Chrome, которое конвертирует изображения в формат JPG или PNG под названием «Save image as Type».

После завершения установки расширения нужно закрыть и снова открыть Chrome. После этого откройте веб-страницу, которая содержит нужное изображение, нажмите на изображение правой кнопкой мыши и выберите «Сохранить изображение как тип» > «Сохранить как X» (где X — это JPG, PNG или WebP).

Открыть файл WebP можно в менее функциональном, чем Photoshop, но бесплатном графическом редакторе GIMP. Он доступен для Windows, Linux, MacOS.

Выводы

WebP — это современный формат изображений, разработанный компанией Google с целью помочь сайтам доставлять медиа-контент без замедления их работы.

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

• улучшается рейтинг в поисковых системах;
• эффективнее наращивается органический трафик;
• уменьшается показатель отказов;
• растет конверсия в заявки;
• уменьшается мобильный трафик для пользователей смартфонов;
• повышается лояльность посетителей, доверие к бренду.

Використовуючи графічні редактори, онлайн-сервіси чи CMS, що підтримує цей сучасний формат, Используя графические редакторы, онлайн-сервисы или CMS, поддерживающие этот современный формат, вы можете преобразовывать файлы JPEG или PNG в WebP и наоборот. Также конвертацию в WebP можно выполнять через модули в CMS, что удобно делать в процессе наполнения сайта контентом.

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