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

1. Правила оптимізації зображень
2. Оптимізуйте вага зображення
3. Як виглядає код оптимізованої картинки
4. Що дає оптимізація картинок

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

Правила оптимізації зображень

Вибір формату зображення

Використовуйте формати зображень, які підтримуються всіма популярними браузерами і індексуються пошуковими системами:

• GIF - якщо необхідна анімація.
• PNG - якщо необхідно зберегти дрібні деталі з високою роздільною здатністю або потрібна прозорість фону.
• JPEG - для фото та інших зображень.

Існують і інші формати: WebP, JPEG XR - вони мають меншу вагу, але їх підтримують не всі браузери.

Оптимізуйте вага зображення

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

2. Зменшуйте вага зображення. Існує безліч сервісів для стиснення розміру зображення. В результаті їх застосування вдається значно знизити розмір файлу без істотної втрати якості.

Текстова оптимізація зображень

1. Намагайтеся, щоб картинка відповідала за змістом навколишнього її тексту.
2. Використовуйте в назві файлів ключові слова, наприклад printer-canon-pixma-ip7240.jpeg а не img_11432.jpeg
3. Заповнюйте атрибут alt (альтернативний текст) для тега <img>. Він використовується пошуковими роботами для правильної індексації та «розуміння» змісту зображень. Також, якщо з якихось причин зображення не буде завантажено, на його місці відображається альтернативний текст.
4. Атрибут title також важливий, його зміст відображається при наведенні курсору на зображення.
5. Заповнюйте атрибути alt і title у відповідності з ключовими словами, але не слід заповнювати їх однаково.
6. Додавайте унікальні зображення, пошукові системи вміють визначати оригінальність графіки і, як і в ситуації з текстом, вище цінують унікальні картинки.

Індексація зображень

Важливо, щоб картинки були доступні для індексування пошуковим роботам. Заборона на індексацію може бути встановлено відповідним правилом у файлі robots.txt.

Це може бути:

1. заборона до папки, в якій розташовуються зображення, наприклад Disallow: / bitrix / images;
2. заборона на індексування певного формату файлів Disallow: * .jpg.

Перевірити доступність зображень для індексації можна, скориставшись інструментом перевірки файлу robots.txt в сервісах Яндекс Вебмайстер і Google Search Console.

Для кращої індексації картинок в Google можна створити спеціальний sitemap.xml для зображень. Готовий файл images-sitemap.xml необхідно завантажити в Search Console в розділ «Сканування» - «Файли Sitemap»

Детальніше про формат файлів sitemap.xml для зображень можна прочитати в довідці Google .

Як виглядає код оптимізованої картинки

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

<Img src = "/ images / optimizatsiya-izobrazhenij.jpg" alt = "Приклад оптимізованого зображення" title = "SEO-оптимізація картинок" />

Що дає оптимізація картинок

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