Оптимізація зображень для SEO: alt-теги, WebP, стиснення та image sitemap

Оптимізація зображень — один із найшвидших способів покращити швидкість сайту і видимість у Google Images. Правильні alt-теги, WebP-формат, стиснення та image sitemap дають приріст трафіку на 15–25% без переписування контенту.

Чому зображення впливають на SEO

Зображення — це не просто візуальне доповнення до тексту. За даними Google, понад 22% пошукових запитів у США містять результати із зображеннями в основній видачі. Для категорій «товари», «рецепти», «інструкції» і «подорожі» ця частка ще вища.

Але головне — зображення прямо впливають на технічні показники, які Google враховує при ранжуванні. Неоптимізована картинка вагою 3 МБ може збільшити Largest Contentful Paint (LCP) на 1–2 секунди — а це вже критичний поріг для Core Web Vitals.

У нашій практиці оптимізація зображень на середньому інтернет-магазині з 5 000+ SKU давала такі результати:

• -40–60% — зменшення загального обсягу сторінок після переходу на WebP
• +18–25% — приріст трафіку з Google Images за 3 місяці після додавання alt-тегів
• -0.8–1.2 с — покращення LCP після налаштування відкладене завантаження і стиснення
• +12% — зростання конверсії завдяки швидшому завантаженню на мобільних

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

Зображення впливають одразу на кілька SEO-факторів: швидкість сторінки, релевантність контенту, доступність (accessibility) і можливість потрапити в Google Images — окремий пошуковий канал із власним трафіком.

Правильне іменування файлів зображень

Це найпростіший і найчастіше ігнорований крок. Google читає назву файлу ще до того, як обробляє alt-тег — вона є одним із сигналів для розуміння контексту зображення.

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

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

• Тільки латиниця — кирилиця в URL кодується і виглядає як %D0%B7%D0%BE%D0%B1%D1%80...
• Дефіси між словами, не підкреслення. Google читає дефіс як пробіл, підкреслення — ні
• Ключові слова в назві — але не спам, 2–4 слова достатньо
• Унікальні назви — не тисячі файлів product-image-1.jpg, product-image-2.jpg
• Малі літери — щоб уникнути проблем із регістром на Linux-серверах

Для великих каталогів, де кожен товар має унікальний артикул, можна використовувати формат category-productname-sku.webp — це і унікально, і несе семантику.

Організація папок

Структура папок теж має значення. Логічна ієрархія допомагає Google краще розуміти контекст:

• /images/products/shoes/running/ — краще, ніж /uploads/2024/03/
• /images/blog/seo-optimization/ — краще, ніж /media/p/1234/

Якщо ваш CMS автоматично генерує шляхи типу /wp-content/uploads/2024/03/IMG_001.jpg — варто налаштувати плагін або хук для автоперейменування при завантаженні.

Alt-теги і title зображень

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

Як писати alt-теги правильно

Хороший alt-текст — це точний, природний опис того, що зображено на картинці. Ключове слово має вписуватися органічно, а не вставлятися силою:

Довжина і ключові слова

Оптимальний alt-текст — 80–125 символів. Довший не шкодить SEO прямо, але частина тексту може обрізатися при відображенні скрінрідерами. Ключове слово варто використовувати один раз, природно — не повторювати на кожному зображенні сторінки.

Title зображення

Атрибут title у тегу <img> відображається як спливаюча підказка при наведенні курсора. Він майже не впливає на SEO — Google офіційно підтвердив, що title зображення є незначним сигналом. Проте він покращує UX: підписуйте кнопки, діаграми, скриншоти з поясненнями. Не дублюйте alt у title — якщо вже використовуєте, пишіть щось додаткове.

WebP, AVIF та вибір формату зображення

Вибір формату — це баланс між якістю, розміром файлу і сумісністю з браузерами. Сьогодні у 2026 році підтримка WebP досягла 97%+ серед браузерів, AVIF — близько 92%. Це означає, що більшість проєктів може безпечно переходити на сучасні формати.

Порівняння форматів

Як реалізувати WebP зі зворотною сумісністю

Замість простого тегу <img> використовуйте <picture> — він дозволяє браузеру самостійно обрати найкращий підтримуваний формат:

<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <img src="image.jpg" alt="Опис зображення" loading="lazy" width="800" height="600">
</picture>

Chrome і Firefox завантажать AVIF, якщо підтримують; якщо ні — WebP; якщо і WebP не підтримується — JPG. Це «прогресивне покращення» без шкоди для старих браузерів.

Стиснення зображень без втрат якості

Стиснення — найшвидший спосіб зменшити вагу сторінки. Більшість зображень, завантажених «як є» з фотоапарату або телефону, важать 3–8 МБ. Після правильного стиснення та конвертації в WebP — 80–300 КБ без помітної різниці у якості.

Два типи стиснення

• Без втрат (lossless) — видаляє службові метадані та оптимізує стиснення без зміни пікселів. Дає 5–20% зменшення. Ідеально для PNG і коли якість критична.
• Із втратами (lossy) — зменшує деталізацію непомітним для ока чином. Дає 40–80% зменшення. Стандарт для фотографій у вебі.

Цільові розміри файлів

Орієнтири, до яких варто прагнути при оптимізації:

Метадані EXIF — що видаляти

Кожне фото з телефону або фотоапарату містить EXIF-метадані: GPS-координати, дату знімання, модель камери, налаштування ISO. Ці дані збільшують розмір файлу на 10–50 КБ і не несуть жодної SEO-цінності. Інструменти стиснення зазвичай видаляють їх автоматично — переконайтеся, що ця опція увімкнена.

Відкладене завантаження і швидкість завантаження

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

Нативний відкладене завантаження

З 2020 року всі сучасні браузери підтримують нативний відкладене завантаження. Реалізація — одним атрибутом:

<img src="product.webp" alt="Назва товару" loading="lazy" width="600" height="400">

Fetchpriority для LCP-зображення

Для головного зображення сторінки (яке, найімовірніше, є LCP-елементом) варто зробити навпаки — підвищити пріоритет завантаження:

<img src="hero-banner.webp" alt="Головний банер" fetchpriority="high" width="1200" height="600">

Це підказка браузеру завантажити зображення якнайшвидше, ще до обробки решти ресурсів сторінки. У поєднанні з правильним стисненням це дає відчутне покращення LCP.

Вплив відкладене завантаження на SEO

Googlebot підтримує відкладене завантаження і коректно індексує зображення з цим атрибутом. Головне — не ховати зображення за JavaScript-логікою, яка вимагає взаємодії користувача: нескінченний скрол без SSR, кнопки «завантажити ще» без статичного HTML. У таких випадках Googlebot може не дочекатися виконання скрипту.

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

Атрибут srcset дозволяє надати браузеру кілька варіантів одного зображення — для різних розмірів екрана і щільності пікселів (retina-дисплеї). Браузер сам обирає оптимальний варіант.

Srcset за шириною (w дескриптор)

Це найпоширеніший підхід для адаптивних зображень у контенті:

<img
  srcset="product-400.webp 400w,
          product-800.webp 800w,
          product-1200.webp 1200w"
  sizes="(max-width: 600px) 400px,
         (max-width: 1000px) 800px,
         1200px"
  src="product-800.webp"
  alt="Назва товару"
  loading="lazy"
  width="800"
  height="600">

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

Srcset за щільністю пікселів (x дескриптор)

Для фіксованих за розміром зображень (іконки, логотипи, аватари) простіше використовувати x-дескриптор:

<img
  srcset="logo.webp 1x, logo@2x.webp 2x, logo@3x.webp 3x"
  src="logo.webp"
  alt="SEO-Factory логотип"
  width="120"
  height="40">

На retina-дисплеях завантажиться версія @2x, на звичайних — базова. Це запобігає розмитості і водночас не перевантажує звичайні пристрої великими файлами.

Ми тестували вплив srcset на показники Core Web Vitals на кількох клієнтських сайтах. Після правильного налаштування медіанний LCP покращувався на 0.4–0.7 секунди на мобільних пристроях — суттєво, якщо стартовий показник був 3–4 секунди.

Image sitemap: як і навіщо

Image sitemap — це розширення стандартного XML sitemap або окремий файл, що повідомляє Google про зображення на вашому сайті. Він особливо важливий у двох випадках:

• Зображення завантажуються через JavaScript (React, Vue, Angular) і Googlebot може їх не бачити при першому скануванні
• Зображення є основним контентом сторінки (портфоліо, галерея, інтернет-магазин із великим каталогом)

Формат image sitemap

Розширення image sitemap додається до стандартних записів у sitemap.xml:

<?xml version="1.0" encoding="UTF-8"?>
<urlset xmlns="http://www.sitemaps.org/schemas/sitemap/0.9"
        xmlns:image="http://www.google.com/schemas/sitemap-image/1.1">
  <url>
    <loc>https://example.com/products/shoes/</loc>
    <image:image>
      <image:loc>https://example.com/images/shoes-nike-air-max.webp</image:loc>
      <image:caption>Nike Air Max 270 чоловічі кросівки</image:caption>
      <image:title>Nike Air Max 270</image:title>
    </image:image>
  </url>
</urlset>

Що додавати в image sitemap

Не обов'язково додавати абсолютно всі зображення — зосередьтеся на найважливіших:

• Товарні зображення — особливо якщо вони унікальні і можуть генерувати трафік із Google Images
• Зображення статей і блогу — featured images і інфографіки
• Зображення, завантажені через JS — пріоритет для ботів, які можуть не рендерити скрипти повністю

Після створення або оновлення image sitemap — обов'язково вкажіть його шлях у Google Search Console і надішліть на індексацію. Зазвичай Google обробляє нові зображення з sitemap протягом 1–4 тижнів.

Інструменти для оптимізації зображень

Правильний набір інструментів значно пришвидшує роботу. Ось що ми використовуємо і рекомендуємо:

TinyPNG / TinyJPG

Найпростіший онлайн-інструмент для стиснення PNG і JPEG. Використовує lossy-алгоритм, але візуально результат практично не відрізняється від оригіналу. Безкоштовно до 20 зображень за раз, є API для автоматизації. Мінус — не конвертує у WebP.

Squoosh (squoosh.app)

Безкоштовний інструмент від Google. Підтримує всі сучасні формати: WebP, AVIF, MozJPEG, OxiPNG. Є режим порівняння до/після — зручно налаштовувати баланс якості і розміру вручну. Найкращий вибір для разового стиснення з ручним контролем.

ImageOptim (macOS) / FileOptimizer (Windows)

Десктопні інструменти для пакетного стиснення без втрат. ImageOptim автоматично видаляє EXIF-метадані. Підходять для обробки великих обсягів зображень перед завантаженням на сайт.

Google PageSpeed Insights

Показує конкретні зображення, які потребують оптимізації, разом із потенційним виграшем у байтах і секундах. Вкладка «Opportunities» — перше місце, куди варто дивитися при аналізі сторінки. Інтегрований у комплексне SEO-просування.

Інструменти автоматизації в CMS

Для WordPress: плагіни Imagify, ShortPixel або Smush автоматично стискають і конвертують зображення при завантаженні. Для OpenCart і кастомних CMS — інтеграція з API TinyPNG або власний конвертер на сервері (ImageMagick, libvips).

CDN і кешування зображень

Навіть ідеально оптимізоване зображення завантажуватиметься повільно, якщо сервер знаходиться далеко від користувача. CDN (Content Delivery Network) — це мережа серверів по всьому світу, які зберігають копії ваших статичних файлів і роздають їх із найближчої до відвідувача точки.

Що дає CDN для зображень

Основні переваги використання CDN саме для зображень:

• Географічна швидкість — зображення роздаються з вузла за 20–50 мс від користувача замість 200–500 мс із центрального сервера
• Розвантаження сервера — 70–90% трафіку зображень іде через CDN, не навантажуючи основний хостинг
• Автоматична конвертація — сучасні CDN (Cloudflare, BunnyCDN, Imgix) можуть автоматично віддавати WebP/AVIF залежно від браузера без змін у коді
• Lazy resize — деякі CDN змінюють розмір зображень «на льоту» за параметрами в URL: image.cdn.com/photo.jpg?w=400&f=webp

HTTP-заголовки кешування

Для зображень, що рідко змінюються (логотип, іконки, фото продуктів), встановлюйте тривалий Cache-Control:

Cache-Control: public, max-age=31536000, immutable

Це дозволяє браузеру кешувати зображення на рік. Для оновлення достатньо змінити ім'я файлу або додати хеш-версію (logo.v2.webp). Якщо ви часто оновлюєте зображення — використовуйте max-age=86400 (1 день) або max-age=604800 (тиждень).

Структуровані дані для зображень

Окрім image sitemap, зображення можна розмітити за допомогою schema.org, щоб збільшити шанси на появу в розширених результатах пошуку — збагачені результати з превью картинки.

ImageObject у JSON-LD

Для сторінок товарів, рецептів, статей додавайте ImageObject всередині відповідної схеми. Приклад для статті блогу:

{
  "@context": "https://schema.org",
  "@type": "Article",
  "headline": "Оптимізація зображень для SEO",
  "image": {
    "@type": "ImageObject",
    "url": "https://example.com/images/seo-image-optimization.webp",
    "width": 1200,
    "height": 630,
    "caption": "Схема оптимізації зображень для SEO"
  }
}

Атрибути, які варто вказати у ImageObject:

• url — абсолютна URL зображення
• width / height — розміри в пікселях
• caption — підпис (аналог alt для структурованих даних)
• contentUrl — якщо зображення знаходиться на CDN, відмінному від основного домену
• license — URL ліцензії (для тих, хто хоче брати участь у Google Image licensing)

Open Graph і Twitter Cards

Хоча OG-теги не впливають на ранжування в пошуку, вони визначають, яке зображення показується при поширенні сторінки в соцмережах. Правильне зображення в OG підвищує CTR при шеях, що непрямо приносить трафік:

<meta property="og:image" content="https://example.com/images/article-cover.webp">
<meta property="og:image:width" content="1200">
<meta property="og:image:height" content="630">
<meta property="og:image:alt" content="Оптимізація зображень для SEO">

Оптимальний розмір OG-зображення — 1200×630 пікселів. Якщо зображення менше 600 пікселів по ширині, Facebook і Telegram покажуть його як маленьку мініатюру поруч із текстом, а не великий банер.

Аудит зображень на існуючому сайті

Якщо сайт вже існує і має сотні чи тисячі сторінок — з чого починати оптимізацію? Важливо пріоритизувати, інакше завдання здається нескінченним.

Крок 1: Знайдіть найважчі зображення

Запустіть Screaming Frog SEO Spider із увімкненим модулем Images. Він покаже всі зображення на сайті з їхнім розміром і сторінками, де вони використовуються. Фільтруйте за розміром — починайте з файлів понад 500 КБ.

Альтернатива — Google PageSpeed Insights для ключових сторінок: головної, категорій, топових лендингів. Секція «Serve images in next-gen formats» і «Properly size images» покажуть найбільший потенційний виграш.

Крок 2: Перевірте alt-теги масово

Screaming Frog також видає звіт по alt-тегах: Images без alt, зображення з порожнім alt="" (декоративні), зображення з надто довгим alt. Це дозволяє побачити масштаб проблеми без ручної перевірки кожної сторінки.

Для великих інтернет-магазинів на OpenCart або WooCommerce — перевірте базу даних: чи є у всіх товарів заповнені поля image_description або alt_text. Масова генерація alt із назви товару + категорії — прийнятна стартова точка, якщо ресурсів на ручне написання немає.

Крок 3: Перевірте Core Web Vitals у Search Console

Google Search Console → Core Web Vitals показує, які сторінки мають проблеми з LCP. Якщо LCP-елементом є зображення (а для більшості сторінок — так і є), саме його оптимізація дасть найшвидший результат у Core Web Vitals.

Крок 4: Налаштуйте процеси на майбутнє

Аудит виправляє накопичені проблеми, але не запобігає новим. Щоб не повторювати аудит кожні кілька місяців, впровадьте правила на рівні процесів:

• Автоматична конвертація в WebP при завантаженні в CMS
• Обов'язкове поле alt у формі завантаження зображення
• Попередження при завантаженні файлів понад 500 КБ
• Автоматичне генерування мініатюр різних розмірів для srcset

У нашій практиці клієнти, які впровадили автоматичну конвертацію в WebP на рівні CMS, через 6 місяців мали медіанний розмір сторінки на 38% менший, ніж конкуренти в тій же ніші — без будь-яких подальших ручних зусиль.

Зображення для мобільних: особливості

Google використовує mobile-first indexing — сканує і оцінює сайт насамперед через мобільну версію. Це означає, що оптимізація зображень для мобільних пристроїв є пріоритетною, навіть якщо більшість ваших конверсій відбувається на десктопі.

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

Найчастіші проблеми, які ми виявляємо при мобільних аудитах:

• Відсутність srcset — мобільний браузер завантажує десктопну версію зображення 1200px замість 400px, витрачаючи зайвий трафік і час
• Занадто великі hero-зображення на мобільних — full-width банер 1920px на екрані 390px: завантажується 800 КБ, відображається 100 КБ
• Відсутні розміри — без width/height браузер не може зарезервувати місце, CLS зростає при завантаженні зображень
• Autoplay GIF або відео без muted — на мобільних iOS такий контент не програється автоматично і залишає порожній блок

Art direction через <picture>

Іноді для мобільних потрібне не просто менше зображення, а інше — обрізане, вертикальне, з більш крупним об'єктом. Це називається art direction і реалізується через media у <picture>:

<picture>
  <source media="(max-width: 600px)"
          srcset="hero-mobile.webp">
  <source media="(min-width: 601px)"
          srcset="hero-desktop.webp">
  <img src="hero-desktop.webp" alt="Головний банер" width="1200" height="600">
</picture>

Мобільна версія hero-mobile.webp може бути вертикальною 600×800 і сфокусованою на центральному об'єкті — тоді як десктопна горизонтальна 1200×600 показує ширший контекст. Якість і сприйняття на обох пристроях будуть кращими, ніж при автоматичному обрізуванні CSS.

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

Пройдіться по кожному пункту перед публікацією нової сторінки або після аудиту існуючих:

• ✓ Іменування файлів — латиниця, дефіси, ключові слова в назві
• ✓ Формат — WebP або AVIF для фото, SVG для векторної графіки, PNG тільки де потрібна прозорість
• ✓ Стиснення — розмір відповідає рекомендованим значенням для типу зображення
• ✓ Alt-теги — кожне значуще зображення має описовий alt з ключовим словом; декоративні мають alt=""
• ✓ Розміри — вказані width і height для кожного <img>
• ✓ Відкладене завантаження — loading="lazy" для зображень нижче першого екрана
• ✓ Fetchpriority — fetchpriority="high" для LCP-зображення
• ✓ Srcset — адаптивні версії для зображень різного розміру
• ✓ Picture element — WebP/AVIF + JPEG fallback через <picture>
• ✓ Image sitemap — товарні та контентні зображення включені
• ✓ EXIF видалено — метадані очищено при стисненні
• ✓ CDN — зображення роздаються через CDN, якщо сайт має міжнародну аудиторію

Оптимізація зображень — це не разова робота, а постійний процес. Впровадження правил на рівні CMS-процесів (автоматична конвертація при завантаженні, обов'язкові поля alt у редакторі) дозволяє підтримувати якість без ручної перевірки кожного файлу. Детальніше про технічну оптимізацію сайту — в нашому гайді по технічному SEO-аудиту.

Пріоритизація за впливом

Якщо ресурсів обмаль і потрібно вибирати, куди вкласти час першочергово, орієнтуйтесь на цю матрицю:

Стиснення і alt-теги дають найшвидший ROI — їх варто зробити першими. Перехід на WebP та srcset потребує більше технічної роботи, але дає стабільний приріст швидкості. Структуровані дані — фінальний штрих, який збільшує видимість у розширених результатах.

Часті запитання

Чи обов'язково використовувати WebP-формат для SEO?

WebP не є обов'язковим, але він дає значну перевагу: файли на 25–35% менші за JPEG при тій самій якості. Google рекомендує сучасні формати — WebP або AVIF — для кращого показника LCP і Core Web Vitals. Якщо ваш CMS або CDN підтримує конвертацію — варто переходити.

Скільки символів повинен містити alt-тег?

Оптимальна довжина alt-тексту — 80–125 символів. Він має точно описувати зміст зображення і природно містити ключове слово. Уникайте переспам ключовими словами: alt="купити телефон дешево київ" — це спам, а не опис.

Чи потрібен image sitemap для невеликого сайту?

Image sitemap корисний для будь-якого сайту, де зображення є важливим контентом (інтернет-магазин, портфоліо, блог з ілюстраціями). Він дозволяє Google дізнатися про зображення, які завантажуються через JS або CSS, і прискорює їх індексацію.

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

Використовуйте латиницю, дефіси між словами, ключові слова в назві. Наприклад: seo-image-optimization-guide.webp замість IMG_20240312.jpg. Це допомагає Google розуміти контекст зображення ще до обробки alt-тегу.

Питання про Оптимізація зображень для SEO