На більшості сайтів зображення — це найважча окрема річ на сторінці, часто більша за HTML, CSS і JavaScript разом узяті. Якщо сторінка здається повільною, зображення — це перше, куди варто зазирнути, і виправлення зазвичай швидкі.
Три прийоми роблять майже всю роботу: зменште зображення до розміру, у якому воно реально показується, стисніть його та віддайте в сучасному форматі. Застосовані разом, вони регулярно скорочують вагу зображення на 70% і більше.
Зменшуйте до розміру, у якому справді показуєте
Це найпоширеніша та найбільш марнотратна помилка. Фото прямо з камери може мати 6000 пікселів завширшки, але ваша стаття показує його в колонці завширшки 800 пікселів. Браузер завантажує всі шість тисяч пікселів, а потім викидає більшість із них, коли стискає зображення під розмір.
Віддавати зображення на 6000 пікселів у слот на 800 пікселів може означати завантаження вп'ятеро-вдесятеро більше даних, ніж потрібно. Виправлення просте: зменште файл приблизно до ширини, яку він займатиме, плюс невеликий запас для екранів високої щільності.
Практичне правило:
- Повноширинне головне зображення (hero): 1600–2000 px завширшки — цілком достатньо.
- Зображення всередині статті: 1000–1400 px.
- Мініатюра: 300–500 px.
Скористайтеся Зміною розміру зображень, щоб зменшити кожне зображення ще до того, як воно потрапить на вашу сторінку. Інструмент фіксує співвідношення сторін, тож нічого не розтягується.
Стискайте, щоб прибрати зайве
Коли розміри правильні, стиснення прибирає деталі, яких око не бачить. Для фотографій оптимальна якість — близько 75–85%: файл різко зменшується, а картинка виглядає так само. Для плоскої графіки та скріншотів, збережених у PNG, зменшення кількості кольорів (квантування до 256 кольорів) може стиснути файл до частки початкового розміру.
Стиснення зображень впорається з обома випадками. Воно перекодовує JPEG і WebP за якістю, квантує PNG і гарантує, що ніколи не створить файл більший за той, з якого ви почали. Якщо у вас ціла галерея, обробіть їх пакетно та завантажте ZIP.
Перейдіть на сучасний формат
Сам лише вибір формату може вдвічі зменшити файл. Ось як поширені варіанти порівнюються для фотографій.
| Формат | Типовий розмір проти JPEG | Найкраще для |
|---|---|---|
| JPEG | Базовий рівень | Універсальний запасний варіант; фото |
| WebP | ~25–35% менше | Фото та графіка; широка підтримка браузерів |
| AVIF | ~50% менше | Фото, де важливий найменший розмір |
| PNG | Значно більший для фото | Логотипи, іконки, плоска графіка, прозорість |
WebP — безпечний вибір за замовчуванням у 2026 році: кожен сучасний браузер його читає, і він упевнено перевершує JPEG. AVIF стискає ще сильніше, але кодується довше й має трохи вужчу підтримку. Конвертер зображень дозволяє цілитися в AVIF і тихо відкочується до WebP, коли AVIF не підходить, тож ви отримуєте найкращий доступний результат без вгадування.
Одне застереження: не використовуйте PNG для фотографій. PNG чудовий для логотипів, іконок і всього, що потребує прозорості, але для фото він може бути в кілька разів більшим за WebP тієї самої якості.
Складіть усе разом
Надійний конвеєр для будь-якого зображення, призначеного для вебу:
- Зменште розмір до ширини показу (плюс запас для retina-екранів).
- Конвертуйте у WebP, або в AVIF, якщо хочете якомога менший файл.
- Стисніть із якістю 75–85%, щоб зрізати останнє зайве.
Зробіть це — і фото з камери на 5 МБ може перетворитися на WebP на 120 КБ, який виглядає ідентично в колонці статті. Помножте на всю сторінку — і різниця в часі завантаження буде разючою.
Усе працює у вашому браузері за допомогою Canvas і WebAssembly, тож нічого не завантажується, і інструменти продовжують працювати офлайн після першого візиту. Це означає, що ви можете підготувати теку зображень для свого сайту, не передаючи їх жодному серверу.
Поза межами файлів
Ще дві звички допомагають, і вони нічого не коштують:
- Лінива підгрузка зображень нижче лінії згину через
loading="lazy", щоб браузер завантажував їх лише коли читач прогортає близько. - Задавайте атрибути width і height, щоб макет не стрибав, поки зображення завантажуються, — це також покращує ваш показник Core Web Vitals.
Хочете точно знати, які зображення тягнуть сторінку вниз? Наш гід з SEO зображень охоплює аудит, а перевірка швидкості сторінки перелічить найважчі ресурси, тож ви знатимете, куди цілитися першою чергою.