ПОПУЛЯРНЫЕ ТЕМЫ

WebP формат изображений и SEO

SEO

Еще в далеком 2010-ом Гугл (Google) сообщил о разработке и внедрении нового формата для изображений WebP. Однако только в 2020-ом его использование стало действительно доступным каждому.

Итак:

Чем формат .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%;
  • Внедрение данного формата повысит скорость загрузки страниц, тем самым помогая вашему ресурсу продвигаться в выдаче поисковых систем.

Andrii DELIKATNYI

CEO, project manager
Спасибо!

Мы свяжемся с Вами в ближайшее время

Мы используем файлы cookie для того, чтобы обеспечить оптимальное использование и функциональность веб-сайта. Нажав кнопку «Я согласен», вы подтверждаете, что соглашаетесь использовать файлы cookie в соответствии с нашей Политикой конфиденциальности

×

SetEnvIfNoCase User-Agent .*aboundexbot.* botstop SetEnvIfNoCase User-Agent .*megaindex.* botstop SetEnvIfNoCase User-Agent .*ahrefsbot.* botstop SetEnvIfNoCase User-Agent .*backlinkcrawler.* botstop SetEnvIfNoCase User-Agent .*majestic-seo.* botstop SetEnvIfNoCase User-Agent .*blexbot.* botstop SetEnvIfNoCase User-Agent .*Serpstatbot.* botstop SetEnvIfNoCase User-Agent .*linkdexbot.* botstop SetEnvIfNoCase User-Agent .*dotbot.* botstop SetEnvIfNoCase User-Agent .*dsearch.* botstop SetEnvIfNoCase User-Agent .*exabot.* botstop SetEnvIfNoCase User-Agent .*ezooms.* botstop SetEnvIfNoCase User-Agent .*nutch.* botstop SetEnvIfNoCase User-Agent .*seokicks-robot.* botstop SetEnvIfNoCase User-Agent .*gigabot.* botstop SetEnvIfNoCase User-Agent .*ia_archiver.* botstop SetEnvIfNoCase User-Agent .*lipperhey spider.* botstop SetEnvIfNoCase User-Agent .*majestic-12.* botstop SetEnvIfNoCase User-Agent .*meanpathbot.* botstop SetEnvIfNoCase User-Agent .*blekkobo.* botstop SetEnvIfNoCase User-Agent .*ncbot.* botstop SetEnvIfNoCase User-Agent .*pagesinventory.* botstop SetEnvIfNoCase User-Agent .*rogerbot.* botstop SetEnvIfNoCase User-Agent .*scoutjet.* botstop SetEnvIfNoCase User-Agent .*searchmetricsbot.* botstop SetEnvIfNoCase User-Agent .*semrushbot.* botstop SetEnvIfNoCase User-Agent .*sistrix.* botstop SetEnvIfNoCase User-Agent .*mj12bot.* botstop SetEnvIfNoCase User-Agent .*sitebot.* botstop SetEnvIfNoCase User-Agent .*spbot.* botstop Order Allow,Deny Allow from all Deny from env=botstop