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