WebP в Base64 - бесплатно, мгновенно, прямо в браузере
Конвертер WebP в Base64
До 10 МБ. Ничего не загружается — файл не покидает ваше устройство.
Используйте это в атрибуте <img src> или в CSS url().
Без префикса data: — для JSON и API.
Ваши файлы остаются конфиденциальными
Это преобразование целиком выполняется в вашем браузере. Изображение никогда не загружается, поэтому ничто из закодированного здесь не попадает ни на наш сервер, ни к кому-либо ещё.
О преобразовании WebP в Base64
WebP и так компактный. Файл, который в PNG весил бы 40 КБ, в WebP часто оказывается около 15 КБ — а значит, добавляемые Base64 33% в абсолютных числах бьют слабее, чем у любого другого формата. Это делает WebP на удивление хорошим кандидатом на встраивание — с одной оговоркой, никак не связанной с размером.
Как преобразовать WebP в Base64
- 1 Перетащите файл .webp в область загрузки.
- 2 Закодированные варианты появляются сразу, вместе с размером до и после.
- 3 Скопируйте подходящий вариант: data URI, «сырую» строку или правило CSS.
Встраивание лишает вас запасного варианта
Обычный способ отдавать WebP — элемент picture, который предлагает сначала WebP, затем JPG или PNG, позволяя каждому браузеру взять понятное ему. Data URI так не умеет: это одна строка с одним типом медиа, и браузер, не умеющий раскодировать WebP, просто ничего не покажет. Поддержка сегодня очень широка, поэтому в открытом вебе это кусается редко, — но кусается в почтовых клиентах, в старых встроенных браузерах и в настольных приложениях, рисующих HTML устаревшим движком.
Где это уместно
Везде, где вы управляете средой исполнения и уверены, что WebP раскодируется: внутренняя панель показателей, админка, расширение браузера, приложение на Electron, дизайн-система для заведомо современной аудитории. Там вы одновременно получаете сжатие WebP и отсутствие лишнего запроса — лучше встраивание почти не бывает. На публичной маркетинговой странице, где важны и доли процента посетителей, предпочтите элемент picture и обычный файл.
Главная потеря всё же кеширование
Поскольку файлы WebP невелики, возникает соблазн встроить их побольше. Именно тут вторая издержка множится: каждое встроенное изображение живёт внутри таблицы стилей, поэтому одна изменённая строка CSS обесценивает их все разом, и посетитель заново скачивает весь набор. Десять маленьких встроенных картинок легко оказываются хуже десяти закешированных файлов. Держите их число небольшим, каждую — действительно крошечной, а остальное оставьте обычными файлами, которые браузер закеширует и переиспользует между страницами.