Чому ваші скриншоти важать 2 МБ і як зрізати 60–90%

Якось я порахував скриншоти в одному листуванні на тему дизайн-рев'ю. Одинадцять штук, PNG, у середньому трохи менше 2 МБ кожен. Двадцять із гаком мегабайтів переважно білих дашбордів літали туди-сюди між шістьма людьми, у кожного з яких той самий застосунок був відкритий у сусідній вкладці. Ніхто про це не думав, бо воно «працювало». Ось і пастка. Скриншоти тихо величезні, і причина зашита в те, як ваш комп'ютер їх робить.

Чому скриншот — це файл на 2 МБ

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

PNG зберігає кожен піксель точно. Сучасний екран щільний — знімок цілого вікна на дисплеї Retina чи 4K може бути понад 2000 пікселів завширшки, і PNG сумлінно записує кожен із цих мільйонів пікселів із повною точністю. Йому байдуже, що 60% кадру — той самий відтінок майже-білого. Він нічого не викидає, бо викидати — це не те, що він робить. Тож скриншот майже порожньої сторінки налаштувань — візуально майже нічого — усе одно важить від 1.5 до 2.5 МБ, бо саме полотно величезне, навіть коли вмісту обмаль.

Хід: конвертувати у WebP

WebP уміє те, чого PNG не може, — стискати з втратами, зберігаючи при цьому чіткі краї й прозорість. На скриншотах саме це поєднання близьке до чарів, бо скриншот — це переважно плоскі ділянки (дешеві для стиснення) з дрібкою тексту (який WebP тримає гострим). Прохід із втратами відкидає непомітний шум; ваше око не подасть жодної скарги.

Реальні цифри зі скриншотів на моєму власному диску:

Це приблизно на 85–90% менше, а поклавши їх поруч, я не скажу, де який. Текст лишається читабельним аж до пікселя. Це конвертація з найвищою віддачею з усіх, які я роблю, — саме тому, що скриншоти від початку неймовірно перевантажені: там колосальна кількість порожнечі, яку можна вичавити.

«А текст не розмиється?»

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

Чесний виняток: якщо ви жорстко скрутите якість донизу в гонитві за крихітним файлом, то зрештою побачите, як текст м'якшає. Ліки — просто так не робити. Середнє налаштування якості вже дає вам виграш у 60–90% із цілим текстом. Немає причини лізти в діапазон, де все ламається.

Коли зменшення не допомагає

Два випадки, коли я лишаю PNG у спокої.

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

І якщо скриншот уже малий — крихітний обрізаний фрагмент, одна кнопка, щось уже приблизно до 100 КБ, — конвертація ледве зрушує стрілку. Виграш у 60–90% дають файли, які величезні, бо величезне полотно. Малий обрізок цю проблему вже розв'язав. Не додавайте крок задарма.

Як я роблю це насправді

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

Головне тут не інструмент, а рефлекс. Щойно «зробив скриншот — стиснув» стане автоматизмом, ви перестанете стріляти зображеннями на 2 МБ у людей, у яких застосунок уже відкритий, ваші листи відправлятимуться швидше, а гілки перестануть роздуватися до десятків мегабайтів. Той лист з одинадцятьма скриншотами важив би близько 2 МБ загалом замість двадцяти з гаком. Ті самі картинки. Те саме все. Просто без мертвої ваги.