SEO Фахівець

SEO оптимізація зображень: alt-тексти, WebP/AVIF та lazy loading

Редакція Spilno Agency | 13 Тра 2026 | 4 хв читання 21 переглядів
SEO оптимізація зображень: alt-тексти, WebP/AVIF та lazy loading

SEO оптимізація зображень — це комплекс технічних і контентних налаштувань, які допомагають пошуковим системам зрозуміти візуальний контент сторінки, прискорюють завантаження і підвищують позиції в пошуковій видачі. Правильно оптимізовані зображення дають трафік з Google Images, покращують Core Web Vitals і підвищують загальну видимість сторінки.

За даними Google, зображення з’являються приблизно в 20% пошукових запитів — це величезний трафіковий потенціал, який більшість сайтів втрачає через відсутність alt-текстів і застарілі формати файлів.

seo оптимізація зображень

Що таке SEO оптимізація зображень

SEO оптимізація зображень — це процес підготовки візуального контенту сторінки таким чином, щоб пошукові системи могли його правильно прочитати, проіндексувати та ранжувати. Вона охоплює: описові alt-тексти, сучасні формати файлів (WebP, AVIF), правильні назви файлів, стиснення без втрати якості, атрибути розмірів для запобігання CLS, responsive srcset, розмітку Schema.org та Image Sitemap.

Google не «бачить» зображення так само, як людина. Він аналізує текстові сигнали навколо зображення: alt-атрибут, назву файлу, заголовок сторінки, підпис під зображенням і структуровані дані. Саме тому правильно заповнені текстові метадані є основою видимості зображення в пошуку.

Alt-тексти: як правильно писати

Alt-текст (атрибут alt тегу <img>) виконує дві функції: доступність для людей з вадами зору (screen readers) і SEO (основний сигнал релевантності для пошукового бота).

Правила написання alt-тексту

Що не варто робити

Сучасні формати: WebP та AVIF

Формат файлу зображення напряму впливає на розмір файлу, швидкість завантаження та показники Core Web Vitals — а отже і на ранжування.

WebP

WebP — формат від Google (2010). Переваги: на 25–35% менший розмір ніж JPEG при однаковій якості; на 26% менший за PNG з прозорістю. Підтримується в 95%+ браузерів. Це мінімальний стандарт для будь-якого нового сайту.

AVIF

AVIF (AV1 Image File Format) — наступне покоління після WebP. Стиснення на 40–50% краще ніж JPEG. Підтримується Chrome 85+, Firefox 93+, Safari 16+. Для старих браузерів потрібен WebP-fallback.

Правильне використання через елемент <picture>

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Описовий alt-текст" width="800" height="600">
</picture>

Цей шаблон дає сучасним браузерам AVIF, тим що підтримують лише WebP — WebP, а старим — JPEG. Атрибут alt вказується лише у фінальному <img>.

Lazy Loading: правильна реалізація

Lazy loading — це відкладене завантаження зображень: браузер не завантажує їх до тих пір, поки вони не потрапляють у видиму область. Це прискорює час першого завантаження сторінки і покращує LCP.

Правильна реалізація

<img src="image.webp" alt="Описовий alt-текст" loading="lazy" width="800" height="600">

Атрибут loading="lazy" підтримується всіма сучасними браузерами та Googlebot. Завжди додавайте width і height разом із lazy loading — інакше це може спричинити CLS.

Важливо: НЕ використовуйте lazy loading для головного зображення

Зображення above the fold (перший екран сторінки, зазвичай hero image або обкладинка) повинне завантажуватися негайно. Для нього використовуйте loading="eager" або взагалі не вказуйте атрибут loading. Якщо Google виявить, що LCP-елемент має loading="lazy", це погіршить показник LCP та ранжування.

Стиснення та розмір файлу

Навіть у WebP-форматі великий файл буде гальмувати сторінку. Оптимальні інструменти:

Орієнтири: зображення статті — до 150 КБ; hero image — до 200 КБ; мініатюри — до 30 КБ. Перевіряйте через PageSpeed Insights або Lighthouse.

Правильне ім’я файлу

Назва файлу — ще один текстовий сигнал для Google. Погано: IMG_20240312_141523.jpg. Добре: seo-optymizatsiia-zobrazhen-alt-tekst.webp.

Атрибути width і height та запобігання CLS

Cumulative Layout Shift (CLS) — стрибки контенту при завантаженні — є Core Web Vitals метрикою, що прямо впливає на ранжування. Основна причина: браузер не знає розміри зображення до завантаження.

Рішення: завжди вказуйте width і height у пікселях:

<img src="image.webp" alt="Описовий alt-текст" width="1200" height="675" loading="lazy">

Сучасні браузери використовують ці атрибути для обчислення aspect ratio та резервування місця ще до завантаження файлу. Ціль CLS: менше 0.1 (Good).

srcset: адаптивні зображення

Атрибут srcset дозволяє браузеру вибрати оптимальний розмір зображення залежно від ширини екрана. Це зменшує трафік для мобільних пристроїв і прискорює завантаження.

<img
  src="image-800.webp"
  srcset="image-400.webp 400w, image-800.webp 800w, image-1200.webp 1200w"
  sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
  alt="Описовий alt-текст"
  width="1200" height="675"
>

Для WordPress: плагіни Smush або ShortPixel автоматично генерують srcset для всіх завантажених зображень.

Schema.org та Image Sitemap

Schema.org ImageObject

Розмітка ImageObject дозволяє передати Google структуровані метадані про зображення: автора, ліцензію, опис. Особливо важливо для Google Images і Rich Results.

<script type="application/ld+json">
{
  "@context": "https://schema.org",
  "@type": "ImageObject",
  "name": "SEO оптимізація зображень",
  "url": "https://example.com/images/seo-image.webp",
  "width": 1400,
  "height": 730,
  "author": { "@type": "Organization", "name": "Spilno Agency" }
}
</script>

Image Sitemap

Image Sitemap — це XML-розширення для sitemap.xml, яке перераховує всі зображення сайту. Особливо важливий для зображень, що завантажуються через JavaScript або lazy loading.

<url>
  <loc>https://example.com/page/</loc>
  <image:image>
    <image:loc>https://example.com/images/seo-image.webp</image:loc>
    <image:title>SEO оптимізація зображень</image:title>
  </image:image>
</url>

Чек-ліст SEO оптимізації зображень

SEO та GEO-орієнтація

Матеріал оптимізовано під семантичний кластер «SEO оптимізація зображень»: alt-тексти, формати WebP/AVIF, lazy loading, стиснення, srcset, CLS, Schema.org та Image Sitemap. GEO-сигнали: Spilno Agency, ринки України, Польщі та англомовних аудиторій. Стаття відповідає E-E-A-T: практичний досвід агенції, конкретні приклади коду та чек-ліст з 14 пунктів.

Поширені питання

Що таке alt-текст і навіщо він потрібен для SEO?

Alt-текст (атрибут alt тегу img) — це текстовий опис зображення, який читають пошукові роботи та скрінрідери для людей з порушеннями зору. Для SEO alt-текст є основним сигналом релевантності зображення: Google використовує його, щоб зрозуміти, що зображено на фото, і правильно ранжувати його в Google Images. Без alt-тексту зображення невидиме для пошукових систем.

Який формат зображення найкращий для SEO: WebP чи AVIF?

Обидва формати перевершують JPEG і PNG за стисненням при однаковій візуальній якості. WebP дає на 25–35% менший розмір, ніж JPEG, і підтримується всіма сучасними браузерами (95%+ охоплення). AVIF дає на 40–50% менший розмір, але ще не має 100% підтримки в усіх браузерах. Оптимальна стратегія: використовуйте елемент picture з AVIF як пріоритетним і WebP як fallback.

Що таке lazy loading і чи впливає він на SEO?

Lazy loading (відкладене завантаження) — атрибут loading=”lazy” для тегу img, який каже браузеру не завантажувати зображення до того, як вони з’являться в полі зору користувача. Це прискорює початкове завантаження сторінки і покращує LCP для above-the-fold контенту. Googlebot підтримує lazy loading, але критично важливо НЕ використовувати loading=”lazy” для головного зображення above fold — для нього потрібно loading=”eager” або відсутній атрибут.

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

Атрибути width і height у тегу img повідомляють браузеру розміри зображення ще до його завантаження. Це дозволяє браузеру зарезервувати місце в макеті заздалегідь і уникнути Cumulative Layout Shift (CLS) — стрибків контенту під час завантаження. CLS є одним з Core Web Vitals і впливає на ранжування. Завжди вказуйте width і height для всіх зображень, особливо above the fold.

Що таке Image Sitemap і чи він необхідний?

Image Sitemap — це XML-файл (або секція в основному sitemap.xml), яка перераховує URL всіх зображень на сайті з метаданими: заголовком, описом, ліцензією. Він допомагає Google швидше виявляти і індексувати зображення, особливо ті, що завантажуються через JavaScript або lazy loading. Image Sitemap особливо важливий для сайтів з великою кількістю зображень: e-commerce, фотопортфоліо, новинні сайти.

Потрібен аудит SEO оптимізації зображень на вашому сайті? Spilno Agency перевірить alt-тексти, формати, розміри та швидкість завантаження — і надасть план оптимізації.

Редакція Spilno Agency Spilno Agency Всі статті автора →
← Повернутися до блогу