Как пользоваться
- Перетащите файл WebP в область загрузки, нажмите на неё, чтобы выбрать файл, или вставьте изображение. Подойдут и файлы PNG и JPEG.
- Чтобы получить WebP из другого формата, выберите WebP в списке «Преобразовать в» и настройте качество.
- При желании ограничьте ширину в параметре «Макс. ширина», а затем сравните исходный размер и размер после кодирования.
- Скопируйте или скачайте data URI, чистый Base64, тег HTML img, CSS background-image или Markdown.
Что такое WebP?
WebP — формат изображений, выпущенный Google в 2010 году. Он объединяет в себе сжатие с потерями на основе видеокодека VP8, отдельный режим без потерь, альфа-канал и анимацию. Тип MIME — image/webp, а поскольку файл представляет собой контейнер RIFF, результат Base64 начинается с UklGR. По данным Google, файлы WebP без потерь примерно на 26% меньше PNG, а файлы с потерями на 25–34% меньше JPEG при сопоставимом качестве.
Почему WebP подходит для data URI
Base64 добавляет к любому файлу одну и ту же треть, поэтому самый маленький исходный файл даёт самую короткую строку. Это делает WebP естественным выбором: значок PNG с прозрачностью после преобразования в WebP сохраняет прозрачность и обычно становится меньше, а фотография JPEG уменьшается при схожем визуальном качестве. При очень высоком качестве файл может получиться больше оптимизированного оригинала, поэтому проверьте размер после кодирования, прежде чем копировать.
Анимированные файлы WebP сохраняют все кадры, если кодировать их без изменений. При преобразовании или изменении размера заново отрисовывается только один кадр.
Поддержка в браузерах и почтовых клиентах
Все актуальные основные браузеры показывают WebP: Chrome, Edge, Firefox, Opera и Safari 14 и новее. Поддержки нет только в очень старых браузерах, например в Internet Explorer. С почтой ситуация иная: ряд настольных почтовых клиентов, включая Outlook для Windows, не отображает WebP, поэтому в шаблонах писем используйте PNG или JPEG.
Создание data URI для WebP на JavaScript
// Чтение файла, выбранного пользователем
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Повторное кодирование canvas в WebP с качеством 80%
const uri = canvas.toDataURL('image/webp', 0.8);Если браузер не умеет кодировать WebP, toDataURL молча возвращает PNG, поэтому проверьте, что результат начинается с data:image/webp.
Часто задаваемые вопросы
Можно ли здесь преобразовать PNG или JPEG в WebP Base64?
Да. Загрузите изображение, выберите WebP в списке «Преобразовать в» и настройте качество. Для преобразования используется встроенный в браузер кодировщик, а результат кодируется как data:image/webp.
Сохраняет ли Base64 анимацию WebP?
Да, если не выбрано преобразование и не задана максимальная ширина. Тогда строка Base64 содержит точную копию файла со всеми кадрами.
Все ли браузеры показывают изображения data:image/webp?
Такие изображения отображаются во всех актуальных версиях браузеров Chrome, Edge, Firefox, Opera и Safari. В Internet Explorer и в Safari до версии 14 они не показываются.