Image Compression

Image Compression (стиснення зображень) — це зменшення розміру файлу картинки в байтах без помітної втрати якості, щоб сторінка вантажилася швидше. Досягається зміною формату на WebP чи AVIF, зниженням надлишкової деталізації та видаленням зайвих метаданих. Пряма вигода — легші сторінки, кращі Core Web Vitals і вища швидкість завантаження.

Простими словами: це як спакувати валізу перед подорожжю. Речі ті самі, місця займають менше — і нести легше.

Що таке Image Compression і навіщо воно потрібне

Зображення — зазвичай найважча частина сторінки. У багатьох проєктах саме картинки з’їдають 50–70% ваги завантаження. Якщо їх не стискати, навіть швидкий сервер і чистий код не врятують: браузер усе одно чекатиме, поки докачаються мегабайти графіки. А повільна сторінка — це і гірший Core Web Vitals, і втрачені відвідувачі, які не дочекалися.

Тому стиснення зображень — базовий крок будь-якої оптимізації швидкості. Воно не «косметика», а один із небагатьох способів реально прибрати зайві секунди завантаження без переписування всього сайту.

Як працює стиснення

• Lossy (з втратами) — частину даних викидають назавжди (JPEG, WebP, AVIF). Файл легший у рази, а різницю око майже не помічає.
• Lossless (без втрат) — дані пакуються, але відновлюються повністю (PNG, WebP lossless). Легше, ніж оригінал, але важче за lossy.
• Зміна формату — переведення старих JPEG/PNG у сучасні WebP чи AVIF часто дає найбільший виграш ваги.

Формати та інструменти

Орієнтир за вагою за однакової якості:

Стискають через онлайн-сервіси (Squoosh, TinyPNG), плагіни CMS або на етапі збірки. WebP підтримують усі актуальні браузери; AVIF — майже всі, тож зазвичай віддають AVIF з запасним WebP чи JPEG.

Приклад

Фото товару важило 1,8 МБ у JPEG. Після конвертації в WebP на тій самій якості — близько 480 КБ, тобто майже вчетверо легше. На картці з десятком таких фото економія перетворюється на кілька секунд завантаження — а це вже помітно і людині, і Google.

Часто плутають з…

• Image Optimization — ширше поняття; стиснення це лише одна його складова поряд з alt, іменами файлів і адаптивними розмірами.
• Зміна розмірів (resize) — це зменшення пікселів (ширини/висоти), а стиснення працює з вагою файлу. Часто роблять і те, і те.

Питання та відповіді

Стиснення псує якість зображень?

За розумних налаштувань — практично ні. Lossy-стиснення прибирає деталі, які око майже не бачить. Перебір із «стисканням до нуля» помітний, тому підбирають баланс якість/вага.

Який формат обрати — WebP чи AVIF?

AVIF легший за однакової якості, але WebP підтримується трохи ширше. Оптимально віддавати AVIF з фолбеком на WebP чи JPEG для старих браузерів.

Чи впливає стиснення на SEO?

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

Сторінки вантажаться повільно через важку графіку? Знайдемо й полагодимо це в межах SEO-аудиту та виправлення помилок на сайті.

Схожі терміни: Image Optimization, Швидкість завантаження, PageSpeed, Core Web Vitals, Альтернативний текст.