PNG или WebP для картинок с прозрачностью

Прозрачность есть у обоих, так что выбирают не по ней. Расходятся они в другом: PNG восстанавливается побайтово, а WebP у нас кодируется с потерями, с качеством по умолчанию 85 из 100. Для логотипа с ровными заливками и резкими краями это означает риск получить мутную границу, зато файл заметно легче. Для картинки с полутонами и мягкими тенями потери незаметны, а выигрыш в объёме реален.

Локально в браузередо 100 МБбез регистрации

Коротко о цифрах

Прозрачность: поддерживают оба формата
Потери: PNG — без потерь, WebP у нас — с потерями
Качество WebP по умолчанию: 85 из 100, настраивается вручную
Параметр качества у PNG: не передаётся: кодировщик его игнорирует
Общий предел стороны: 4096 точек по длинной стороне канваса

Что у форматов общего

Оба несут альфа-канал, поэтому логотип на прозрачном фоне переживает перевод из одного в другой без белого квадрата.
Оба открываются современными браузерами без установки чего-либо.
Оба проходят через один и тот же канвас, а значит подчиняются потолку в 4096 точек по длинной стороне.
Оба сохраняют исходные размеры в пикселях: перевод формата сам по себе картинку не уменьшает.

Чем они расходятся

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

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

Как выбрать под материал

Логотип, иконка, схема, скриншот с текстом — начинайте с PNG: у резких краёв нет запаса на потери.
Фотография с прозрачным фоном, вырезанный объект, картинка с мягкими тенями — берите WebP.
Сомневаетесь — сделайте оба файла и посмотрите на границу объекта при увеличении в четыре раза, а не на общий вид.
Файл уйдёт в чужую систему — уточните у неё список принимаемых форматов, PNG в этом смысле безопаснее.
Нужен маленький WebP без потерь качества на краях — поднимите качество ближе к 95, выигрыш всё равно останется.

Частые вопросы

Прозрачность точно сохранится при переводе PNG в WebP?

Да, альфа-канал у WebP есть, и белый фон под картинку не подкладывается. Заливка фоном включается только при переводе в JPEG, который прозрачности не поддерживает вовсе, и мы об этом сообщаем.

Почему мой логотип после WebP стал выглядеть грязным по краям?

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

PNG всегда тяжелее WebP?

Нет. На изображении из нескольких плоских цветов — иконке, простой схеме — PNG бывает меньше, потому что кодирует длинные одинаковые участки почти даром и не тратит место на описание переходов.

Что выбрать для картинки, которую вставят в PDF?

Практической разницы почти нет: при сборке PDF из картинок и при сжатии до размера страница всё равно приводится к внутреннему представлению документа, и исходный формат влияет только на промежуточный шаг.