WebP, PNG или JPG: какой формат использовать на сайте?

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

Что такое формат WebP?

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

• Сжатие с потерями для фото, как у JPG.
• Сжатие без потерь для графики и скриншотов, как у PNG.
• Прозрачность (альфа-канал) в обоих режимах.
• Анимация, как более лёгкая замена GIF.

Файлы имеют расширение .webp. Chrome, Edge, Firefox и Safari показывают их, причем Safari присоединился с версии 14. Любой посетитель с актуальным браузером видит изображения WebP без каких-либо особых действий с вашей стороны.

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

WebP или PNG: что меньше и когда использовать каждый

По данным Google, WebP без потерь примерно на 26% меньше PNG. Оба формата без потерь, так что вы получаете те же пиксели при меньшем объеме. Для графики с прозрачностью WebP с потерями может пойти гораздо дальше: по словам Google, он обычно дает файлы примерно в три раза меньше эквивалента в PNG.

Используйте WebP вместо PNG, когда:

• Изображение размещается на вашем собственном сайте, например логотип, иллюстрация, вырезанный товар или скриншот.
• Вам нужна прозрачность без веса PNG.
• Скорость страницы важна, а изображение большое.

Оставайтесь на PNG, когда:

• Вы отправляете файл кому-то, прикрепляете его к документу или загружаете в форму со списком допустимых типов.
• Вам нужна основная копия для редактирования в программе, которая может не открывать WebP.
• Графика это логотип или значок, которые можно отдавать как SVG: он часто ещё меньше и остаётся чётким при любом размере.

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

WebP или JPG для фото

Для фотографий Google установил, что WebP с потерями на 25–34% меньше сопоставимых JPG при одинаковом показателе качества SSIM. На странице с дюжиной снимков товаров или крупным изображением на первом экране это дает более быструю загрузку, особенно через мобильный интернет.

У JPG все еще два преимущества. Он открывается везде, от старых просмотрщиков фото до принтеров, и это надежный ответ для любого портала загрузки. А современные кодировщики JPG хороши, так что хорошо сжатый JPG правильного размера подбирается довольно близко. Если можно сделать только одно, правильный размер фото важнее смены формата. Фото в 4000 пикселей, показанное шириной 800 пикселей, тратит гораздо больше байтов, чем выбор формата.

Практичный подход для сайта: храните оригиналы в JPG или PNG и публикуйте версии WebP под ширину отображения. Более широкое сравнение PNG и JPG поможет выбрать формат для мастер-файлов.

Краткое сравнение

• Размер файла в вебе: обычно меньше всех WebP, затем JPG для фото или PNG для графики.
• Прозрачность: у WebP и PNG есть, у JPG нет.
• Анимация: у WebP есть, у PNG и JPG нет (вместо них GIF или видео).
• Совместимость вне браузеров: лучше всех JPG, PNG чуть позади, WebP слабее всех в старых приложениях и формах загрузки.
• Редактирование без потерь: PNG или WebP без потерь.

Как перевести PNG или JPG в WebP

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

1. Если изображение больше, чем будет показываться, сначала измените размер. Инструмент «Изменить размер фото» задает точную ширину и сохраняет пропорции.
2. Откройте конвертер WebP и добавьте файлы JPG или PNG.
3. Конвертируйте и скачайте. Проверьте, что прозрачные области остались прозрачными, а текст на скриншотах чёткий.
4. Если WebP все еще тяжелее, чем хотелось бы, сожмите его еще раз с желаемым размером в КБ.
5. Загрузите WebP на сайт и обновите ссылки на изображения.

Для фотографий разумная отправная точка это качество с потерями около 75–85. Сравните результат с оригиналом в полном размере и снижайте качество дальше, только если разницы не видно.

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

Как проверить, что сайт отдает WebP

CMS или CDN может заявлять, что создает WebP, но стоит это проверить. В Chrome или Edge откройте страницу, нажмите F12, чтобы открыть инструменты разработчика, и перейдите на вкладку Network. Перезагрузите страницу и отфильтруйте по Img. Столбец Type показывает формат, в котором пришло каждое изображение, а столбец Size показывает, сколько байтов оно заняло.

Если там все еще видны большие файлы JPG или PNG, копии WebP не отдаются. Частые причины: плагин кеширования отдает старый HTML, изображения добавлены своим кодом в обход CMS или тема жестко прописывает адреса изображений. Сначала исправьте такие страницы, начиная с самых тяжелых изображений.

Должны ли все изображения на сайте быть в WebP?

Большинство могут быть. Есть несколько исключений, о которых стоит знать:

• Простые логотипы и значки часто лучше сделать в SVG.
• Файлы, которые люди должны скачивать, например фото для пресс-кита или графику для печати, удобнее отдавать как JPG или PNG.
• Изображения для шеринга в соцсетях (картинка Open Graph, которая показывается, когда делятся ссылкой) надежнее делать в JPG или PNG, ведь вы не контролируете все приложения, которые их читают.
• Если нужно поддерживать очень старый браузер, отдавайте запасной JPG или PNG с помощью HTML-элемента picture элемент.

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

Как открыть или перевести скачанный файл WebP

Актуальные версии «Фотографий» в Windows и Preview на Mac открывают файлы WebP, а любой браузер покажет такой файл, если перетащить его во вкладку. Проблемы начинаются, когда вы загружаете файл туда, где принимают только JPG или PNG, или редактируете его в старой программе.

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

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