Почему я перевожу 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 на рабочем столе наконец останется пустой. У меня она пустая — уже около года. Маленькая победа, но я и такой рад.