Чому я конвертую PNG у WebP (і коли — нізащо)

У мене на робочому столі є тека to-shrink. Довгі роки в неї відправлялися вмирати скриншоти — двомегабайтні PNG з дашбордами й недоробленими макетами, які я потім розсилав людям, що зовсім не потребували двох мегабайтів мого екрана. Якось удень я таки відкрив цю теку й порахував: вона важила більше, ніж застосунок, який я того ж тижня викотив у продакшн. Ось у чому тиха біда PNG. Формат чудовий і водночас витрачає неймовірну кількість місця, а ми цього майже не помічаємо — трафік дешевий, а файл «відкривається нормально».

Тож дозвольте навести довід, який мені самому дуже пригодився б набагато раніше. Якщо PNG відправляється на сайт — туди, де на нього дивитимуться, а не редагуватимуть, — майже напевно йому місце у WebP.

У чому PNG справді гарний

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

Загвоздка в тому, що «ідеально зберігати кожен піксель» — обіцянка, за яку платиш байтами. Збережіть фотографію в PNG, і він чесно запише градієнти, шум матриці та ледь помітні переходи кольору, втрат яких око все одно не вловить, будь вони хоч трохи приблизними. Ви платите за повним прейскурантом за деталі, яких ніхто не бачить.

Що WebP уміє, а PNG — ні

WebP був відповіддю Google на просте питання: а що, як просто зробити формат кращим? Він робить дві речі, недоступні PNG. Він уміє стискати з втратами, коли це потрібно, — відкидаючи непомітне, як це робить JPEG, тільки хитріше, — і при цьому зберігає повний альфа-канал. Ось ця друга частина і є тихе диво. Роками вибір був такий: «прозорість або маленький файл, щось одне». WebP дає і те, і інше одразу.

На практиці фотографічний чи скриншотний PNG за розумної якості ужимається десь на 60–90%. Не на 10%. Скриншот на 1,8 МБ перетворюється приблизно на 250 КБ, і, поклавши їх поруч, ви не відрізните один від одного. Я влаштовував собі цю перевірку частіше, ніж готовий визнати, щоразу впевнений, що ось зараз-то впіймаю WebP на халтурі. Жодного разу не впіймав.

Порівняння, після якого я повірив

Приблизні цифри з партії, яку я конвертував минулого місяця:

Погляньте на логотип. Він майже не зрушив — і ось ця виноска і є найважливіше.

Коли я не морочуся з конвертацією

Проста графіка — плоскі кольори, штук п'ять, різкі краї — це рівно те, під стиснення чого PNG і створювався, і справляється він не гірше за будь-який інший. Двоколірна іконка, схема з ліній, QR-код: лишіть їх у PNG, а ще краще — віддавайте як SVG, якщо є вектор. WebP цим файлам не зашкодить, але й до пуття не допоможе, а зайвий крок ви собі додасте на порожньому місці.

Другий випадок, коли я не конвертую, — це майстер-файл. Я ніколи не чіпаю єдину копію чого-небудь. Режим із втратами у WebP — двері в один бік: деталі, які ви відкинули, назад уже не повернути. Тож ось моє єдине непорушне правило — конвертуйте ту копію, що публікуєте, а оригінал тримайте там, де редагуєте. У мене на машині це буквально два файли: PNG лишається в теці проекту, WebP іде на сайт. Дешева страховка, і я жодного разу про це не пошкодував.

«А воно взагалі всюди працює?»

Раніше це було справжнім запереченням, а тепер — уже ні. Усі браузери, якими люди реально користуються, підтримують WebP приблизно з 2020 року — Chrome, Safari, Firefox, Edge, усі поспіль. З поштовими клієнтами й досі як пощастить, та й старий корпоративний софт часом поводиться дивно, тож для розсилки я все ще візьму JPEG. Але для відкритого вебу? Віддавати WebP без запасного варіанта перестало бути сміливим вчинком уже багато років тому.

Як я зробив би це насправді

Чесно кажучи, конвертер PNG у WebP на цьому сайті я зібрав тому, що втомився тягати скриншоти в випадкові онлайн-інструменти, щоб їх ужати, до пуття не розуміючи, де мої файли зрештою осідають. Тож варіант, який я рекомендую, — нудний і приватний: конвертуйте на своїй машині, прямо в браузері, де файл узагалі не покидає пристрій. Закиньте PNG, подивіться, як падає колонка з розміром, завантажте WebP.

Але річ не в інструменті. Річ у звичці. Щойно «PNG — щоб редагувати, WebP — щоб викладати» стане автоматизмом, ви перестанете слати людям скриншоти на 2 МБ, ваші сторінки безкоштовно стануть швидшими, а та сама тека to-shrink на робочому столі нарешті лишиться порожньою. У мене вона порожня — уже близько року. Маленька перемога, але я і такій радий.