Як підготувати зображення для сайту: формати, стиснення і оптимізація для швидкості
Чому зображення — головний ворог швидкості
Зображення складають 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 достатньо
Стиснення: з втратою і без
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 → внизу побачите загальний розмір.
Висновок
Оптимізація зображень — найпростіший і найефективніший спосіб прискорити сайт. WebP, правильні розміри і стиснення на 80-85% — три кроки, які зменшать вагу сторінки в 3-5 разів без видимої втрати якості.
Хочете щоб сайт вантажився блискавично? Замовте аудит — перевірю швидкість, оптимізую зображення, налаштую технічне SEO і покращу Core Web Vitals.