Прозрачные изображения без тяжести PNG
Годами PNG был единственным надёжным вариантом для любой веб-картинки с прозрачностью: вырезанных товарных фото, логотипов на цветных шапках, иллюстраций с мягкими тенями. JPG вообще не умеет хранить прозрачность, поэтому дизайнеры мирились с большими PNG как с неизбежной платой. Вырезанное товарное фото 1500×1500 px в PNG часто весит 1,5–3 МБ.
WebP снимает этот компромисс. Он поддерживает полноценный 8-битный альфа-канал и в режиме без потерь, и в режиме с потерями, поэтому фотографическую часть изображения можно сжать как JPG, а прозрачность остаётся плавной. Тот же вырезанный товар обычно получается на 150–400 КБ, а поскольку WebP показывают все современные браузеры, на большинстве сайтов он может напрямую заменить PNG.
Каким PNG это поможет больше всего
Экономия зависит от того, что внутри PNG, а не только от размера файла.
- Фотографическое содержимое с прозрачностью выигрывает больше всего: вырезанные товары, портреты с удалённым фоном, иллюстрации с текстурами. Экономия 70–90 процентов — обычное дело.
- Скриншоты и макеты интерфейсов с градиентами, фотографиями или тенями обычно уменьшаются вдвое и больше.
- Плоские иконки и простые логотипы из нескольких сплошных цветов выигрывают мало. PNG и так сжимает их очень хорошо, а некоторые маленькие иконки могут даже немного вырасти. Для них часто лучше оставить PNG или прогнать его через «Сжать PNG онлайн».
- Уже оптимизированные PNG с уменьшенной палитрой сэкономят меньше, чем свежий экспорт из графического редактора.
В списке файлов для каждого изображения показаны исходный и новый размер, так что легко заметить те, которые конвертировать не стоит.
Как выполняется конвертация
Браузер декодирует каждый PNG, рисует его на canvas в исходном размере в пикселях и кодирует встроенным WebP-кодировщиком — в фоновом воркере, если браузер это поддерживает. Изображение не покидает ваше устройство.
Ползунок «Качество» от 10% до 100%, по умолчанию 90%, управляет сжатием с потерями для цветовых данных. Маска прозрачности сжимается отдельно от цветов и у обычных браузерных кодировщиков не ухудшается от ползунка так же сильно, поэтому края вырезанных объектов остаются чистыми даже на 75%.
Для некоторых сценариев важна одна техническая деталь: canvas работает с предумноженной альфой, поэтому цветовые значения полностью прозрачных пикселей отбрасываются. В браузере или документе этого не видно. Это важно только если вы используете PNG как игровые текстуры или маски, которые полагаются на скрытые цветовые данные под прозрачными областями; такие файлы оставьте в PNG.
Значения качества для графики
Значение по умолчанию 90% выше, чем для фотографий, потому что типичное содержимое PNG — элементы интерфейса, текст и чёткие контуры — показывает артефакты сжатия раньше фотографии.
- 90% — для логотипов, скриншотов интерфейса и иллюстраций с текстом. Почти всегда визуально идентично исходнику.
- 80% — для вырезанных фотографий и крупных изображений в шапке, где важен размер файла. Разница заметна только при увеличении.
- 95–100% — для пиксель-арта, графиков с тонкими линиями и скриншотов мелкого текста. Режим с потерями в WebP хранит цвет в половинном разрешении, из-за чего цветные линии толщиной в один пиксель могут размываться; в верхней части диапазона этот эффект минимален.
Если вы собираетесь менять изображение позже, сохраните исходный PNG. WebP предназначен для финальной опубликованной копии, а обратная конвертация WebP с потерями через «Конвертировать WebP в PNG онлайн» даст большой файл, не восстановив потерянных деталей.
Как использовать результат на сайте
Замените файл изображения и поменяйте расширение в ссылке на него; для современных браузеров других изменений в разметке не нужно. Несколько практических замечаний:
- Подгоните изображение под размер отображения до конвертации. Логотипу, который показывается шириной 240 px, ничего не даёт ширина 2400 px.
- У формата WebP жёсткий лимит — 16383 px по каждой стороне, поэтому очень длинные скриншоты или спрайт-листы больше этого придётся разрезать.
- Принимаются файлы до 50 МБ каждый; пачка конвертируется с одной настройкой качества и скачивается одним ZIP.
- Текстовые блоки и другие метаданные внутри PNG в WebP не копируются.