Якісні, відповідні за змістом зображення завжди вдало ілюструють текст. Але окрім роботи «на читача», вони також виконують й іншу функцію – покращують рейтинг сайту в пошуковій видачі, якщо цьому не заважають погана якість чи повільне завантаження. Для цього картинки треба оптимізувати.
І нехай Google навчився розпізнавати зображення, оптимізація залишається актуальною для всіх ваших світлин та скріншотів на сторінках сайту. Поговоримо про те, що таке оптимізація світлин, як допомогти пошукачам правильно ідентифікувати вміст зображень на вашому веб-ресурсі.
1. Основні вимоги до зображень
Пошукові системи аналізують контент за декількома критеріями, які допомагають досягти релевантності запитів:
- висока якість;
- швидке завантаження;
- інформативність.
Висока якість зображень призначена для комфорту користувача. Добре, коли малюнки великі та чіткі, якщо мова про світлини– то з високою роздільною здатністю. Проте вони не повинні бути «важкими», оскільки погано завантажуватимуться, та зі сторінки захочеться піти – це вже вплине на ранжування. Варто скористатися спеціальними інструментами, які дозволяють стискати картинки без втрати якості та створювати відповідний розмір зображень. Про них йтиметься у розділі про редагування.
Для оптимізації як мобільної, так і десктопної версії сайту дуже важливим є й швидке завантаження картинок. Розміри файлів різних форматів дуже відрізняються. Google індексує зображення типів JPEG, PNG, BMP, GIF, WebP та SVG.
Вони використовуються залежно від того, чим ви ілюструєте контент:
- для світлин оптимальний вибір – JPEG;
- для картинок або скріншотів – PNG (графічні зображення, картинки з текстом) або SVG (векторні малюнки);
- GIF підійде для зображень, що рухаються;
- WebP мало важить, але його підтримують не всі браузери.
У будь-якому випадку всі ці формати можна конвертувати з одного в інший.
Якщо змінити розмір зображень відповідно до масштабів сторінки, завантаживши його в максимальній роздільній здатності, вашому браузеру не доведеться підганяти його під розмір гаджета та уповільнювати роботу.
Знадобиться оптимізація завантаження картинок на сайті. Спочатку перевірте місце зберігання. Для того, щоб зображення коректно відображалися на вашому ресурсі, їх краще зберігати на своєму домені або піддомені.
Рис. 1 – Бібліотека файлів в адмінці сайту PPCSEO
Інакше, використовуючи пошук за зображеннями, користувачі можуть переходити на адресу ресурсу, де розміщена картинка, а чи не контент. Це допоможе перевірити пошук в Google через зображення або сервіс Tineye .
Рис. 2 – Перевірка прев’ю до статті Інсталендинг: стильно про ваш бренд
Контент має бути не лише якісним та красивим, а й унікальним. Це правило відноситься, зокрема, до зображень. Пошукові системи шукають різноманітний матеріал у видачі, тому не полінуйтеся змінити щось у картинці: фон, кількість зображених персонажів.
Останнім пунктом можна назвати інформативність зображення. Важливою є відповідність картинки опису – вона має нести практичний сенс і підтверджувати наочність того, що описано у контенті.
Рис. 3 – Приклад слайдеру з трояндами блогу про декоративні рослини Florium
Якщо текст містить абстрактну чи неточну інформацію, то у цьому малюнку чи світлині немає сенсу.
А ось на фактори поведінки сайту впливає і привабливість картинок. Це означає, що зображення приємно розглядати, кадр добре скомпонований, колірна гама ненав’язлива. Користувачі частіше заходитимуть на сторінки з такими зображеннями. Якщо йдеться про товар, то він розміщений на нейтральному фоні крупним планом, видно його відмінності від інших позицій.
Рис. 4 – Приклад хорошого зображення товару у магазині Koni.ua
2. Шукаємо та редагуємо картинки
Пошук хороших світлин та малюнків нескладний. Ви можете зробити це:
- через пошук Google за зображеннями (зайдіть у “Права на використання”, за замовчуванням галочка стоїть на “Усі”, виставте фільтр “Ліцензії Creative Commons”);
Рис. 5 – Фільтри зображень Google за ліцензіями
Рис. 6 – Пошук рослини афеландра за зображеннями
- зайшовши на Rеddit, оскільки його користувачі заздалегідь дають згоду використання опублікованих ними матеріалів. Знадобиться лише відсортувати вибірку за розділом та датою, категорії знаходяться праворуч;
Рис. 7 – Зображення користувачів на сайті Rеddit
- завантаживши вихідний шаблон картинки у безкоштовному фотобанку або фотостоку. Серед найпопулярніших стоків для світлин лідирують Free images, Freepik, Pixabay.
Рис. 8 – Інтуїтивно зрозумілий інтерфейс Freepik
Приступаємо до редагування. Додати візуальну привабливість, кадрувати та покращити зображення іншими способами легко у графічних редакторах. Окрім відомого фотошопу, популярним інструментом стала Canva. Безліч її елементів та макетів є безкоштовними.
Рис. 9 – Робота із зображенням у програмі Canva
У цьому графічному дизайнері, як і в інших програмах, можна накладати ефекти, використовувати текстову анімацію, обрізати та кадрувати світлини.
3. Оптимізація зображень для сайту
Що слід пам’ятати про оптимізацію картинок, щоб їх помітили пошукові системи? Зрозуміло, зображення повинні розміщуватись у тексті, який відповідає запиту. Пов’язаність за змістом – очевидний критерій добре підібраної картинки.
Рис. 10 – Світлина гурту на офіційному сайті
Прописуйте латинськими літерами короткий відповідний опис у назві файлу із зображенням. У нього важливо вставляти релевантні ключові слова. Але при цьому вони мають бути максимально простими. Назва зображення допомагає передати зміст зображення користувачам сайту. Наприклад, devushka_hippi_v_shliape.jpg., а не 052.jpg:
Рис. 11 – Приклад статті з картинками без назв
Можна називати файл рідною мовою – тоді при заливці на сайт назва автоматично транслітерується. Можна виконати транслітерацію онлайн (наприклад, у сервісі translit-online). А можна писати назву одразу англійською. Вибирайте зручний вам варіант.
Щоб оптимізувати растрові зображення, що складаються з пікселів, ми максимально збережемо їхню якість. Для цього доведеться:
- або масштабувати зображення, відсікаючи його зайві пікселі;
- або знизити глибину кольору до палітри 256 кольорів, що знижує тяжкість вдвічі.
Визначити вагу файлу допоможе універсальна формула: Довжина x Ширина x 4 байти (вага кожного пікселя).
Якщо потрібно оптимізувати векторні зображення, які зазвичай збережені у форматі SVG, ми зменшуємо їх розмір та очищаємо від прихованих елементів.
Зменшити вагу без втрати якості можна за допомогою програм:
1. Compressor – зменшує вагу зображення на 90%. Має три ступеня стиснення: із втратою якості, без втрати якості та ручні налаштування. Є платна та безкоштовна версії. Можна вивантажувати зображення пакетом як на диск комп’ютеру, так і у сховище хмари.
Рис. 12 – Програма Compressor
2. Kraken – можна змінювати розмір малюнків та світлин, користуватися пакетним перетворенням файлів. Є функція оптимізації картинок, архів зі стислими малюнками легко отримати, ввівши url сайту і трохи зачекавши.
Рис. 13 – Програма Kraken
3. Imagify – унікальний тим, що за його допомогою можна оптимізувати всі малюнки на веб-ресурсі одночасно. Дуже швидкий, підтримує формати JPG, PNG, PDF та GIF. Може переводити файли у форматі WebP в інші.
Рис. 14 – Програма Imagify
Стиснути картинки на сервері допоможе Google Pagespeed Insights. Цей інструмент вимірює продуктивність веб-ресурсу і може давати поради щодо її покращення.
Рис. 15 – Програма Google Pagespeed Insights
Наступний етап – прописування метаданих до зображень.
Для оптимізації знадобиться метатег Alt (альтернативний текст). Він не тільки пояснює користувачам, що відображено на картинці, якщо зображення не завантажилося, але й допомагає пошуковикам правильно індексувати зображення. Це найменування того, що зображено на світлині або малюнку, з описом у 3-4 слова.
Допустимий розмір альту – 125 символів, тому він має бути одночасно інформативним та ємним, містити доречну кількість ключових слів. Наприклад, для картинки нижче логічнішим був би alt=”дві вівчарки біжать з ціпком”, ніж зазначений, що продублював назву статті “Повідці, намордники та штрафи: чому настануть нові часи”.
Рис. 16 – Приклад невдалого метатегу alt у статті
Якщо йдеться про інтернет-магазин, де заповнюються картки товарів/послуг, тоді доцільно вказати назву та розпізнавальну ознаку (найменування, бренд, колір або розмір). Це допоможе пошуковим системам ідентифікувати зображення продукту. Нижче нехай і не вдалий (напис “фото 1 Мотокуртки” там явно зайвий), але приклад альту для картинки товару.
Рис. 17 – Приклад метатегу для товару мотомагазину
У полі Title прописуємо назву світлини чи малюнку. Саме воно висвітиться користувачу, який наведе курсором на картинку.
Рис. 18 – Приклад Title для зображення у блозі салону антикварних меблів
В ідеалі поля Title та Alt варто прописувати різними, але краще заповнити їх однаково, ніж залишити порожніми. Ключові слова, які можуть помітити пошукові роботи, бажано залишити у підписах до картинок.
Існує розмітка OpenGraph, яка допомагає просувати матеріали за допомогою соціальних мереж. Вона підвищить клікабельність посилань на сайт.
Рис. 19 – Приклад зображення посту з мікророзміткою
Так, за наявності цієї розмітки пост автоматично виглядає акуратнішим – зображення заливається в потрібному розмірі, доповнене посиланням та заголовком. Привабливі прев’ю будуть нести трафік із соцмереж. Найпростіше використовувати плагіни для CMS вашого сайту.
Якщо будуєте зовнішні анкорні посилання на них, текст повинен збігатися з вмістом зображення:
<a href=”https://example.com/ interior/home-design.jpg”>Світлина дизайну інтер’єру дому</a>
ВИСНОВКИ
Таким чином, як виглядає чек-лист оптимізації зображень на сайті:
1. При пошуку та обробці картинок пам’ятаємо, що контент створюється для користувача, але повинен відповідати вимогам пошукових систем, інакше ваші зображення ніхто не знайде.
2. Хороша якість, швидке завантаження, візуальна привабливість та передача сенсу – ті стовпи, на яких тримається ілюстративність контенту.
3. За потреби – редагуємо (зменшуємо вагу, надаємо унікальність, зберігаємо правильний формат картинок для сайту). Для просування контенту через соцмережі встановлюємо на сайт OpenGraph.
4. Оптимізуємо зображення, заповнивши метатеги Title та Alt для кожного з них. У полі Title вкажемо назву малюнку або світлини, у полі Alt, відповідно, короткий опис.
Якщо ви виконаєте ці рекомендації, зображення на вашому сайті не тільки запропонують користувачам різноманітний контент, але й однозначно вплинуть на трафік позитивно.
