Одне неоптимізоване hero-зображення може важити більше, ніж увесь HTML, CSS та JavaScript веб-сторінки разом. Зображення становлять приблизно 50% загального обсягу байтів середньої веб-сторінки, що робить їх найбільшим важелем для покращення продуктивності. Проте оптимізація зображень залишається одним із найменш зрозумілих аспектів веб-розробки та створення контенту.
Вплив виходить далеко за межі швидкості завантаження. Розмір зображення впливає на ваше пошукове ранжування, рахунок за хостинг, тарифні плани ваших користувачів і навіть на показники конверсії.
Зв'язок із продуктивністю: Core Web Vitals та LCP
Core Web Vitals від Google — набір метрик, що безпосередньо впливають на пошукове ранжування. Серед них Largest Contentful Paint (LCP) вимірює, скільки часу потрібно для рендерингу найбільшого видимого елемента на екрані. У більшості випадків цей елемент — зображення.
Google вважає LCP менше 2,5 секунди «добрим». Від 2,5 до 4 секунд — «потребує покращення». Понад 4 секунди — «поганий». Hero-зображення розміром 3 МБ на стандартному з'єднанні може легко виштовхнути LCP за поріг 4 секунд, перетягнувши всю вашу сторінку в категорію «поганий».
Наслідки відчутні:
- Падіння SEO-рейтингу — Core Web Vitals є сигналом ранжування; повільні сторінки втрачають позиції
- Вищий показник відмов — 53% мобільних відвідувачів покидають сторінку, якщо вона завантажується довше 3 секунд
- Нижча конверсія — кожна додаткова секунда часу завантаження зменшує конверсію приблизно на 7%
Правило 100 КБ Для зображень контенту на веб-сторінці прагніть менше 100 КБ на зображення. Для hero-зображень на всю ширину — менше 200 КБ. Ці цілі досяжні з сучасними форматами та правильним стисненням без помітної втрати якості.
З втратами vs без втрат: розуміння компромісу
Все стиснення зображень поділяється на дві категорії, і неправильний вибір — поширена причина роздутих файлів.
Стиснення без втрат зменшує розмір файлу, знаходячи ефективніші способи кодування тих самих даних. Кожен піксель зберігається точно. Зменшення скромне — зазвичай 10-30%. PNG використовує стиснення без втрат.
Стиснення з втратами відкидає інформацію, яку людське око навряд чи помітить. Точність кольору в градієнтах, дрібні деталі текстури та тонкі тональні варіації спрощуються. Зменшення драматичне — зазвичай 70-90%. JPEG та WebP (у режимі з втратами) використовують цей підхід.
Критичне розуміння: стиснення з втратами при якості 80-85% візуально невідрізнюване від оригіналу для фотографій. Перцептуальна різниця фактично нульова, але різниця в розмірі файлу — величезна.
| Підхід | Зменшення розміру | Втрата якості | Найкраще для |
|---|---|---|---|
| Без втрат (PNG) | 10-30% | Немає | Логотипи, скріншоти, текстова графіка |
| З втратами 85% (JPEG/WebP) | 70-85% | Непомітна | Фото, ілюстрації, фони |
| З втратами 60% (JPEG/WebP) | 85-95% | Помітна при близькому розгляді | Мініатюри, декоративні зображення |
Поширена помилка — використання стиснення без втрат для фотографічного контенту або стиснення з втратами при занадто низькій якості для важливих візуальних елементів. Розуміння того, яким зображенням який підхід потрібен — ключ до ефективної оптимізації.
Формат має значення: те саме зображення, дико різні розміри
Вибір формату зображення має такий самий вплив, як і рівень стиснення. Фотографія, збережена як PNG, може бути у 5-10 разів більшою, ніж те саме зображення у JPEG при якості 85%, без помітної різниці.
JPEG залишається універсальним стандартом для фотографій. Підтримується всюди та пропонує чудове стиснення з втратами для фотографічного контенту.
WebP пропонує на 25-35% менші файли, ніж JPEG при еквівалентній візуальній якості, з додатковою перевагою підтримки прозорості. Всі сучасні браузери підтримують його. Це найкращий універсальний формат для вебу сьогодні.
AVIF — найновіший претендент, що пропонує ще краще стиснення, ніж WebP (приблизно на 20% менше), але підтримка браузерами та швидкість кодування ще наздоганяють.
PNG — правильний вибір лише для зображень, що вимагають точного піксельного відтворення — логотипи, іконки, скріншоти з текстом або зображення, що потребують прозорості, де WebP не підходить.
Пропускна здатність та сховище: приховані витрати
Для особистих блогів та малих сайтів витрати на пропускну здатність можуть здаватися незначними. Але вони швидко масштабуються:
- Сторінка з 2 МБ зображень, переглянута 10 000 разів на місяць, передає 20 ГБ даних зображень щомісяця
- Оптимізуйте ці зображення до 400 КБ загалом, і ви передаєте 4 ГБ — зменшення на 80%
- Для сайтів з лімітованим хостингом це прямо перетворюється на нижчі рахунки
Сховище теж накопичується. E-commerce сайт із 5000 товарів, кожен з 4 неоптимізованими зображеннями по 2 МБ, використовує 40 ГБ лише для товарних фото. Оптимізовані до 200 КБ кожне — це зменшується до 4 ГБ.
Адаптивні зображення та проблема пристроїв
Зображення шириною 1920 пікселів, що відображається на екрані телефону шириною 375 пікселів, витрачає понад 96% своїх пікселів даремно. Браузер завантажує повне зображення, а потім відкидає більшість даних, щоб вмістити його на екрані.
Рішення — адаптивні зображення, що видають різні розміри зображень різним пристроям. Мобільний відвідувач отримує зображення шириною 400px; десктопний — версію 1200px. Концепція проста, але реалізація вимагає розуміння атрибутів srcset, дескриптора sizes та art direction з елементом picture.
Lazy loading: не завантажуй те, що не видно
Зображення під згином — ті, що не видно без прокрутки — не потребують негайного завантаження. Lazy loading відкладає їх завантаження, доки користувач не прокрутить до них. Це означає, що початкове завантаження сторінки включає лише зображення, що фактично видимі на екрані, драматично покращуючи сприйняту продуктивність.
Сучасні браузери підтримують нативний lazy loading одним HTML-атрибутом. Це одна з найпростіших та найефективніших доступних оптимізацій.
CDN: видача зображень з периферії
Content Delivery Network зберігає копії ваших зображень на серверах, розподілених по всьому світу. Відвідувач у Токіо отримує зображення з найближчого сервера, а не з вашого серверу у Парижі. Це зменшує затримку, покращує час завантаження та знижує навантаження на вашу інфраструктуру.
Багато сучасних CDN також пропонують трансформацію зображень на льоту — автоматичну конвертацію у WebP, зміну розміру для різних пристроїв та застосування оптимального стиснення без торкання оригінальних файлів.
Далі
Оптимізація зображень — тема, де малі покращення накопичуються у значні результати. Якщо хочете поекспериментувати з рівнями стиснення та побачити компроміс якість-розмір у реальному часі, на toolk.io є Компресор зображень, який обробляє все у вашому браузері. Посібники зі стиснення зображень та конвертації між форматами також доступні на сайті.