Формат изображений WebP: что это такое и почему он полезен для SEO-продвижения

Содержание:

  1. Основные особенности WebP
  2. Особенности работы с форматом WebP
  3. Заключение
  4. Дополнительная информация для веб-мастеров

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

всё про формат изображений webp

Основные особенности WebP

Современным сайтам всегда требуются изображения. Фотографии, рисованные иллюстрации, диаграммы и анимации помогают привлечь внимание посетителей, а также добавляют наглядности познавательной статье, новостной заметке, рекламному предложению. Без картинок не может обойтись ни один ресурс — если их все убрать, большинство людей не захотят читать «голый» текст и уйдут к конкурентам. Однако у изображений есть одно негативное свойство — когда их много на одной странице, ее загрузка замедляется, что отпугивает пользователей и снижает посещаемость. Чтобы это неудобство меньше мешало и владельцам сайтов, и их посетителям, компания Google разработала формат изображений WebP. Релиз данного формата состоялся аж в 2010 году. Его основными чертами стали:

  • Относительно небольшой вес. Картинки в WebP занимают на 25-34% меньше места на сервере по сравнению со стандартным JPEG. Для PNG эта разница составляет около 26%, а для GIF — 10-20%.
  • Быстрая скорость загрузки на странице. Использование формата WebP способно повысить производительность ресурса на 20–30 баллов по шкале Pagespeed Insights.
  • Минимизация потери качества при сжатии. Это осуществляется за счет особой технологии, разбивающей изображение на отдельные блоки. У WebP два режима сжатия — «с потерей качества» и «без потери». Второй помогает получить сжатое изображение, максимально близкое к оригиналу.

photo
Читайте также:
Оптимизация картинок для SEO: полный гид


WebP позаимствовал немало черт у более ранних форматов: как и JPEG, он поддерживает до 16,7 миллиона цветов, позволяет создавать анимированные изображения, как GIF, работает с прозрачными слоями, как PNG, а также подходит для логотипов и эффектов, как SVG. При этом он лучше адаптирован для использования в интернете — страницы с картинками в этом формате грузятся быстрее и тратят меньше трафика при показе на мобильных устройствах. Однако у WebP есть и ряд минусов:

  • Не все браузеры поддерживают данный формат. Изображения в WebP будут корректно отображаться при использовании Chrome, Opera, Firefox или Яндекс.Браузера, но для других таких гарантий нет.
  • Некоторые графические редакторы не позволяют изменять и конвертировать изображения формата WebP. Подробнее о том, какие программы работают с подобными файлами, мы поговорим немного позже.
  • Многие пользователи недовольны форматом WebP, так как при сохранении на ПК такие картинки часто не отображаются сразу и их необходимо конвертировать. По умолчанию только Microsoft Windows 11 может просматривать WebP, однако разработчики научили его этому лишь в 2023 году.
  • Формат достаточно узко специализирован. WebP хорошо подходит, если нужно разместить картинки на сайте, однако для других целей (сохранение нарисованных пользователем иллюстраций на домашнем ПК, создание презентаций, печать чего-либо) проще использовать более привычные JPEG или PNG.
  • Технология сжатия все же несовершенна, что особенно заметно, когда применен режим с потерями». Иногда он срабатывает таким образом, что часть оттенков теряется, мелкие детали исчезают, а крупные становятся более размытыми.
  • Некоторые конструкторы сайтов некорректно отображают картинки в формате WebP или не позволяют загружать на страницы такие файлы. Например, это свойственно старым версиям WordPress. Следовательно, если ваш сайт был создан относительно давно, велика вероятность, что разместить на нем файлы формата WebP не получится.

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

особенности формата webp

Особенности работы с форматом WebP

Чтобы получить картинку в этом формате, достаточно провести конвертацию файла из JPEG, PNG или GIF. Сделать это можно с помощью подходящего редактора изображений. Так, если вы пользуетесь операционной системой Windows или macOS, установите последнюю версию одной из следующих программ:

  • XnView;
  • Movavi;
  • Adobe Photoshop или Adobe Photoshop Lightroom;
  • WidsMob WebP;
  • Wondershare UniConverter;

Кроме того, конвертировать практически любое изображение в WebP сейчас умеет даже привычный всем Microsoft Paint. Если же под рукой нет редактирующей программы, вы можете воспользоваться онлайн-конвертером, например CloudConvert, Convertio, EZGIF или Online‑convert.com.

конвертер картинок в webp

Возможны случаи, когда требуется только открыть картинку формата WebP. Здесь тоже вариантов более чем достаточно — сейчас этот формат поддерживают самые разные инструменты просмотра изображений. Ваш выбор будет зависеть от операционной системы, которая установлена на рабочем ПК. Больше всего программ, позволяющих открыть файл WebP, доступно для ОС Microsoft Windows — наиболее популярными среди них стали GIMP, Google Picasa, FastStone Image Viewer и 123 Photo Viewer. FastStone также работает на Linux и Mac, хотя у этих систем есть и «фирменные» программы для просмотра изображений. Так, если у вас ПК на Linux, открыть файл WebP получится через gThumb или qview, а в случае с макбуком, возможно, потребуется скачать PhotoKilter или XnView.

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

Перед тем как заливать картинку на сайт, ее необходимо оптимизировать для SEO. Поэтому важно провести следующие действия:

  • Дайте файлу именно то название, которое будет в полной мере отражать содержание. Например, если вы публикуете фото котика, не стоит называть его Pushok.webp — поисковая система может неправильно вас понять. Более выигрышными вариантами с точки зрения SEO станут cat.webp или kot.webp. А если кот на картинке что-то делает, озаглавьте файл как playing-cat.webp или kot-igraet.webp. Главное, не забывайте менять названия, состоящие из одних цифр и символов, на человекопонятные.
  • Заполните атрибут alt. Некоторые браузеры могут не поддерживать формат WebP, однако если в этом атрибуте будет необходимая информация, пользователь увидит описание того, что находится на картинке. Также, когда alt заполнен, выше вероятность, что ваше изображение попадет на страницу выдачи картинок в поиске. Поэтому описание в этом атрибуте нужно сделать как можно более подробным, например Белый кот играет с ленточкой в солнечный день».
  • Добавьте подпись к картинке. Это поможет пользователю лучше понять, что на ней изображено. Подпись также станет фактором, который позволит занять более высокое положение в выдаче.
  • Сделайте анкор описательным. Он может, например, повторять подпись под картинкой.

Заключение

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

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

В 2021 данный формат стал доступен в Google Merchant Center.

Более подробная информация про данный формат изображений на официальном сайте разработчика