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

Візуальний контент — це не лише приємна картинка. Без нього SEO-оптимізація може багато втратити. І ось чому.

Чи важливо оптимізувати картинки

У зв’язку з величезною кількістю інформації, яку ми отримуємо звідусіль, люди рідше повністю читають статті, вони скоріше «сканують» сторінку в пошуках цікавої інформації, а особливо картинок. Саме тому зображення на сайті не тільки повинні бути, але й відрізнятися високою якістю та швидким завантаженням.

Основні вимоги до створення картинок

Усього можна виділити 4 основні вимоги до створення картинок.

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

Найкраще використовувати такі формати:

• JPEG — для звичайних фото;
• PNG — для графіки, створеної дизайнером;
• SVG — для векторної графіки.

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

Якість

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

1. Чіткою.
2. Різкою.
3. Відповідала контенту.

Розмір та вага зображень

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

Розміщення картинок

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

Як зменшити вагу зображення без втрати якості

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

Десктопні програми

Серед найпопулярніших програм для зменшення фото:

• Caesium;
• Light Image Resizer;
• Adobe Photoshop.

Кожна утиліта дозволяє скоротити розмір картинки без втрати якості.

Мобільні додатки

Зменшити розмір зображення можна за допомогою мобільних гаджетів. Наприклад, використовуючи такі програми, як Image Compressor, Pictools, Photo Compress 2.0. З їх допомогою легко та просто стиснути, обрізати та змінити розмір картинок.

Онлайн-сервіси

Для зменшення фотографій необов’язково встановлювати спеціальні програми або використовувати гаджети. Можна використовувати й онлайн-сервіси, які за якістю не поступаються описаним вище, зокрема Iloveimg, Compressor, Resize Pixel. Процес стиснення зображення в онлайн-сервісі займе декілька хвилин. Достатньо лише вибрати необхідний файл та запустити процес стиснення.

Як оптимізувати картинки на сторінці

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

Назва файлів

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

1. Використовуйте латиницю, оскільки багато CMS не розуміють кирилицю.
2. Замість дефісів ставте пробіл, він читається пошуковою системою як дефіс.
3. Назва картинки має бути релевантна її змісту.

Зберігання файлів

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

Розташування файлів

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

Беклінки

Беклінки — своєрідні анкори посилань на зображення із зовнішніх ресурсів, які враховують пошукові системи. Головне вимоги до беклінків — текст анкора та зміст картинки повинні збігатися.

Метатеги для зображень

Метатеги використовують для опису того, що знаходиться на зображенні, особливо важливу роль відіграє атрибут Alt. Тому його варто не лише уважно заповнити, а й додати ключові слова. Для оптимізації корисно заповнити метатег title. Це текст, який з’явиться перед очима людини, коли вона наведе курсор на картинку.

Карта зображень на сайті

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

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

Завдяки їй зображення можна розділити на категорії. Це сприяє автоматичній оптимізації картинки та допоможе їй зайняти верхні позиції у пошуковій видачі.

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

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

Де взяти унікальні картинки для сайту

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

Пошук Google

Найпростіший спосіб — використовувати пошук за картинками Google. Головне, вибрати фільтр Creative Commons — його автори дозволяють використання картинок із посиланням на джерело.

Шукайте картинки у безкоштовних фотобанках та покращуйте їх за допомогою фоторедакторів

Ще один спосіб отримати нове зображення — знайти потрібну картинку на одному з безкоштовних стоків, а потім змінити її за допомогою фоторедакторів, наприклад, Canva.

Reddit

Всі користувачі Reddit автоматично погоджуються, що контент, який вони розміщують, є публічним. Щоб використовувати Reddit як фотобанк, необхідно:

1. Встановити розширення для браузера під назвою Reddit Enhancement Suite.
2. Відкрити сторінку та знайти потрібний розділ.
3. Встановити критерії сортування.
4. Вибрати картинку, що сподобалася.

Висновки

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