WebP формат изображений и SEO
SEO
Еще в далеком 2010-ом Гугл (Google) сообщил о разработке и внедрении нового формата для изображений — WebP. Однако только в 2020-ом его использование стало действительно доступным каждому.
Итак:
- Чем формат .webp отличается от .jpg и .png?
- Сильные стороны WebP формата
- WebP для SEO: преимущества для поисковой оптимизации
- Как внедрить WebP на сайт?
Чем формат .webp отличается от .jpg и .png?
Формат .webp был презентован как улучшенная альтернатива форматам .png и .jpg. Главное его отличие — небольшой размер файла без потери качества.
Самое интересное, что WebP был разработан еще 10 лет назад. Но почему возможность его нормального использования появилась только сейчас? Дело в том, что ранее браузер Safari не поддерживал этот формат. Поэтому все пользователи продукции Apple не ощутили бы каких-то изменений.
Однако в сентябре этого года Apple анонсировали обновление Safari. Конечно, во всеуслышание Apple не заявили обо всех изменениях, но путем исследований было выявлено, что, как на мобильных устройствах, так и на ПК, Safari начал читать WebP формат изображений.
Он был последним, кто не воспринимал и не поддерживал данный формат. Сейчас наконец-то, спустя 10 лет, все самые распространённые браузеры в мире поддерживают .webp изображения: Google Chrome, Safari, Opera, Microsoft Edge, а также Mozilla Firefox.
Сильные стороны WebP формата
Кроме сохранения качества изображения (при чем как при сжатии без потерь, так и с ними), этот формат также поддерживает анимацию и прозрачность.
Проведя множество тестов, преимущества .webp формата по сравнению с .png и .jpeg подтвердились.
Кроме того, Google провел собственные исследования и опубликовал их здесь.
Кратко в цифрах при сжатии без потери качества:
- При конвертации PNG в WebP размер файла в среднем уменьшается на 25%;
- При конвертации JPEG в WebP размер файла в среднем уменьшается на 30%.
WebP для SEO: преимущества для поисковой оптимизации
Известно, что для оптимизации под поисковые системы невероятно важно найти «золотую середину» между размером картинки и её качеством. Слишком большие файлы будут замедлять загрузку страницы, а слишком маленькие будут иметь зернистость и ухудшать визуал. А всё это влияет на поведенческие факторы, которые очень важны для SEO. Таким образом, конвертация изображений в WebP помогает продвижению сайта в поисковой выдаче.
Как внедрить WebP на сайт?
Многие веб-ресурсы достаточно давно используют у себя WebP формат, заменяя привычные всем PNG и JPG. Те же приложения от facebook или OLX конвертируют все изображения в формат .webp по умолчанию.
Далее мы рассмотрим несколько вариантов внедрения.
Вариант 1. Измените настройки веб-сервера.
В этом случае вам не нужно будет изменять контент страниц. Как это сделать, например, на веб-сервере NGINX.
Онлайн-конвертер в формат WebP для ОС Linux и Windows WebP Precompiled Utilities.
Вариант 2. Используйте тег <picture>.
<picture>
<source srcset="images/example.avif" type="image/avif">
<source srcset="images/example.webp" type="image/webp">
<img src="images/example.jpg" alt="Example for article about WebP">
</picture>
Такой подход поможет грузить первое поддерживаемое изображение: avif, webp или jpg. В случае, когда тег <picture> не поддерживается браузером, будет указываться тег <img>.
Вариант 3. Используйте конвертер изображений.
Когда у вас на ресурсе не так много контента, то можно воспользоваться бесплатным конвертером в WebP Squoosh от Google.
Что в итоге?
- WebP формат теперь поддерживается всеми распространёнными браузерами;
- .webp изображения ранжируются и индексируются без «подводных камней»;
- Качество не теряется, но размер файла будет меньше примерно на 25%;
- Внедрение данного формата повысит скорость загрузки страниц, тем самым помогая вашему ресурсу продвигаться в выдаче поисковых систем.