Converter WebP para Base64
WebP é o formato de imagem do Google projetado para produzir arquivos menores que JPEG e PNG mantendo qualidade comparável. Suporta compressão com perdas, compressão sem perdas e animação. Esta ferramenta codifica arquivos WebP para Base64 para incorporação em HTML, CSS ou payloads de API.
Como Usar
- Solte um arquivo WebP na área de upload ou clique para navegar
- A ferramenta lê e codifica o arquivo localmente
- Selecione o formato de saída: Base64 puro, data URI ou CSS background
- Copie o resultado
Por que WebP para Incorporação Base64
A principal vantagem do WebP sobre JPEG/PNG é o tamanho do arquivo. Arquivos menores produzem strings Base64 mais curtos, o que importa quando esses strings são incorporados em HTML ou CSS:
| Imagem (1920x1080) | JPEG qualidade 80 | PNG | WebP qualidade 80 |
|---|---|---|---|
| Fotografia | ~250 KB | ~1,5 MB | ~180 KB |
| Captura com texto | ~400 KB | ~800 KB | ~200 KB |
| Gráfico simples | ~100 KB | ~50 KB | ~40 KB |
| Sobrecarga Base64 | +33% | +33% | +33% |
Recursos WebP Preservados em Base64
Modos com e sem perdas
WebP suporta ambos os modos de compressão. WebP com perdas (padrão) é similar a JPEG mas mais eficiente. WebP sem perdas compete com PNG.
Transparência alfa
Diferente de JPEG, WebP suporta transparência em ambos os modos. Um WebP com perdas com transparência é tipicamente muito menor que um PNG com o mêsmo conteúdo.
Animação
WebP animado é uma alternativa ao GIF com compressão dramaticamente melhor.
Suporte a Navegadores
Data URIs WebP funcionam em todos os navegadores que suportam imagens WebP:
- Chrome: desde a versão 17 (2012)
- Firefox: desde a versão 65 (2019)
- Safari: desde a versão 14 (2020)
- Edge: desde a versão 18 (2018)
O suporte global excede 97%. Para os ~3% restantes (Safari antigo no iOS 13 e anteriores), você precisaria de um fallback para PNG ou JPEG.
WebP Base64 em Fluxos de Trabalho Modernos
Otimização de imagem em frameworks
Frameworks modernos como Next.js convertem automaticamente imagens para WebP. Converter a saída WebP para Base64 dá o menor payload inline possível.
Melhoria progressiva
Você pode usar WebP Base64 em CSS com fallback PNG:
.hero {
background-image: url(data:image/png;base64,...);
}
@supports (background-image: url("data:image/webp;base64,UklGR")) {
.hero {
background-image: url(data:image/webp;base64,...);
}
}Exportação de Canvas
O método canvas.toDataURL('image/webp', qualidade) permite exportar conteúdo de canvas diretamente como data URI WebP.
Para outros formatos, veja JPG para Base64, PNG para Base64, SVG para Base64 ou o conversor geral Imagem para Base64. Para decodificar Base64 de volta para imagem, use Base64 para Imagem.