WebP создает файлы На 25–35 процентов меньше, чем PNG для одного и того же изображения и сохраняет прозрачный фон, которым славится PNG. Этот единственный факт объясняет, почему Google создал WebP и почему большинство современных веб-сайтов теперь его поддерживают. Контраргумент PNG обширен: он открывается во всех когда-либо написанных программах, включая программы, которые никогда не слышали о WebP. Таким образом, выбор не в том, какой формат технически лучше, потому что WebP явно таковым является. Речь идет о том, оптимизируете ли вы для современного веб-сайта или для гарантированной совместимости повсюду. В этом руководстве они подробно сравниваются по степени сжатия, прозрачности, режимам качества, поддержке браузеров, анимации и скорости страницы, а затем даются четкие правила выбора.

Что такое WebP и почему Google его создал

WebP — это формат изображений, выпущенный Google в 2010 году и основанный на технологии сжатия видеокодека VP8. Цель была простой: уменьшить размер веб-изображений, чтобы страницы загружались быстрее. У Google были данные, чтобы знать, что изображения доминируют по весу страницы, и что сокращение трети каждого изображения значительно ускорит работу Интернета. WebP с самого начала был разработан для замены трех форматов одновременно, соответствующих Прозрачность PNG, фотографическое сжатие JPG и анимация GIF. в одном контейнере. Благодаря этим амбициям он может делать то, чего PNG не может.

Что такое PNG и почему он существует

PNG появился в 1996 году как непатентованная замена GIF, использующая сжатие DEFLATE без потерь и добавляющий полный альфа-канал. Он стал стандартом для логотипов, значков, снимков экрана и любой графики, требующей прозрачного фона. Почти три десятилетия всеобщей поддержки – вот его ров. Любой браузер, операционная система, почтовый клиент, офисный пакет и редактор изображений читают PNG без установки. Когда изображение абсолютно необходимо открыть где-то неизвестно, PNG — это формат, который никогда не подведет.

Размер файла: WebP явно выигрывает

WebP сжимает лучше, чем PNG практически во всех сценариях. Для типичного логотипа или изображения пользовательского интерфейса с прозрачностью следует ожидать Снижение от 25 до 35 процентов переход из PNG в WebP без потерь. Перейдите в режим с потерями WebP, и экономия резко вырастет, часто от 60 до 70 процентов, при сохранении альфа-канала. У PNG вообще нет опции с потерями, поэтому он не может конкурировать на нижнем уровне. На сайте с десятками графических ресурсов эта разница составляет сотни килобайт на загрузку страницы.

Разрыв возникает из-за более разумного сжатия. Алгоритм PNG DEFLATE — это метод общего назначения, заимствованный из ZIP, который хорошо подходит для поиска буквального повторения. WebP использует предиктивное кодирование, созданное специально для изображений, угадывая каждый блок по его соседям и сохраняя только разницу. Такой подход с учетом изображений дает экономию, которую DEFLATE не видит, поэтому формат 2010 года так последовательно превосходит формат 1996 года.

Прозрачность: она есть у обоих, WebP делает больше

В отличие от JPG, оба формата имеют полный альфа-канал, поэтому логотип в любом из них остается прозрачным. Но WebP добавляет то, чего PNG не может сравниться: прозрачность в режиме с потерями. Прозрачность PNG обеспечивается только при сжатии без потерь, поэтому полупрозрачная графика должна храниться с полным весом без потерь. WebP позволяет одновременно иметь прозрачный фон и агрессивное сжатие, а это именно то, что нужно тяжелому логотипу PNG. Для ресурсов пользовательского интерфейса и вырезов продукта, которые должны оставаться прозрачными и при этом весить меньше, эта комбинация является самым сильным аргументом WebP.

Качество: режимы без потерь и с потерями

WebP предлагает оба режима, что делает его гибким, чего нет у PNG:

WebP без потерь точно соответствует PNG, пиксель за пикселем, создавая при этом файл меньшего размера. Здесь нет компромисса в качестве, есть только выигрыш в размере.
WebP с потерями отбрасывает детали, как это делает JPG, еще больше сжимая файлы, и, в отличие от JPG, он все еще может сохранять прозрачность.

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

Поддержка браузера и программного обеспечения

Это единственное реальное преимущество PNG, и оно сужается. Каждый современный браузер поддерживает WebP., включая Chrome, Firefox, Safari и Edge, поэтому в открытой сети вопрос совместимости практически решен. Пробелы существуют и в других местах: некоторые старые настольные программы, некоторые почтовые клиенты, старые версии Office и устаревшие платформы по-прежнему отвергают WebP. Формы загрузки — еще одна ловушка, поскольку многие принимают только JPG и PNG и категорически отказываются от файла WebP.

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

Анимация: WebP также заменяет GIF

Одна возможность, которой PNG просто не хватает, — это анимация. Стандартный PNG содержит один кадр, и хотя расширение APNG существует, его поддержка всегда была непоследовательной. WebP поддерживает анимация изначально с полной альфой, создавая файлы гораздо меньшего размера, чем эквивалентный GIF, и отображая при этом миллионы цветов вместо 256 цветов GIF. Если вы выбираете между форматами для короткой зацикленной графики, WebP решительно превосходит как PNG, так и GIF.

Почему WebP ускоряет веб-сайты

Вес страницы напрямую зависит от Самая большая содержательная краска, один из основных веб-показателей Google и подтвержденный сигнал ранжирования. Изображения обычно являются самым тяжелым элементом на странице, поэтому сокращение каждого из них на треть оказывает заметное влияние на время загрузки, показатель LCP и показатель отказов. Более быстрые страницы также лучше конвертируются, поэтому работа над производительностью окупается дважды.

Практический шаблон, используемый большинством сайтов, является прогрессивным: предоставляйте WebP браузерам, которые его поддерживают, а в остальном используйте PNG или JPG. Современный HTML обрабатывает это автоматически с помощью элемента изображения, и большинство систем управления контентом и сервисов изображений делают это за вас. Вы получаете выигрыш в скорости, ничего не нарушая для старых клиентов.

Когда использовать каждый формат

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

Как конвертировать PNG в WebP

Конвертация не требует установки. Откройте наш преобразователь, добавьте свой PNG и выберите вариант с сохранением прозрачности, который экспортирует WebP. Обработка выполняется локально через HTML5 Canvas API, поэтому ничего не загружается, и вы можете объединить несколько файлов одновременно. Прозрачный фон остается неизменным, а файл становится значительно светлее. Полное прохождение находится в Руководство по преобразованию PNG в WebP.

А что насчет АВИФ?

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

Вердикт

WebP выигрывает по техническим достоинствам во всех отношениях: файлы меньшего размера, прозрачность как в режиме без потерь, так и в режиме с потерями, анимация и полная поддержка современных браузеров. PNG выигрывает в одном, что по-прежнему важно: открывается абсолютно везде без вопросов. Используйте WebP для своего веб-сайта и PNG для всего, что вы отправляете в неизвестность, и используйте WebP с резервным PNG, если вам нужно и то, и другое. Для изображения более широкого формата Руководство по использованию PNG и JPG обложки, куда помещаются фотографии.

Примеры реальных размеров

Абстрактные проценты помогают меньше, чем реальные цифры, поэтому вот как выглядит разрыв на типичных активах:

А Логотип размером 500 на 500 пикселей с прозрачностью: около 45 КБ как PNG-24, около 30 КБ как WebP без потерь и менее 12 КБ как WebP с потерями с неповрежденным альфа-каналом.
А полноэкранное изображение героя с мягкими тенями: часто 400 КБ или более в формате PNG, примерно 260 КБ в формате WebP без потерь и значительно менее 100 КБ в формате WebP с потерями.
А Набор значков пользовательского интерфейса из двадцати небольших графических изображений: весь набор может уменьшиться примерно с 200 КБ до 130 КБ без потерь, без какой-либо настройки с потерями.

Умножьте пример героя на дюжину страниц, и вы сэкономите секунды времени загрузки при медленном соединении, а это именно та разница, которую измеряет Core Web Vitals.

Преобразование существующей библиотеки PNG

Большинство сайтов не запускаются с нуля; у них уже развернуты сотни PNG. В зависимости от вашей настройки работают три подхода. Если ваш сайт работает на современной платформе или CMS, конвейер изображений, вероятно, автоматически преобразует и обслуживает WebP, поэтому вы меняете настройки, а не файлы. Если вы используете CDN или службу изображений, большинство из них предлагают автоматическое согласование формата, доставляя WebP в браузеры, которые его принимают, а PNG в те, которые его не поддерживают, из одного и того же исходного файла. А если вы управляете файлами вручную, пакетное преобразование ресурсов и обновление ссылок работает, хотя это и самый трудоемкий процесс.

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

Распространенные ошибки WebP, которых следует избегать

Несколько ловушек ловят людей, переходящих на WebP:

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

Ничто из этого не является причиной избегать WebP. Это причины использовать его там, где ему место, а именно: доставку в современные браузеры, сохраняя при этом PNG для мастер-файлов и для всего, что находится под вашим контролем.

Как браузеры на самом деле выбирают формат

Обслуживание двух форматов звучит сложно, но механизм прост и автоматический. Каждый браузер отправляет заголовок Accept с каждым запросом изображения, перечисляя поддерживаемые им форматы. Сервер или CDN считывает этот заголовок и возвращает WebP браузеру, который рекламирует поддержку, или PNG тому, который этого не делает, с того же URL-адреса. В HTML вы можете сделать то же самое явно с элементом изображения, указав сначала источник WebP, а затем резервный PNG; браузер выбирает первый, который может прочитать, и игнорирует остальные. В любом случае, ни один посетитель никогда не увидит битое изображение, и современные браузеры спокойно получают файл меньшего размера, а старые — совместимый.

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

WebP лучше PNG?

Технически да. Файлы WebP на 25–35 процентов меньше., сохраняйте прозрачность и добавляйте режимы с потерями и анимацию, которых нет в PNG. PNG выигрывает только в универсальной совместимости.

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

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

Насколько WebP меньше PNG?

Обычно На 25–35 процентов меньше без потерьи на 60–70 процентов меньше в режиме с потерями, сохраняя при этом прозрачность.

Все ли браузеры поддерживают WebP?

Каждый современный браузер поддерживает WebP., включая Chrome, Firefox, Safari и Edge. Некоторые старые настольные программы и формы загрузки по-прежнему отклоняют его.

Какие форматы поддерживают прозрачность и анимацию?

WebP делает и то, и другое. PNG имеет прозрачность, но не имеет надежной анимации, а GIF анимируется, но ограничен 256 цветами с грубой прозрачностью.

Что лучше для веб-сайта: WebP или PNG?

WebP для скорости. Файлы меньшего размера улучшают качество отрисовки самого большого содержимого., сигнал ранжирования Core Web Vitals. Предоставляйте резервный вариант PNG для старых клиентов.

Должен ли я использовать WebP или AVIF?

WebP, на данный момент. AVIF сжимает примерно на 20 процентов лучше, но имеет более узкую поддержку., поэтому WebP сегодня представляет собой прагматичный баланс экономии и совместимости.

Могу ли я загрузить файл WebP в форму?

Часто нет. Многие формы загрузки принимают только JPG и PNG., поэтому преобразуйте его в один из них, когда система перечисляет принятые форматы и опускает WebP.

Должен ли я конвертировать существующие файлы PNG в WebP?

Конвертируйте копии для доставки, а не мастеров. Сохраните исходные PNG-файлы., поскольку поддержка WebP в настольном программном обеспечении и формах загрузки более узкая.

Подходит ли WebP с потерями для снимков экрана с текстом?

Нет. Сжатие с потерями размазывает резкие буквы, точно так же, как это делает JPG. Используйте WebP без потерь для текстовой графики и снимков экрана.

Нужен ли мне резервный вариант PNG с WebP?

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

Как браузер узнает, загружать ли WebP или PNG?

Через Принять заголовок, который он отправляет с каждым запросом, в котором перечислены поддерживаемые форматы. Серверы и CDN считывают его и автоматически возвращают WebP или резервный PNG.