PNG в WebP: когда это оправдано

Откуда берётся тяжёлая страница

Типичная история: страница грузится три секунды, в отчёте PageSpeed висит претензия к LCP, а виноват один PNG на 1,8 МБ — фон героя или скриншот интерфейса в документации. PNG сжимает без потерь, то есть хранит каждый пиксель точно. На плоской графике это дёшево, на фотографии и на любом изображении с шумом, градиентами и мягкими тенями — очень дорого.

WebP на том же изображении обычно даёт файл в два-четыре раза легче. Причина не в магии, а в том, что это формат с потерями (у него есть и режим без потерь, но по умолчанию используется первый), и он выбрасывает то, чего глаз на экране всё равно не различает. Плюс, в отличие от JPG, WebP умеет альфа-канал: прозрачный фон логотипа останется прозрачным, а не зальётся белым.

Отсюда простое правило, к которому стоит прийти до конвертации. Переводить в WebP имеет смысл всё, что крупное и «фотографическое»: скриншоты, иллюстрации, баннеры, картинки карточек товара, изображения в письмах-шаблонах. Не имеет смысла трогать иконки 16×16 и 32×32, плоские значки из двух-трёх цветов и любую графику, где PNG со своей палитрой уже упакован почти идеально. Там перекодирование даст выигрыш в единицы байт, а иногда файл вырастет: у WebP свой заголовок и свои накладные расходы, и на крошечном файле они заметны.

Что делает конвертер и чего он не делает

Разберём конвертер PNG в WebP честно, по его разметке.

1. Кликните по зоне ЗАГРУЗИТЬ ФАЙЛ (под ней подпись «Ожидание файла...») или перетащите картинку прямо на неё. Поле выбора отфильтровано по image/png, а перетаскивание принимает файл только с типом image/png или с расширением .png — JPEG туда не уронить.
2. Посмотрите на превью справа: до загрузки там стоит заглушка «Превью», после — отрисованный кадр вашего изображения в полном разрешении. Это проверка, что открылся нужный файл и что прозрачные участки остались прозрачными, а не побелели.
3. Нажмите СКАЧАТЬ. Браузер закодирует холст в WebP и сохранит результат под именем converted_image.webp. Имя всегда одно и то же, так что при серии файлов переименовывайте их сразу после сохранения, иначе получите converted_image (3).webp и потеряете, что откуда.
4. Нажмите СБРОСИТЬ, чтобы очистить превью и поле файла перед следующей картинкой.

Теперь неприятная часть, которую стоит знать до того, как вы прогоните через страницу всю папку ассетов.

Ползунка качества здесь нет. Кодирование зафиксировано на значении 0,85 в вызове canvas.toBlob. Это разумный компромисс для веба, но именно компромисс: строго без потерь эта страница WebP не сделает, как бы ни звучал запрос «png в webp без потери качества». Если вам нужен настоящий lossless WebP, это делает утилита cwebp с флагом -lossless или плагин вашего сборщика.

Обработка по одному файлу. Поле не помечено как multiple, очереди нет. Цикл «загрузил — СКАЧАТЬ — СБРОСИТЬ» нормально работает на десятке иконок и превращается в мучение на двухстах. Для папки берите скрипт.

Никакого изменения размеров. Холст создаётся ровно по img.width и img.height исходника. Если ваш PNG — снимок 4000×3000, на выходе будет WebP 4000×3000, просто легче. Уменьшать пиксели надо в другом месте: у сжатия изображений для этого есть поля «Макс. ширина», «Макс. высота» и «Масштаб, %», ползунок «Качество» от 5 до 100 со значением 78 по умолчанию и поле «Цель, KB», под которое качество подбирается перебором. В списке «Формат» там же можно выбрать WebP напрямую. Если задача звучит как «уложиться в конкретный вес», начинайте сразу оттуда.

APNG теряет анимацию. Из анимированного PNG холст берёт только первый кадр. На выходе будет статичная картинка, и предупреждения об этом страница не покажет.

Файл при этом никуда не уезжает: FileReader читает его в память вкладки, canvas рисует кадр, кодировщик браузера отдаёт результат ссылкой на скачивание. Сети в этой цепочке нет — можно проверить, отключив её после загрузки страницы.

Ошибки, которые стоят трафика

Отдавать WebP без запасного варианта. Современные браузеры формат понимают, но за их пределами начинается зоопарк: почтовые клиенты, встроенные веб-вью в приложениях, старые корпоративные сборки, часть CMS и форм загрузки. На публичной странице заворачивайте картинку в picture с source type="image/webp" и img с PNG внутри — старый клиент возьмёт PNG, новый WebP. Для писем WebP лучше вообще не использовать: там до сих пор безопаснее JPEG или PNG.

Удалять исходники. WebP из конвертера — результат сжатия с потерями. Обратный перевод в PNG вернёт формат и альфа-канал, но не вернёт выброшенные при кодировании детали: восстановить то, чего в файле уже нет, нельзя. Исходные PNG держите в репозитории или в архиве макетов.

Конвертировать всё подряд. Прогонять через WebP папку иконок — потерянный вечер ради килобайтов. Сначала отсортируйте картинки по весу и займитесь верхними десятью: обычно на них приходится большая часть веса страницы.

Считать, что формат заменит оптимизацию. WebP на 700 КБ вместо PNG на 2 МБ — всё ещё много для картинки, которая на экране занимает 400 пикселей по ширине. Сначала приведите изображение к разумному разрешению, потом меняйте формат. Порядок именно такой: лишние пиксели дороже, чем неудачный кодек.

Забывать про кеш и разметку. Файл вы поменяли, а страница по-прежнему ссылается на старый PNG или отдаёт его из кеша CDN — и выигрыша не видно. После замены ассетов проверьте фактически отданный тип во вкладке Network браузера: там видно и имя файла, и его вес, и заголовки кеширования. Если в колонке размера всё ещё стоит прежнее число, дело не в формате.

Переводить в WebP всё, а не только веб. Формат называется WebP не случайно: он рассчитан на страницы. Офисные пакеты, часть принтеров и старые сборки графических редакторов его до сих пор не открывают, а формы загрузки документов нередко отклоняют файл с расширением .webp без объяснений. Картинки для презентации, макета или печати оставляйте в PNG. Если такой файл нужно облегчить, а формат менять нельзя, возьмите тот же подбор веса под цель и выберите в списке «Формат» значение PNG — там экономия идёт на перекодировании и обычно не превышает нескольких процентов, зато результат остаётся без потерь.

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

Обратный конвертер, сжатие под заданный вес и остальные инструменты для картинок собраны в разделе конвертеры изображений.