PNG в WebP: Как конвертировать и уменьшить размер изображений PNG

Последнее обновление: June 27, 2026

PNG — это подходящий формат для четкой графики и прозрачности, но файлы формата PNG довольно большие, особенно для фотографического контента. Конвертация PNG в WebP сохраняет резкость и альфа-канал, при этом значительно уменьшая размер файла (байты). Сложность заключается в правильном выборе между безпотерьным (lossless) и с потерями (lossy) WebP, поскольку подходящий режим зависит от содержимого изображения. В этом руководстве мы рассмотрим оба варианта с реальными измеренными размерами.

Краткий ответ: стоит ли конвертировать PNG в WebP?

Да, для веб-изображений — WebP сохраняет прозрачность и резкость PNG при значительно меньшем размере. Выбирайте режим в зависимости от контента:

Для одного изображения используйте Image Converter; для нескольких — используйте cwebp. Решение о выборе формата подробно описано в image formats explained.

Сколько экономит переход с PNG на WebP?

Это полностью зависит от выбранного режима WebP, поскольку PNG является безпотерьным форматом, и сравнение не совсем корректно.

Два честных вывода из этих цифр. Во-первых, безпотерьный WebP для фотографии все еще большой (568 KB), потому что безпотерьное кодирование не может удалить шум на фото. Если контент — это фотография, то должен использоваться потерянный WebP, а не безпотерьный. Во-вторых, безпотерьный WebP отлично подходит для плоской графики: на скриншотах и элементах UI он обычно на 20–30% меньше, чем PNG с идентичными пикселями. Подбирайте режим к контенту.

Исходный материал для всех четырех форматов показывает, где находится PNG относительно альтернатив:

Какие изображения должны остаться в формате PNG?

Некоторые изображения вообще не должны быть преобразованы. Сохраняйте PNG, если изображение является логотипом или иконкой, которая могла бы быть SVG вместо этого (векторный формат меньше и четче), или когда вы передаете данные в систему, требующую именно PNG — некоторые конвейеры для печати, некоторые устаревшие редакторы и большинство обменов дизайн-инструментов ожидают PNG. Для одной крошечной иконки (менее ~3 KB) преобразование не стоит сложности конвейера; оставьте ее в формате PNG. Правило принятия решения то же самое, что и в объяснении форматов изображений: преобразуйте PNG в WebP, когда важны байты и место назначения — веб-браузер, сохраните PNG, если важнее совместимость или векторная альтернатива.

Метод 1: Конвертер в браузере

Для одного изображения используйте Imagic AI Image Converter: загрузите PNG, выберите WebP, выберите без потерь для графики или качество ~80 для фотографий и скачайте. Squoosh отлично подходит для сравнения без потерь и с потерями бок о бок, прежде чем вы решитесь.

Метод 2: командная строка cwebp

## Lossless WebP (best for graphics, screenshots, sharp text, transparent UI)
cwebp -lossless input.png -o output.webp

## Lossy WebP (best if the PNG is actually a photo)
cwebp -q 80 input.png -o output.webp

## A folder of PNGs, lossless, in parallel
mkdir -p out
ls *.png | xargs -P 4 -I {} cwebp -lossless {} -o out/{}.webp

Флаг -lossless является ключевым — без него cwebp по умолчанию использует сжатие с потерями (lossy), что размывает тонкие края. Всегда используйте -lossless для графики и скриншотов.

Метод 3: Python (Pillow)

from PIL import Image
from pathlib import Path

def png_to_webp(src: Path, dest: Path, lossless: bool = True, quality: int = 80):
    with Image.open(src) as img:
        img.save(dest, "WebP", lossless=lossless, quality=0 if lossless else quality, method=6)

for f in Path("assets").glob("*.png"):
    # lossless for sharp graphics; switch to lossless=False for photographic PNGs
    png_to_webp(f, Path("out") / f"{f.stem}.webp", lossless=True)

Когда 'lossless=True', значение 'quality' игнорируется; при потерях (lossy) установите его на ~80 для фотографий.

Сохраняет ли WebP прозрачность PNG?

Да. WebP поддерживает полный альфа-канал как в режиме с потерями (lossy), так и без потерь (lossless), поэтому прозрачный PNG становится прозрачным WebP без дополнительных усилий. Это основная причина для конвертации элементов пользовательского интерфейса (UI assets) и вырезанных изображений продуктов: вы сохраняете прозрачность и теряете большинство байтов. Подробности о прозрачности см. в как сделать прозрачные изображения.

Как использовать WebP с резервным вариантом PNG?

Поддержка WebP составляет ~98%, но для старых клиентов и электронной почты сохраните резервный вариант PNG:

<picture>
  <source srcset="/img/icon.webp" type="image/webp">
  <img src="/img/icon.png" alt="Description" width="200" height="200" loading="lazy">
</picture>

Браузер выбирает первый поддерживаемый им тип; PNG <img> является окончательным резервным вариантом. Для четкой графики зарезервируйте width/height, чтобы макет не смещался. Полный шаблон резервного копирования, включая AVIF, см. в WebP converter guide.

Когда переход от PNG к WebP является ошибкой?

• Электронная почта. Многие почтовые клиенты игнорируют WebP. Для рассылок лучше использовать PNG (или JPEG).
• Когда вам нужен вместо этого JPEG. Если PNG — это фотография для маркетплейса, который принимает только JPEG, преобразуйте его в JPEG, а не в WebP. См. WebP to JPG.
• Старые встроенные браузеры без поддержки WebP — хотя fallback через <picture> решает эту проблему.
• Когда PNG уже очень маленький. Иконке размером 2KB мало что даст конвертация; затраты на пайплайн не стоят этого.

Распространенные ошибки

• Использование WebP с потерями для четкой графики. Потерянные данные размывают тонкие края и текст. Используйте -lossless для скриншотов и UI.
• Использование WebP без потерь для фотографий. Он остается большим, потому что режим без потерь не может удалить фотошум. Используйте с потерями (lossy).
• Отказ от резервного варианта PNG. Старые браузеры и электронная почта требуют тег PNG <img>.
• Забывать сначала изменить размер. WebP размером 4000px — это все равно загрузка в 4000px, независимо от формата.
• Обработка PNG как фотоформата. Если изображение — это фотография, то изначально, вероятно, было JPEG/RAW — конвертируйте из правильного источника.

Часто задаваемые вопросы

Сколько экономит преобразование PNG в WebP?

Для фотографического контента — на 25–35% меньше при равном качестве; для плоской графики с прозрачностью — часто даже больше. WebP поддерживает как режим с потерями (lossy), так и без потерь (lossless), а также альфа-канал, поэтому он покрывает функционал PNG, но в меньшем размере.

Должен ли каждый PNG стать WebP?

Для доставки в вебе — да, с запасным вариантом PNG для очень старых браузеров. Сохраните мастер-файл PNG, если вы можете его перередактировать, потому что WebP lossy — это генерация сжатия. Подавайте WebP через элемент <picture> с резервным вариантом PNG.

Поддерживает ли WebP прозрачность?

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

Какое преобразование через командную строку?

cwebp -q 80 input.png -o output.webp. Флаг -q устанавливает качество (80 — это веб-стандарт). Для режима без потерь используйте -lossless. Пакетная обработка с помощью цикла shell или ImageMagick. См. руководство по конвертеру WebP.

Поддерживает ли WebP анимацию?

Да — WebP поддерживает анимированные изображения, которые меньше эквивалентных анимированных GIF. Для коротких циклов анимированный WebP является современной альтернативой GIF. Для более длинной анимации видео (MP4) по-прежнему остается меньшим и лучше.

Следует ли мне конвертировать PNG в WebP с потерями или без потерь?

С потерями для фотографий (гораздо меньше, незаметная потеря при качестве 80); без потерь для графики, текста и мастер-файлов, где каждый пиксель должен быть точным. WebP поддерживает оба режима. Распространенная ошибка — конвертировать логотип с потерями, что добавляет артефакты к острым краям — сохраняйте графику в режиме без потерь, а фотографии — с потерями.

Что такое флаг качества cwebp?

Флаг -q устанавливает качество с потерями по шкале от 0 до 100 — 80 является веб-стандартом (незаметная потеря, примерно четверть байтов качества 100). Для графики, где каждый пиксель должен быть точным, используйте вместо -q флаг -lossless. Более высокое качество означает больший файл с уменьшающейся видимой отдачей; 80 — это практический «золотой стандарт» для доставки фотографий в вебе.

Ускоряет ли преобразование PNG в WebP мой сайт?

Да, измеримо — WebP на 25–35% меньше, чем PNG для того же контента, поэтому страницы с большим количеством графики загружаются быстрее, и улучшается LCP. Экономия накапливается на странице с десятками иконок или графических элементов. Подавайте WebP с запасным вариантом PNG, чтобы более старые браузеры по-прежнему отображали изображения, и вы получали скорость без потери совместимости.

Источники изображений

• Сравнительная таблица PNG и WebP и столбчатая диаграмма размера — сгенерировано автором на основе фотографии в стиле электронной коммерции (Pexels #16675632, фото Mikael Blomkvist) для демонстрации реальной измеренной экономии при переходе от PNG к WebP.