Оптимізація зображень для сайту
Як оптимізація зображень прискорює сайт: правильні розміри, стиснення та формат WebP замість JPEG. Реальний приклад, що дало зменшення фото з 10 МБ до 1 МБ.
Фото з сучасного телефону чи фотоапарата важить кілька мегабайтів — чудово для друку, але надлишково для вебу, де достатньо десятків-сотень кілобайтів. Якщо на сторінці десяток таких фото без обробки, сайт вантажиться повільно навіть на хорошому хостингу. Оптимізація зображень — один із найпростіших способів прискорити сайт із найпомітнішим результатом.
Чому саме зображення сповільнюють сайт найбільше
У переважній більшості випадків зображення складають левову частку загальної ваги сторінки — часто 60–80%. Браузер має завантажити кожен файл, перш ніж показати його користувачу, тож чим важчі фото, тим довше людина дивиться на порожній екран чи розмиту заглушку. Це напряму впливає на метрику LCP (Largest Contentful Paint) — одну з ключових у Core Web Vitals, яку Google враховує в ранжуванні.
Три речі, які насправді потрібні
Оптимізація зображень — не одна дія, а три, і всі три важливі одночасно:
Правильний розмір. Немає сенсу вставляти фото 4000×3000 пікселів у блок, який на екрані займає 400×300. Браузер все одно завантажить повний файл і лише потім стисне його візуально — ви платите вагою за пікселі, яких ніхто не бачить.
Стиснення. Навіть при правильному розмірі фото можна стиснути додатково, пожертвувавши візуально непомітною часткою якості. Різниця між необробленим і стисненим фото на екрані майже непомітна, а у вазі файлу — в рази.
Сучасний формат. WebP замість звичного JPEG чи PNG дає додаткове зменшення ваги на 25–35% за тієї самої видимої якості. Сьогодні його підтримують усі сучасні браузери, тож технічних перешкод для переходу немає.
Реальний приклад з практики
У проєкті для клініки «Гінеколог Львів» саме зображення були головною причиною повільного сайту. Фотографії з сайту важили сумарно близько 10 МБ — після приведення до правильних розмірів, стиснення й переведення у WebP їхня загальна вага впала до приблизно 1 МБ. Результат був відчутний одразу: оцінка Lighthouse зросла з 67 до 90+ балів, LCP скоротився приблизно з 5 до 3 секунд, а показники SEO та Best Practices піднялися до 100/100. Жодних інших серйозних змін у код не вносили — саме зображення дали основний приріст.
Відкладене завантаження зображень
Окрім ваги окремого файлу, має значення, коли зображення взагалі завантажується. Технологія lazy loading дозволяє браузеру не вантажити картинки, які знаходяться нижче видимої частини екрана, поки користувач до них не долистає. Це особливо помітно на сторінках з галереями чи довгим блогом: замість того, щоб одразу тягнути десятки фото, браузер завантажує лише те, що людина реально бачить у перші секунди. Більшість сучасних систем робить це автоматично через атрибут loading="lazy", без потреби писати додатковий код.
Важливий нюанс: перше велике зображення на екрані (те, що формує метрику LCP) відкладено вантажити не варто — навпаки, його варто завантажувати з пріоритетом, інакше саме воно стане вузьким місцем швидкості.
Формати: коли який використовувати
| Тип зображення | Рекомендований формат |
|---|---|
| Фото, банери, ілюстрації | WebP |
| Логотипи, іконки з прозорістю | SVG (де можливо) або WebP |
| Скріншоти з текстом | WebP з мінімальним стисненням |
Для більшості сайтів достатньо правила: усе, що виглядає як фотографія, — у WebP; усе, що виглядає як лінії та фігури (логотип, іконка), — у SVG, якщо це можливо.
Іноді власники сайтів бояться, що стиснення й конвертація «зіпсують» якість фото. На практиці різниця між оригіналом і правильно стисненим WebP на екрані непомітна оку — алгоритми стиснення прибирають ту інформацію, яку людина все одно не розрізняє, а не жертвують різкістю чи кольором. Втратити варто побоюватись лише при надто агресивному стисненні, коли з’являються помітні артефакти навколо контрастних країв.
Як перевірити свій сайт
Найпростіший спосіб — відкрити сайт у PageSpeed Insights. Сервіс окремо вкаже, якщо зображення не оптимізовані, і покаже, скільки саме кілобайтів чи мегабайтів можна заощадити. Якщо цифра виглядає значною — це майже завжди перше, з чого варто починати прискорення сайту, до будь-яких складніших технічних правок.
Оптимізація зображень — та рідкісна річ у веброзробці, де невелика робота дає непропорційно великий результат. Якщо хочете дізнатися, скільки саме важать фото на вашому сайті і що це коштує вам у швидкості та позиціях у Google, — напишіть мені, гляну безкоштовно й скажу чесно.
Потрібен швидкий сайт або аудит наявного?
Напишіть — пораджу рішення й порахую вартість безкоштовно.