ПОПУЛЯРНІ ТЕМИ

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 формату

Крім збереження якості зображення (при чому як при стисненні без втрат, так і з ними), цей формат також підтримує анімацію і прозорість.

web. Порівняння з jpg та png

Провівши тести, переваги .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