Оптимізація зображень для SEO: покроковий гайд із завданнями
Зображення — це не лише про красу сайту, а й про SEO. Правильно оптимізовані картинки допомагають швидше завантажувати сторінки, покращують юзабіліті та навіть приводять додатковий трафік із Google Images. Багато новачків недооцінюють цю частину роботи, але на практиці саме зображення можуть підняти позиції сайту або, навпаки, “вбити” швидкість.
⸻
Крок 1. Використовуйте правильний формат зображень
👉 Основні формати:
• JPEG — для фото, де важлива якість і стиснення.
• PNG — для картинок із прозорим фоном, логотипів, іконок.
• WebP — сучасний формат, який дає якість PNG і вагу JPEG (оптимальний для більшості сайтів).
⚠️ Якщо завантажуєте фото з телефону без оптимізації — воно може важити 5–10 МБ, що критично для швидкості.
✅ Завдання: візьміть 3 зображення зі свого сайту й збережіть їх у форматі WebP через Squoosh.
⸻
Крок 2. Зменшуйте вагу зображень
Google прямо каже: швидкість сайту впливає на ранжування. Картинки з вагою кілька мегабайт серйозно сповільнюють завантаження.
👉 Інструменти для стиснення:
• TinyPNG, ILoveIMG, Squoosh — онлайн-оптимізація.
• ImageOptim (Mac) або Caesium (Windows) — для пакетної обробки.
⚠️ Пам’ятайте: зображення має важити не більше 200–300 КБ (винятки — великі банери).
✅ Завдання: перевірте головну сторінку сайту через PageSpeed Insights і знайдіть картинки, які потрібно стиснути.
⸻
Крок 3. Правильно називайте файли
Пошуковики читають не саму картинку, а назву файлу.
👉 Приклади:
• Погано: IMG12345.jpg.
• Добре: bukiet-rozovyh-tyulpaniv.jpg.
⚠️ Використовуйте латиницю, дефіси та ключові слова, але не робіть “keyword stuffing”.
✅ Завдання: перейменуйте 5 картинок на сайті так, щоб назви відповідали змісту.
⸻
Крок 4. Додавайте атрибути alt і title
• alt — опис картинки для пошуковиків і користувачів, якщо зображення не завантажилося.
• title — підказка, яка з’являється при наведенні курсору.
👉 Приклади:
⚠️ Alt має бути коротким (5–10 слів), описовим і природним.
✅ Завдання: відкрийте одну сторінку товару й додайте alt-описи для всіх зображень.
⸻
Крок 5. Використовуйте адаптивні зображення
На мобільних пристроях не потрібні картинки у 2000px шириною. Тому варто додавати кілька версій одного зображення.
👉 Приклад із тегом srcset:
⚠️ Це підвищує швидкість завантаження на мобільних і економить трафік.
✅ Завдання: створіть для одного банера 2–3 версії (400px, 800px, 1200px) та додайте srcset.
⸻
Крок 6. Використовуйте lazy-loading
Lazy-loading дозволяє завантажувати картинки тільки тоді, коли користувач їх бачить (а не всі одразу).
👉 Приклад:
✅ Завдання: перевірте, чи є у вашому коді loading="lazy". Якщо ні — додайте для всіх картинок у статтях.
⸻
Крок 7. Створюйте зображення для Open Graph та мікророзмітки
Щоб сторінки гарно виглядали у соцмережах і месенджерах, варто додавати OG-зображення
👉 Приклад:
✅ Завдання: зробіть одне окреме зображення 1200×630 px для прев’ю статті в блозі.
⸻
