SEO та просуванняБлог

Вплив розміру і ваги фотографії на SEO

Posted InBiz
Ілюстрація впливу розміру та ваги фотографій на SEO: іконка зображення, лічильник швидкості, знак відсотка та лупа зі зростаючим графіком на блакитному фоні.

Коротко: великі та «важкі» зображення сповільнюють сторінку, погіршують Core Web Vitals, знижують позиції та конверсії. Правильні формати, стиснення та srcset вирішують 80% проблем.

Чому розмір і вага фото критично важливі для SEO

  • Швидкість завантаження. Зображення — найбільший «багаж» сторінки. Кожні 100–200 КБ можуть відчутно сповільнювати перший рендер.
  • Рейтинги в пошуку. Google враховує досвід користувача та сигнали швидкодії. Оптимізовані фото покращують позиції.
  • Індексація в Google Images. Легкі, семантично описані зображення з коректними alt та width/height краще індексуються.
  • Конверсії. Швидші сторінки = менше відмов і більше заявок/продажів.

На які метрики це впливає (Core Web Vitals)

  • LCP (Largest Contentful Paint): часто найбільшим елементом є саме зображення героя. Мета: ≤ 2.5 с.
  • CLS (Cumulative Layout Shift): стрибки верстки виникають, коли не задані width/height, або завантажуються «важкі» банери іншого розміру.
  • FID/INP: надто великі ресурси забивають головний потік, підвищуючи затримки взаємодії.

Формати зображень: JPG/PNG vs WebP/AVIF

Формат Коли застосовувати Плюси Мінуси
JPG/JPEG Фото без прозорості Широка підтримка, хороше співвідношення якість/вага Важчий за WebP/AVIF при тій самій якості
PNG Прозорість, UI-елементи, іконки Без втрат, чіткість Вага суттєво більша; стискайте або конвертуйте
WebP Більшість фото/ілюстрацій На 25–35% менше за JPG при схожій якості; підтримується всіма сучасними браузерами Старі браузери — рідкісні винятки
AVIF Коли потрібна мінімальна вага Ще менші файли ніж WebP, добра якість при низькому бітрейті Повільніше кодування; інколи артефакти на тонких градієнтах

Практика: зберігайте фото в WebP (якість 70–85), а для критично «легких» сторінок тестуйте AVIF (візуальна якість ~45–65). Тримайте оригінал у медіатеці для майбутньої перекодовки.

Габарити (px), DPI та щільність екранів

  • Розміри в пікселях важливіші за DPI. Для вебу DPI не впливає на SEO чи швидкість.
  • Не вантажте «постер» 4000 px, якщо контейнер 1200 px. Ресайз — перший крок до економії сотень КБ.
  • Retina/HiDPI: подавайте кілька варіантів ширини через srcset і sizes — браузер сам вибере оптимальний.
<img
  src="/img/hero-1200.webp"
  srcset="/img/hero-600.webp 600w,
          /img/hero-900.webp 900w,
          /img/hero-1200.webp 1200w,
          /img/hero-1600.webp 1600w"
  sizes="(max-width: 768px) 90vw, (max-width: 1200px) 80vw, 1200px"
  width="1200" height="630"
  loading="eager" decoding="async" alt="Описове фото героя сторінки" />

Для зображення героя (above the fold) використовуйте loading="eager", для всіх інших — lazy.

Доставка: CDN, lazy-loading, srcset, кеш

  • Lazy-loading: додайте loading="lazy" для всіх зображень нижче першого екрану (below the fold).
  • Width/height: завжди задавайте атрибути width і height для уникнення CLS.
  • CDN з перетворенням зображень: дозволяє авто-ресайз, формат WebP/AVIF на льоту та кеш на «краю» мережі.
  • Кешування: віддавайте довгі Cache-Control для файлів із fingerprint у назві (наприклад, hero.abc123.webp).

Налаштування в WordPress (плагіни та поради)

  • Автоконвертація у WebP/AVIF: увімкніть у плагіні оптимізації зображень (або на рівні CDN).
  • Генерація srcset: сучасний WordPress робить це автоматично для зображень у медіабібліотеці; перевіряйте HTML-код на сторінці.
  • Lazy-loading: у WP 5.5+ додається автоматично, але для «героя» інколи краще loading="eager".
  • Кроп і розміри: задайте власні image_size у темі, щоб сторінки не тягнули «гігантів» там, де достатньо 768–1200 px.
  • Оптимізація медіа-потоку: уникайте завантаження повнорозмірних зображень у блоках-галереях, якщо є стиснуті варіанти.

Швидкий чек-лист оптимізації

  • 📐 Підігнано під контейнер: герой ≈ 1200–1600 px; контентні фото ≈ 800–1200 px.
  • ⚖️ Мета за вагою: контентні фото ≤ 150 КБ; герой ≤ 250–300 КБ (або нижче з AVIF).
  • 🧪 Формат: WebP за замовчуванням; тестуйте AVIF для максимум економії.
  • 🧵 Атрибути: є width, height, alt, decoding="async".
  • 🛌 Ліниве завантаження для всього below the fold.
  • 🧰 Увімкнено srcset + sizes.
  • 🌐 CDN і довгий кеш для статичних ресурсів.
  • 🧼 Без «важких» PNG там, де достатньо WebP/JPG.

FAQ

Який оптимальний розмір і вага фото для інтернет-магазину?

Для картки товару зазвичай достатньо 800–1200 px по ширині. Намагайтесь триматися в межах ≤ 150 КБ на зображення (WebP/AVIF), для головного банера — до 250–300 КБ.

Чи впливає DPI на SEO?

Ні. Для вебу важливі пікселі (px) та правильна подача через srcset, а не DPI.

Чи потрібно дублювати зображення у кількох форматах?

Рекомендовано мати WebP/AVIF для сучасних браузерів. Якщо ваша аудиторія використовує дуже старі браузери, можна залишити JPG/PNG як резерв.

Висновок: контроль габаритів у пікселях + сучасні формати + розумна доставка = кращі Core Web Vitals, вища видимість у пошуку та більше конверсій.

Залишились запитання? Звертайтесь за безкоштовною консультацією до команди InBiz