Як підготувати зображення для сайту: формати, стиснення і оптимізація для швидкості
Коротко
- → Зображення — 40-60% ваги сторінки. Одне неоптимізоване фото з телефону (3-5 МБ) важить більше за весь HTML, CSS і JS разом
- → WebP — основний формат у 2026: на 25-35% менше за JPEG, підтримує прозорість, працює у всіх браузерах. AVIF — ще краще, але поки не скрізь
- → Правильні розміри: hero — 1920px, контент — 800-1200px, мініатюри — 400px. Ніколи не завантажуйте фото 4000px на місце, де показується 800px
- → Чекліст перед завантаженням: стиснути (TinyPNG/Squoosh), конвертувати в WebP, задати width і height в HTML (проти CLS), додати описовий alt-текст
Чому зображення — головний ворог швидкості
Зображення складають 40-60% ваги типової веб-сторінки. Одне неоптимізоване фото з телефону може важити 3-5 МБ — більше ніж весь HTML, CSS і JavaScript разом. Завантажте 5 таких фото на сторінку — і вона вантажиться 10+ секунд на мобільному інтернеті.
Оптимізація зображень — найшвидший спосіб прискорити сайт. Часто одне лише стиснення картинок покращує Core Web Vitals і підвищує оцінку PageSpeed на 20-30 балів.
Формати: WebP vs JPEG vs PNG vs AVIF
| Формат | Коли використовувати | Прозорість | Розмір файлу |
|---|---|---|---|
| WebP | Основний формат для сайту у 2026 | Так | На 25-35% менше JPEG |
| JPEG | Фото, якщо WebP недоступний | Ні | Базовий |
| PNG | Логотипи, іконки, скріншоти з текстом | Так | Найбільший |
| AVIF | Максимальне стиснення (нове) | Так | На 20% менше WebP |
| SVG | Іконки, логотипи, ілюстрації | Так | Мінімальний (векторний) |
Рекомендація: використовуйте WebP для всіх фото на сайті. Підтримується всіма сучасними браузерами. AVIF — ще краще стиснення, але підтримка поки не на 100%. SVG — для іконок і логотипів. PNG — тільки коли потрібна ідеальна чіткість (скріншоти з дрібним текстом).
Правильні розміри зображень
Типова помилка: завантажити фото 4000×3000px з камери для банера шириною 1200px на сайті. Зайві 2800 пікселів нікому не потрібні, але кожен відвідувач завантажує їх.
Правила визначення розміру:
- Максимальна ширина контейнера × 2 — множник 2 для Retina-дисплеїв. Якщо банер 1200px — зображення 2400px
- Герой-секція (fullwidth) — 2560×1440px максимум (покриває більшість моніторів)
- Карточки товарів — 600×600px або 800×800px
- Блог (featured image) — 1200×630px (оптимально і для Open Graph)
- Іконки і аватари — 200×200px достатньо
Є ніші, де якість зображень безпосередньо впливає на конверсію. Для сайту агентства нерухомості фото квартир — це 80% рішення клієнта. Ресторанні сайти без апетитних фото страв втрачають гостей. Готелям і туристичним компаніям потрібні великі hero-зображення локацій. А будівельним компаніям фото портфоліо до/після — єдиний спосіб довести якість роботи. У кожному з цих випадків зображення мають бути великими, якісними і при цьому оптимізованими — інакше сайт або повільний, або непереконливий.
Стиснення: з втратою і без
Lossy (з втратою) — зменшує розмір файлу видаляючи деталі, непомітні для ока. JPEG quality 80-85% — оптимальний баланс. Різницю між 85% і 100% не побачити, а розмір відрізняється в 2-3 рази.
Lossless (без втрати) — стискає без видалення даних. Менший ефект (10-30% зменшення), але ідеальна якість. Для PNG і SVG — зазвичай lossless.
Для фото на сайті завжди використовуйте lossy-стиснення. Ваші відвідувачі не друкують фото на полотні — їм достатньо якості для екрану.
Інструменти оптимізації
- Squoosh (squoosh.app) — безкоштовний від Google, WebP/AVIF конвертація, порівняння до/після. Найкращий для одиночних зображень
- TinyPNG (tinypng.com) — пакетне стиснення PNG і JPEG, безкоштовно до 20 файлів
- ShortPixel — WordPress-плагін, автоматично оптимізує при завантаженні. Безкоштовно до 100 зображень/міс
- Imagify — ще один WordPress-плагін з хорошою якістю стиснення
- FFmpeg / ImageMagick — для масового конвертування через командний рядок
Lazy loading і сучасні техніки
- Lazy loading — зображення завантажуються тільки коли користувач прокручує до них. Додайте
loading="lazy"до всіх зображень, окрім першого екрану (hero) - Responsive images — атрибут
srcsetдозволяє браузеру обрати зображення правильного розміру для пристрою. Мобільний отримає 600px, десктоп — 1200px - CDN для зображень — сервіси (Cloudinary, imgix) автоматично оптимізують, ресайзять і кешують зображення
- Placeholder — показуйте розмиту мініатюру поки основне зображення вантажиться. Запобігає «стрибкам» сторінки (CLS)
Чекліст перед завантаженням
- Формат: WebP (або JPEG для fallback)
- Розмір: не більше ніж потрібно для відображення × 2
- Вага: до 200 КБ для фото, до 100 КБ для карток, до 500 КБ для hero
- Назва файлу: описова, через дефіс (
team-photo-office.webp, неIMG_20260401_123456.jpg) - Alt-текст: описує зміст зображення для SEO і доступності
- Lazy loading:
loading="lazy"на всіх, крім hero - Розміри вказані:
widthіheightатрибути для запобігання CLS
Часті запитання
Так, у 2026 році WebP підтримується всіма сучасними браузерами: Chrome, Firefox, Safari, Edge, Opera. Єдиний виняток — дуже старі версії Safari (до 14). Для них можна додати fallback на JPEG через тег picture, але в більшості випадків це вже непотрібно.
Найпростіше — через Squoosh (squoosh.app): завантажте JPEG, виберіть WebP, налаштуйте якість 80-85%, збережіть. Для масового конвертування — Squoosh CLI або ShortPixel. Для WordPress — плагін ShortPixel або Imagify конвертують автоматично.
Ідеально — до 1-2 МБ загальної ваги сторінки (HTML + CSS + JS + зображення). Допустимо — до 3 МБ. Більше 5 МБ — проблема, особливо для мобільних. Перевірте через DevTools → Network → внизу побачите загальний розмір.
Lazy loading — це коли зображення завантажуються тільки коли користувач до них доскролює. Замість 20 фото одразу — вантажаться 3-4 видимих, решта підвантажується по мірі прокрутки. Достатньо додати атрибут loading="lazy" до тегів img. Не ставте lazy loading на перше зображення сторінки — це погіршить LCP.
AVIF дає ще кращу компресію ніж WebP (на 20-30% менший розмір), але підтримка поки неповна: старі Safari і деякі Android-браузери не підтримують. Оптимальна стратегія — WebP як основний формат, AVIF як прогресивне покращення через тег picture з fallback.
Для невеликого сайту (20-50 сторінок) — від 1 500 грн за разову оптимізацію всіх зображень. Для великого каталогу або магазину — від 3 000 грн. Зазвичай це частина технічного SEO: разом з оптимізацією зображень налаштовують кешування, мініфікацію і інші фактори швидкості.
Для карток товарів: основне фото — 800×800px, WebP, якість 85%. Zoom-версія — до 1600×1600px. Білий фон для каталогу, lifestyle-фото для деталей. Обов'язково вказуйте width і height у HTML, додавайте alt-текст з назвою товару. На сторінці категорії — зменшені превью 300×300px для швидкого завантаження.
Не знайшли відповідь?
Висновок
Оптимізація зображень — найпростіший і найефективніший спосіб прискорити сайт. WebP, правильні розміри і стиснення на 80-85% — три кроки, які зменшать вагу сторінки в 3-5 разів без видимої втрати якості.
Хочете щоб сайт вантажився блискавично? Замовте аудит — перевірю швидкість, оптимізую зображення, налаштую технічне SEO і покращу Core Web Vitals.
