Як оптимізувати зображення для веб-сайтів
Зображення зазвичай становлять більшу частину ваги сторінки. П'ять рішень вирішують більшість проблем.
Оновлено 1 вересня 2026 р.
Зображення є найбільшим фактором, що впливає на вагу сторінки на більшості сайтів, а елемент Largest Contentful Paint є зображенням на більшості сторінок. Їх оптимізація є найефективнішою роботою з продуктивності, і більшість з неї — це рішення, а не інструменти.
Це порядок, який має значення, від найбільшого ефекту до найменшого.
Кроки
- 1
1. Використовуйте правильні розміри
Виміряйте найбільшу ширину CSS, яку займає зображення, і експортуйте приблизно вдвічі більший розмір для дисплеїв високої щільності. Герой з 1200 CSS пікселів потребує джерела 2400px, а не оригінальної камери 6000px. Цей єдиний крок зазвичай перевершує все інше разом узяте.
- 2
2. Використовуйте WebP, з AVIF, де це можливо
WebP на 25–35% менший за JPEG при однаковій якості та підтримується скрізь. AVIF йде ще далі, але кодує повільніше. Зберігайте резервну копію JPEG, якщо вам потрібно підтримувати дуже старих клієнтів.
- 3
3. Встановлюйте якість за вмістом, а не за звичкою
75–85 для фотографій. Вище для графіки з різкими краями, де артефакти стиснення більш помітні. Перевірте результат у реальному розмірі відображення.
- 4
4. Завжди встановлюйте ширину та висоту
Явні розміри дозволяють браузеру резервувати простір до завантаження зображення, що запобігає зміщенню макета. Це виправлення Cumulative Layout Shift, яке нічого не коштує.
- 5
5. Завантажуйте відкладено нижче згину, ніколи не вище
Додайте loading="lazy" до зображень, розташованих далі на сторінці. Не використовуйте відкладене завантаження для зображення LCP — це затримує саме те, що вимірюється.
Видаляйте метадані під час експорту
EXIF та вбудовані колірні профілі додають вагу без жодної користі для відображення в Інтернеті.
Використовуйте SVG для логотипів та іконок
Векторний логотип зазвичай займає кілька кілобайт і залишається чітким за будь-якого розміру та щільності.