Як стиснути зображення для сайту

За даними Web Almanac 2025 від HTTP Archive, медіанна головна сторінка на мобільних пристроях важила 2,56 MB, з них 911 KB припадало на зображення. На комп’ютерах медіанна сторінка містила 1058 KB зображень. Саме на зображення відвідувачі й чекають: найбільший елемент на екрані під час завантаження сторінки, Largest Contentful Paint (LCP), був зображенням на 76% мобільних сторінок.

Легші зображення швидше завантажуються за повільного з’єднання, витрачають менше мобільного інтернету ваших відвідувачів і зменшують ваші витрати на трафік. LCP — одна з метрик Core Web Vitals, за якими Google оцінює зручність сторінок, тож важкі зображення можуть коштувати більше, ніж кілька секунд терпіння.

Стиснення не врятує зображення, яке значно більше за відведене йому місце. Знімок із камери завширшки 4000 пікселів, показаний у колонці завширшки 800 пікселів, містить у 25 разів більше пікселів, ніж може використати сторінка. Як зазначає web.dev, надсилання на телефони зображень у розмірі для комп’ютерів може витрачати у 2–4 рази більше даних, ніж потрібно.

• Банери на всю ширину: для більшості макетів достатньо близько 1600–2000 пікселів завширшки.
• Зображення в колонці статті: приблизно вдвічі ширші за колонку, щоб лишатися чіткими на екранах із високою щільністю пікселів (наприклад, 1400 пікселів для колонки завширшки 700 пікселів).
• Мініатюри й аватари: удвічі більші за розмір показу, часто 200–400 пікселів.

Від формату залежить, наскільки ефективно можна зберегти зображення. Коротко: для фотографій підходять JPG або WebP; для логотипів, знімків екрана й усього, де є прозорість, — PNG або WebP. У нашому порівнянні JPG, PNG і WebP пояснено, коли який формат виграє.

Близько 97% браузерів, якими користуються, показують WebP, і файли в ньому часто помітно менші. Щоб спробувати, конвертуйте зображення за допомогою JPG у WebP або PNG у WebP і порівняйте результат з оригіналом: конвертований файл не завжди менший, особливо в разі простої графіки.

Стиснення видаляє дані, відсутності яких око навряд чи помітить. У сервісі стиснення зображень Bitinz можна перетягнути одразу цілу партію файлів JPG, PNG чи WebP і вибрати один із трьох рівнів:

• Швидко: насамперед швидкість, для великих партій.
• Баланс: рівень за замовчуванням, добре підходить для більшості зображень на сайті.
• Максимум: працює трохи довше заради менших файлів; варто використовувати для зображень, які є на кожній сторінці, як-от банери й фони.

Якщо ви зберігаєте формат, Bitinz ніколи не поверне файл, більший за завантажений. Порівняйте результат з оригіналом у повному розмірі, особливо зображення з дрібним текстом або плавними градієнтами, а потім збережіть ті, що вас влаштовують.

Навіть добре стиснене зображення може сповільнити сторінку, якщо завантажується не вчасно або не в тому розмірі. Більшу частину роботи виконують кілька HTML-атрибутів:

• Задавайте width і height для кожного зображення, щоб браузер зарезервував місце і макет не стрибав під час завантаження.
• Додавайте loading="lazy" до зображень нижче на сторінці, щоб вони завантажувалися лише тоді, коли відвідувач, гортаючи сторінку, наближається до них.
• Ніколи не застосовуйте ліниве завантаження до головного зображення вгорі сторінки. Натомість web.dev радить задати для нього fetchpriority="high", причому не більше ніж для одного-двох зображень.
• Використовуйте srcset і sizes, щоб запропонувати те саме зображення в кількох варіантах ширини: так телефони завантажать менший файл, ніж великі екрани.
• Віддавайте зображення з довгим терміном кешування, через CDN, якщо він у вас є, щоб відвідувачам, які повертаються, не доводилося завантажувати їх знову.

Перевірте сторінку в PageSpeed Insights або на панелі Lighthouse у Chrome. Починаючи з Lighthouse 13, перевірки зображень зібрано в одному пункті — «Improve image delivery». Він показує зображення, які можна стиснути сильніше, віддавати в сучасному форматі або зменшити. Зображення, що заощадили б менше ніж 4 KiB, до списку не потрапляють, тож короткий список — добрий знак.

Потім перегляньте сторінку самі на телефоні. Проблеми стиснення найперше видно на різких краях, тексті всередині зображень і відтінках шкіри.

Якщо на сайті щодня з’являються нові зображення, наприклад через систему керування вмістом або інтернет-магазин, стискайте їх під час завантаження чи публікації, а не вручну. API для розробників Bitinz приймає зображення через HTTP і повертає посилання на стиснений файл, тож його можна викликати зі скрипта або конвеєра збирання. Кожен обліковий запис має безкоштовну місячну квоту.

1. 01Зменште кожне зображення до розміру, приблизно вдвічі більшого за той, у якому його показано.
2. 02Використовуйте JPG або WebP для фотографій, а PNG або WebP — для графіки й прозорості.
3. 03Стискайте на рівні «Баланс», а для найбільших зображень спробуйте «Максимум».
4. 04Порівняйте результат з оригіналом, перш ніж замінювати його.
5. 05Задавайте ширину й висоту, вмикайте ліниве завантаження для зображень нижче першого екрана і ніколи — для головного зображення.
6. 06Знову перевірте сторінку в PageSpeed Insights.

Завантажуєте зображення не лише на власний сайт? Кожна платформа має свої правила: див. вимоги до розміру зображень для пошти та інтернет-магазинів.