Як оптимізувати зображення на сайті?

Більшість SEO-спеціалістів і веб-майстрів при оптимізації сайту не приділяють особливої уваги оптимізації зображень. Така стратегія має право на існування, але ми рекомендуємо приділяти увагу зображенням на перших етапах роботи з сайтом, оскільки вони відіграють велику роль як для пошукової системи, так і для користувача. Унікальні та якісні зображення можуть допомогти зайняти вищі місця в пошуковій видачі порівняно з конкурентами, якщо ті використовують однакові й неунікальні зображення, знайдені в Інтернеті.

Давайте детальніше розберемося зі способами оптимізації зображень на вашому сайті.

Унікальність зображень

Пошукова система давно навчилася "читати" зображення і з легкістю визначає їх унікальність порівняно з іншими. Очевидно, що якщо, наприклад, ви володієте інтернет-магазином і у вас є кілька конкурентів із подібним асортиментом, то за інших однакових показників оптимізації (внутрішня оптимізація, посилальна маса тощо) зображення можуть схилити терези на вашу користь, і ваш сайт ранжуватиметься в пошуку вище. Користувачі, здійснюючи покупки в Інтернеті, часто в першу чергу звертають увагу на зображення — вони надають багато інформації про товар і значно впливають на остаточний вибір. Тому, якщо ви хочете вигідно вирізнятися серед конкурентів, рекомендуємо використовувати унікальні та інформативні зображення.

Окрім позитивного користувацького досвіду, унікальні зображення врятують вас від проблем із авторськими правами. Пошукова система Google дуже суворо ставиться до таких речей. Якщо на ваш сайт надійде скарга з вказівкою на неправомірне використання зображення, то таку сторінку з великою ймовірністю видалять із індексу, і відновити її буде дуже складно. Механізм видалення контенту з видачі побудований на DMCA (Digital Millennium Copyright Act) — законі про авторське право в цифрову епоху. Щоб дізнатися, чи були скарги на ваш сайт, необхідно ввести його в пошуковий рядок у сервісі https://www.lumendatabase.org/

Стиснення зображень

На хвилі того, що пошукова система Google почала приділяти більше уваги швидкості завантаження сайту, як ніколи актуальним є питання розміру зображень. Також однією з важливих причин, чому розмір зображень має бути якомога меншим, є те, що більша частина сеансів здійснюється зі смартфонів, де швидкість Інтернету не завжди досягає високих значень.

В Інтернеті існує величезна кількість сервісів, які допоможуть вам зі стисненням зображень.

Пропонуємо розглянути приклад стиснення зображень різними сервісами:

Перший сервіс — https://www.iloveimg.com/

За його допомогою вдалося зменшити вагу двох зображень на 56%, з 716 Кб до 321 Кб.

Другий сервіс — https://tinypng.com/

За допомогою цього сервісу нам вдалося зменшити розмір зображень на 45% і 66%, що також дозволяє значно прискорити завантаження сторінки.

Такі маніпуляції можна проводити кілька разів поспіль, але рекомендуємо робити це обережно, оскільки можна значно погіршити якість зображення.

Ще одним непоганим варіантом стиснення зображень можуть стати плагіни, які встановлюються у вашу CMS. Такі плагіни стискають зображення в момент завантаження на сервер, і вам не доведеться витрачати час і зусилля на роботу зі сторонніми сервісами. Також деякі з них надають можливість оптимізувати зображення, які вже були завантажені на сервер раніше.

Приклади таких плагінів на WordPress:

Оцінити ефективність кожного зі способів стиснення зображень ви можете самостійно і підібрати для себе оптимальний.

Формат зображень

Раніше рекомендувалося завантажувати зображення у форматах PNG, JPEG. Але технології не стоять на місці, і постійно з’являються нові формати, які дозволяють мінімізувати розмір зображення з максимальним збереженням якості. На даний момент найбільш актуальними є AVIF, JPEG 2000, JPEG XR і WebP. Ці формати краще за інших справляються зі стисненням зображень, відповідно, зображення важить менше, сторінка завантажується швидше — користувач задоволений. А задоволений користувач на вашому сайті — це запорука високих позицій.

Найоптимальнішим серед перелічених вище є формат WebP. Єдиною проблемою з цим форматом є те, що не всі браузери його підтримують. Так, до недавнього часу браузер Safari не підтримував формат WebP. Але з виходом його 14 версії цю проблему було виправлено. На даний момент усі оновлені та найпоширеніші браузери підтримують WebP, тож варто в першу чергу звернути увагу саме на нього.

Щодо способів переведення всіх зображень у цей формат, то тут також є кілька варіантів.

Найпростішим є встановлення плагіна для вашої CMS, який в автоматичному режимі переведе всі зображення у формат WebP.

Другий варіант трохи складніший, оскільки займе певний час. Доведеться конвертувати всі зображення за допомогою онлайн-сервісів і завантажувати їх на сервер вручну.

Вказівка розмірів зображень

Ще один дуже важливий момент для визначення користувацького досвіду при роботі з вашим сайтом. У 2020 році пошукова система анонсувала запуск Core Web Vitals. Ці показники відображають якість взаємодії користувача з вашим сайтом. Одним із цих показників є CLS — час до повної стабільності сторінки. Тобто, якщо під час завантаження сторінки відбуваються зсуви якихось елементів, це погіршує користувацький досвід. Одним зі способів уникнути великих зсувів макета є чітке визначення розмірів зображень за допомогою атрибутів width і height. Докладніше про CLS ви можете прочитати в нашій статті про Core Web Vitals.

Якщо явно вказати розміри зображень, браузеру не доведеться витрачати час на правильне визначення їхніх розмірів. Він одразу зарезервує місце на сторінці для картинок, і вам вдасться уникнути великих зсувів макета.

Lazy Load

Lazy Load або відкладене завантаження — ще один спосіб прискорити завантаження видимої частини сторінки для користувача. За допомогою цієї технології зображення, які знаходяться поза видимою частиною сторінки, не завантажуються, доки це не знадобиться. Наприклад, зображення завантажаться під час прокручування сторінки. Це дає більше ресурсів для видимої частини сторінки, що дозволяє їй завантажитися швидше, а чим швидше завантажиться сторінка, тим більше Google буде задоволений вашим сайтом. За посиланням https://web.dev/lazy-loading-images/ можна отримати більше інформації про цю технологію.

Заповнені Alt

Alt — це текстове описання зображення, що міститься в атрибуті alt тегу img. Воно призначене для того, щоб виводити текстове описання зображення, якщо його неможливо завантажити, або щоб озвучити для людей із ослабленим зором.

З точки зору SEO цей атрибут дозволяє пошуковій системі краще зрозуміти, що зображено на картинці. Пошукова система Google уже давно вміє "читати" зображення і без цього параметра, але він дозволяє надати саме ту інформацію, яка нас цікавить. Та й так набагато простіше, оскільки штучний інтелект не завжди може коректно і повноцінно розпізнати зображення.

Також заповнений alt дозволяє зображенням вашого сайту вище ранжуватися в пошуку за картинками. У певних нішах, у поєднанні з унікалізацією зображень, це може дати хороший ефект у вигляді додаткового трафіку на ваш сайт.

Мікророзмітка

У багатьох типах мікророзмітки присутні спеціальні теги для розмітки зображень. Завдяки мікророзмітці зображення можуть з’явитися в сніппеті, що зробить його набагато привабливішим для користувача. Докладніше з найпопулярнішими типами мікророзмітки ви можете ознайомитися тут.

Хорошим варіантом розмітки зображень є розмітка зображення товару. Так, якщо користувач шукатиме конкретний товар, знаючи його назву, він побачить ваш сніппет із красивим і унікальним зображенням і з більшою ймовірністю перейде на ваш сайт.

Висновки:

Завдяки оптимізації зображень на вашому сайті можна отримати досить приємний ефект у вигляді підвищення позицій і збільшення трафіку. Звісно, не варто покладатися лише на оптимізацію зображень у процесі роботи, а використовувати комплексний підхід до розвитку сайту. Не забувайте про інші важливі фактори ранжування сайту.