Como usar
- Solte um arquivo WebP na área de arrastar e soltar, clique para escolher um ou cole uma imagem. Arquivos PNG e JPEG também funcionam.
- Para criar um WebP a partir de outro formato, escolha WebP em Converter para e defina a Qualidade.
- Se quiser, defina uma Largura máxima e depois compare os tamanhos original e codificado.
- Copie ou baixe o data URI, o Base64 puro, a tag img do HTML, o background-image do CSS ou o Markdown.
O que é WebP?
O WebP é um formato de imagem lançado pelo Google em 2010. Ele oferece compressão com perdas baseada no codec de vídeo VP8, um modo sem perdas separado, canal alfa e animação, tudo em um só formato. O tipo MIME é image/webp e, como o arquivo é um contêiner RIFF, a saída em Base64 começa com UklGR. Segundo o Google, arquivos WebP sem perdas são cerca de 26% menores que PNG, e arquivos com perdas são de 25 a 34% menores que JPEG com qualidade comparável.
Por que o WebP combina com data URIs
O Base64 acrescenta o mesmo terço a qualquer arquivo, então a menor origem gera a string mais curta. Isso faz do WebP uma escolha natural: um ícone PNG transparente convertido para WebP mantém a transparência e geralmente encolhe, e uma foto JPEG fica menor com qualidade visual semelhante. Configurações de qualidade muito altas podem gerar um arquivo maior que um original otimizado, então confira o tamanho codificado antes de copiar.
Arquivos WebP animados mantêm todos os quadros quando você os codifica sem alterações. Converter ou redimensionar renderiza novamente um único quadro.
Suporte em navegadores e clientes de e-mail
Todos os principais navegadores atuais exibem WebP: Chrome, Edge, Firefox, Opera e Safari 14 ou posterior. Só navegadores muito antigos, como o Internet Explorer, não têm suporte. No e-mail é diferente: vários clientes de e-mail para desktop, incluindo o Outlook para Windows, não renderizam WebP, então use PNG ou JPEG em templates de e-mail.
Como criar data URIs de WebP em JavaScript
// Lê um arquivo selecionado pelo usuário
const reader = new FileReader();
reader.onload = () => console.log(reader.result); // "data:image/webp;base64,UklGR..."
reader.readAsDataURL(file);
// Recodifica um canvas como WebP com 80% de qualidade
const uri = canvas.toDataURL('image/webp', 0.8);Se o navegador não consegue codificar WebP, toDataURL recorre silenciosamente ao PNG, então verifique se o resultado começa com data:image/webp.
Perguntas frequentes
Posso converter PNG ou JPEG para WebP em Base64 aqui?
Sim. Carregue a imagem, escolha WebP em Converter para e defina a Qualidade. A conversão usa o codificador integrado ao seu navegador, e o resultado é codificado como data:image/webp.
O Base64 mantém a animação do WebP?
Sim, desde que nenhuma conversão esteja selecionada e nenhuma largura máxima esteja definida. Assim, a string Base64 contém o arquivo exato, com todos os quadros.
Todos os navegadores exibem imagens data:image/webp?
Todas as versões atuais do Chrome, Edge, Firefox, Opera e Safari exibem. O Internet Explorer e as versões do Safari anteriores à 14 não.