Зображення зазвичай найважче на сторінці, що робить їх найбільшим важелем швидкості, який ви контролюєте. Задайте правильні розміри й вагу файлу — і сторінки відчуваються миттєвими. Помиліться — і ви провалюєте Core Web Vitals, хоч би яким чистим був ваш код. Ось цілі й процес, щоб їх досягти.
Цілі за розмірами
Підганяйте піксельний розмір зображення під те, де воно насправді з'являється. Приблизний орієнтир:
- Головний банер на всю ширину: 1600–2000 px завширшки покриває більшість десктопних макетів. Ширше рідко допомагає й коштує багато байтів.
- Фото в контенті: ширина вашої контентної колонки, зазвичай 800–1200 px.
- Мініатюра / зображення картки: 300–500 px.
- Аватар / іконка: 48–200 px у розмірі, у якому воно показується.
Подавати зображення 4000px у слот 800px означає, що браузер завантажить і декодує в 25× більше пікселів, ніж будь-коли покаже. Це чисте марнотратство — а декодування великих зображень ще й підвішує головний потік.
Цілі за вагою
Розміри задають стелю; стиснення задає фактичну вагу. Цільтеся в:
- Головне зображення: менше 200 KB (ідеально 100–150 KB).
- Фото в контенті: 80–150 KB.
- Мініатюра: 10–30 KB.
- Усі зображення на сторінку: намагайтеся лишатися нижче ~1 MB на всю сторінку.
Якщо окреме зображення перевищує ~300 KB, ставтеся до цього як до бага для розслідування.
Чому це керує Core Web Vitals
Google-івський Largest Contentful Paint (LCP) вимірює, скільки часу до відображення найбільшого елемента на екрані — а на більшості сторінок цей найбільший елемент і є зображення (зазвичай головний банер). Важкий, завеликий банер прямо роздуває LCP. Хороший LCP — менше 2,5 секунди; роздутий банер може перевищити це на мобільних з'єднаннях сам по собі.
Ще два виграші, пов'язані із зображеннями:
- Задавайте атрибути ширини й висоти, щоб браузер зарезервував місце — це захищає ваш показник Cumulative Layout Shift (CLS).
- Пріоритезуйте банер (не робіть lazy-load зображення LCP) і робіть lazy-load усього нижче лінії згину.
Процес із двох кроків
Крок 1 — зменшіть до реальної ширини показу. Використайте Зміну розміру зображень, щоб довести кожне зображення до розміру, у якому воно з'являється. Замок співвідношення сторін увімкнений, високоякісне зменшення. Уже саме це часто ріже вагу на 80–90%.
Крок 2 — стисніть. Подайте зменшені файли в Стискач зображень: якість 75–85 для фото (візуально без втрат), квантування до 256 кольорів для PNG. Він ніколи не видає файл більший за оригінал, впорається з пакетами і має опційне обмеження ширини, тож ви фактично можете зробити обидва кроки одразу. Для сучасних браузерів конвертація фото у WebP вичавлює ще 25–35%.
Виміряйте, не вгадуйте
Щойно ваші зображення оптимізовані, підтвердьте, що сторінка справді стала швидшою. Page QA від IMG.DIY перевіряє живий URL через Google PageSpeed Insights і повідомляє вагу зображень сторінки, тож ви можете помітити будь-який файл, що досі завеликий. Одне застереження: Page QA потребує інтернет-з'єднання — на відміну від інструментів для зображень, воно викликає API PageSpeed від Google, тож не може працювати офлайн. Використовуйте його після розгортання, щоб перевірити реальний LCP і бюджет зображень.
Приватність за замовчуванням
Інструменти зміни розміру, стиснення й конвертації працюють повністю у вашому браузері з Canvas і WebAssembly — нічого не завантажується, а після першого відвідування вони кешуються і працюють офлайн. Ви можете підготувати зображення на цілий сайт без з'єднання, а потім запустити Page QA онлайн, щойно сторінка стане живою.
Швидкий підсумок: задайте правильні розміри, стисніть до цілей за вагою, пріоритезуйте банер для LCP і перевірте через Page QA.