Почему WebP вместо PNG
PNG хранит пиксели без потерь: для скриншота или плоского логотипа это правильно, а для фотографии, градиента или текстуры — дорого. WebP умеет и то, и другое: у него есть режим с потерями (как у JPEG) и при этом полноценный альфа-канал, которого JPEG лишён. Поэтому картинка с прозрачностью впервые может быть одновременно лёгкой и не обрезанной по краям.
На нашей тестовой картинке (1100×1100, блик + зерно + прозрачность) разница такая:
- исходный PNG — 1259 КБ;
- WebP, качество 78 — 27.8 КБ (−98%), прозрачность на месте;
- тот же PNG, пережатый без потерь, — 1105 КБ (−10%).
Цифры зависят от картинки: на плоском логотипе с десятком цветов PNG-8 может выиграть у WebP, и тогда честнее оставить PNG. Кнопка «Авто» выбирает формат по содержимому, а режим «Лучший» просто прогоняет несколько кодеков и берёт самый лёгкий результат.
Что происходит с файлом
Пайплайн один и тот же для всех форматов: декод → ресайз → кодирование → оптимизация. Ресайз идёт до кодирования — иначе интерполяция намешала бы новых цветов уже поверх сжатия. Метаданные (EXIF, GPS, профиль камеры) в вывод не переносятся.
- Качество — сколько деталей отдаём кодеку. Для WebP разумный диапазон 75–85.
- Разрешение — самый недооценённый рычаг: картинка 4000 px шириной на макете шириной 1200 px весит вчетверо дороже, чем нужно.
- Целевой вес — если нужен файл «не больше 200 КБ», задайте его, и качество подберётся само.
- Lossless — WebP без потерь: обычно на 20–30% меньше исходного PNG при полном совпадении пикселей.
FAQ
Сохранится ли прозрачность?
Да. Альфа-канал живёт через весь пайплайн — и в режиме с потерями тоже. Проверить можно прямо в превью: под картинкой видна шахматка.
Файлы уходят на сервер?
Нет. Кодеки — это WebAssembly, они работают в вашей вкладке; ни один байт изображения не отправляется наружу. Сервер отдаёт только саму страницу.
Все ли браузеры показывают WebP?
Да, все актуальные: Chrome, Firefox и Edge — много лет, Safari — начиная с версии 14 (2020 год, macOS Big Sur и iOS 14). Для писем формат по-прежнему рискованный: часть почтовых клиентов WebP не рендерит, туда лучше отдавать JPEG.
Сколько файлов можно закинуть разом?
До 100 за раз. Настройте один файл, нажмите «Применить ко всем» — и заберите архивом.
Чем это отличается от обычного «сжать PNG»?
Тем, что меняется контейнер. «Сжать PNG» — это квантизация палитры и оптимизация без потерь внутри того же формата; перевод в WebP даёт другой кодек и, как правило, кратно меньший файл на фотографическом содержимом.