Що WebP без втрат насправді заощаджує порівняно з PNG

Коротка версія

WebP без втрат часто менший за PNG для тих самих пікселів. Це практична причина, з якої його використовують.

Але слово "часто" має значення. WebP без втрат не є магічною заміною для кожного PNG. Він зазвичай дає найбільшу економію на зображеннях із прозорістю, скриншотах, знімках інтерфейсу та змішаному графічному/фотоконтенті. Він може зекономити мало або інколи навіть програти на дуже малих ресурсах, сильно оптимізованих палітрових PNG і простих іконках.

Якщо ви оптимізуєте реальний сайт, правильне запитання не "Чи WebP кращий за PNG?". Воно таке: "Які з моїх PNG стають відчутно меншими як WebP без втрат, не створюючи проблем із сумісністю чи робочим процесом?"

Це вужче запитання, і на нього значно легше відповісти.

Що тут означає "без втрат"

Без втрат означає, що декодовані пікселі точно збігаються з вихідними пікселями. Якщо PNG конвертувати у WebP без втрат і знову декодувати, пікселі зображення мають бути ідентичними.

Це не означає, що файл такий самий. Метадані, обробка колірного профілю, допоміжні блоки PNG, інформація про гаму, часові мітки та специфічні для інструментів блоки можуть змінюватися, видалятися або представлятися інакше залежно від вашого конвеєра конвертації.

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

Якщо ви публікуєте зображення, надані користувачами, метадані також є питанням приватності. Ми розглядали цю ширшу тему в матеріалі як видаляти EXIF-метадані перед поширенням фото онлайн, але той самий принцип застосовується і тут: оптимізація зображень має чітко визначати, що вона зберігає, а що видаляє.

Чому PNG добре стискає і де він зупиняється

PNG — дуже хороший формат. Він став вебстандартом за замовчуванням із вагомих причин:

• Він без втрат.
• Він підтримує альфа-прозорість.
• Він має широку підтримку.
• Він передбачуваний і простий у роботі.
• Він чудово підходить для пласкої графіки, скриншотів, логотипів та UI-ресурсів.

Стиснення PNG працює через фільтрацію рядків зображення, а потім застосування стиснення DEFLATE. Ця комбінація ефективна, особливо коли сусідні пікселі подібні.

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

Саме тут з’являється WebP без втрат.

Що WebP без втрат робить інакше

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

Вам не потрібно запам’ятовувати деталі реалізації. Корисна ментальна модель така:

PNG добре стискає рядки. WebP без втрат має більше способів описати структуру зображення.

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

Google історично описував зображення WebP без втрат як у середньому приблизно на 26% менші за PNG у власних дослідженнях. Сприймайте це як орієнтир напряму, а не як обіцянку. Ваші зображення — не середнє значення. Ваша дизайн-система, скриншоти, продуктові фото, ілюстрації, експортовані ресурси та завантаження в CMS матимуть власну поведінку.

Де WebP без втрат зазвичай заощаджує найбільше

Прозорі зображення

PNG часто використовують через альфа-прозорість. WebP без втрат також підтримує альфа-канал і часто стискає його ефективно.

Це корисно для:

• Вирізаних зображень продуктів
• Стікерів і бейджів
• Інтерфейсних накладень
• Діаграм із прозорим тлом
• Логотипів, експортованих більшими, ніж потрібно

Економія може бути помітною, коли альфа-канал містить великі передбачувані області, м’які краї або повторювані форми. Якщо у вас каталог, повний прозорих зображень продуктів, WebP без втрат варто протестувати на ранньому етапі.

Скриншоти та знімки UI

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

WebP без втрат часто добре працює з такими зображеннями. Повносторінковий UI-скриншот, який має 900 KB як оптимізований PNG, може стати 500–700 KB як WebP без втрат. Іноді економія більша. Іноді менша. Але категорія перспективна.

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

Змішаний ілюстративний та зображальний контент

Багато сучасної вебграфіки — це не чисті ілюстрації й не чисті фото. Уявіть hero-зображення з UI продукту, градієнтами, малими іконками, текстовими підписами та вбудованими фото.

PNG може зберегти його ідеально, але створити великий файл. WebP або AVIF із втратами можуть давати артефакти навколо тексту й країв, якщо стиснення занадто агресивне. WebP без втрат може бути розумним компромісом, коли точні краї мають значення.

Ширше дерево рішень щодо форматів зображень, включно з AVIF і WebP із втратами, дивіться в матеріалі Формати зображень у 2026 році: коли AVIF перемагає WebP, а коли ні.

Де PNG усе ще може бути кращим

Крихітні іконки та прості ресурси

Для дуже малих файлів важливі накладні витрати формату. PNG-іконка на 650 байтів не є очевидним кандидатом на конвертацію. WebP може зекономити 80 байтів, а може стати більшим.

У такому масштабі операційна складність може переважити користь. Якщо файл уже крихітний, не блокує рендеринг і довго кешується, у вас, імовірно, є важливіші речі для виправлення.

Ретельно оптимізовані палітрові PNG

Деякі PNG набагато менші, ніж люди очікують, бо використовують обмежену палітру. Хороший PNG з індексованими кольорами може бути важко перевершити для простої графіки.

Це особливо справедливо для:

• Малих логотипів
• Pixel art
• Пласких іконок
• Простих діаграм
• Графіки з малою кількістю кольорів

Будьте обережні, порівнюючи WebP із неакуратними PNG-експортами. Якщо PNG прийшов прямо з дизайн-інструмента з непотрібними метаданими та слабкими налаштуваннями стиснення, WebP може виглядати значно кращим. Це не означає, що WebP переміг добре оптимізований PNG із тим самим відривом.

Справедливий тест порівнює WebP без втрат з оптимізованим PNG, а не з будь-яким файлом, який випадково завантажили.

Зображення, які натомість мають бути зі втратами

Це тиха помилка: команди конвертують PNG у WebP без втрат, хоча зображення взагалі не мало бути PNG.

Фотографії — типовий випадок. Повноколірна фотографія, збережена як PNG, може бути величезною. Конвертація її у WebP без втрат може зменшити файл, але зазвичай він усе одно буде набагато більшим за якісний WebP або AVIF із втратами.

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

Безвтратність варто залишати для випадків, де точні пікселі мають значення: UI-скриншоти, діаграми, графіка з великою кількістю тексту, прозорість, згенеровані графіки та ресурси, що помітно деградують під час стиснення з втратами.

Що він заощаджує, крім байтів

Очевидна економія — це розмір передавання. Менші файли зображень зазвичай означають менше використання пропускної здатності, швидші завантаження та кращу поведінку на повільних з’єднаннях.

Але є й вторинні переваги:

• Менше даних для відвідувачів на тарифах з обмеженням трафіку
• Швидше наповнення кешу зображень
• Менше використання пропускної здатності CDN
• Менший обсяг зберігання та резервних копій у масштабі
• Менший тиск на бюджети продуктивності

Ці заощадження розподіляються нерівномірно. Один PNG на 2 MB, конвертований у WebP на 900 KB, важливіший за п’ятдесят іконок, зменшених на 100 байтів кожна.

Саме тому оптимізацію зображень слід пріоритезувати за впливом на сторінку, а не за форматною ідеологією. Якщо Lighthouse позначає доставку зображень, сприймайте це як підказку, а не як вирок. Наш посібник як читати звіт Lighthouse без паніки пояснює, як відокремлювати значущі проблеми продуктивності від шумної діагностики.

Компроміс вартості декодування

Менші файли — не єдина змінна продуктивності. Браузерам також потрібно декодувати зображення перед тим, як їх намалювати.

Декодування PNG зріле й зазвичай швидке. Декодування WebP також широко підтримується та ефективне, але в деяких випадках може коштувати більше CPU. На сучасних пристроях це рідко є блокером, але на недорогих телефонах, сторінках із великою кількістю зображень або великих ресурсах над першим екраном це варто вимірювати.

Практичне правило: якщо WebP без втрат зменшує великий PNG на 30–50%, мережна економія зазвичай домінує. Якщо він зменшує малий PNG на 3%, цей компроміс, імовірно, не вартий уваги.

Робота над продуктивністю повна таких порогових рішень. Не оптимізуйте кожен байт з однаковою інтенсивністю.

Простий метод тестування

Використовуйте репрезентативну вибірку, а не одне зображення.

Створіть папку з прикладами з вашого реального сайту:

• Логотипи та іконки
• Скриншоти
• Вирізані зображення продуктів
• Діаграми
• PNG, завантажені в CMS
• Зображення для соціального прев’ю
• Великі hero-графіки

Потім порівняйте три речі:

1. Оригінальний PNG у тому вигляді, як його завантажили
2. Оптимізований PNG
3. Версію WebP без втрат

Для командних рядкових робочих процесів команди часто використовують такі інструменти, як oxipng, pngcrush, zopflipng або cwebp -lossless. Конкретний інструмент менш важливий, ніж дисципліна порівняння подібного з подібним.

Відстежуйте:

• Розмір файлу
• Піксельну ідентичність після декодування
• Візуальний рендеринг у цільових браузерах
• Коректність прозорості
• Вигляд кольору
• Час збірки
• Тертя в CMS або дизайнерському робочому процесі

Простої таблиці достатньо. Додайте розмір оригінального файлу, розмір оптимізованого PNG, розмір WebP без втрат, відсоток економії та сторінку, де зображення з’являється.

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

Доставка: не ламайте старі клієнти без потреби

Підтримка WebP нині широка в сучасних браузерах. Для більшості публічних сайтів його безпечно використовувати. Утім, якщо у вас є вбудовані webview, email-клієнти, застарілі корпоративні браузери, нативні застосунки або незвичні краулери, протестуйте, перш ніж повністю замінювати PNG.

Консервативний патерн — залишати PNG як fallback і віддавати WebP там, де він підтримується:

<picture>
  <source srcset="diagram.webp" type="image/webp">
  <img src="diagram.png" alt="Diagram showing the checkout flow">
</picture>

Цей підхід нудний, а нудне — це добре. Користувачі з підтримкою WebP отримують менший файл. Усі інші отримують PNG.

Якщо ваша система збірки додає fingerprint до ресурсів, а CDN правильно їх кешує, це не складно підтримувати. Якщо ваша CMS ускладнює альтернативні формати, почніть із найбільших і найчастіше повторюваних зображень, а не намагайтеся конвертувати всю медіатеку за один спринт.

Приватність і локальна обробка

Конвертація зображень часто відбувається в конвеєрах збірки або серверних медіасервісах. Для багатьох команд це нормально. Але якщо ви працюєте з чутливими скриншотами, завантаженнями клієнтів або внутрішніми документами, звертайте увагу, де обробляються файли.

Браузерні інструменти для роботи із зображеннями стали достатньо добрими для багатьох простих конвертацій, прев’ю та перевірок метаданих. Обмеження є, але локальна обробка може зменшити непотрібне завантаження приватних зображень. Ми розглядали компроміси в матеріалі чому обробка зображень у браузері є виграшем для приватності.

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

Практичне правило

Використовуйте WebP без втрат, коли виконуються всі три умови:

• Джерело зараз є PNG.
• Точні пікселі або чиста прозорість мають значення.
• WebP без втрат заощаджує відчутну кількість після порівняння з оптимізованим PNG.

Залишайте PNG, коли:

• Файл крихітний.
• PNG уже оптимізований під палітру й конкурентний.
• Обмеження сумісності незвичні.
• Операційна складність не варта зекономлених байтів.

Використовуйте WebP або AVIF із втратами, коли:

• Зображення фотографічне.
• Точні пікселі не мають значення.
• Налаштування якості може різко зменшити розмір без видимої шкоди.

Найкраща стратегія зображень рідко означає один формат усюди. Це невеликий набір правил, застосованих послідовно.

<!-- tool-cta:start -->

💡 Спробуйте це: Пропустіть той самий PNG через Image Converter, щоб створити версію WebP без втрат, і безпосередньо порівняйте розміри файлів.

<!-- tool-cta:end -->

То що WebP без втрат насправді заощаджує?

Він заощаджує байти там, де PNG вичерпав свої прийоми стиснення. Іноді це скромні 10%. Іноді це майже вдвічі менше для великого прозорого зображення. На реальному сайті економія зазвичай зосереджена в меншості ресурсів.

Саме це важливо. WebP без втрат — не моральне оновлення PNG. Це практичний варіант для конкретної роботи: менші безвтратні вебзображення з прозорістю та широкою підтримкою сучасних браузерів.

Використовуйте його там, де цифри це виправдовують. Не чіпайте PNG там, де ні.