Почему ваши скриншоты весят 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 МБ вместо двадцати с лишним. Те же картинки. Всё то же. Просто без мёртвого груза.