EN
PT
ES
Codificador/Decodificador de Imagem em Base64
Converta imagens para data URL em base64 e vice-versa. Solte um arquivo ou cole uma data URL — nada sai do seu navegador.
O que é uma data URL em base64?
Uma data URL embute um arquivo pequeno direto numa string no formato data:<mime>;base64,<payload>. O navegador trata como qualquer URL — dá para colocar em <img src>, num background-image de CSS ou numa assinatura de e-mail. O base64 aumenta o tamanho original em ~33%, então só compensa para assets bem pequenos (ícones, sprites, avatares). Para qualquer coisa maior, melhor servir o arquivo normal por trás de uma CDN.
Como usar a ferramenta
No modo Codificar, solte ou escolha uma imagem e copie o formato que precisar: data URL completa, base64 puro (sem prefixo) ou uma tag <img> pronta. No modo Decodificar, cole qualquer data URL ou string base64 e a imagem volta a aparecer na pré-visualização — útil quando você acha uma no CSS de outra pessoa ou num e-mail HTML exportado e quer saber o que é. Use o chip no topo para alternar.
Quando (e quando não) embutir imagens
Casos bons: logos pequenos e ícones que viajam no mesmo HTML/CSS, gráficos de assinatura em e-mails transacionais, embutir um asset numa demo HTML de um arquivo só. Casos ruins: imagem hero, galerias, qualquer coisa reaproveitada em várias páginas — o base64 quebra o cache HTTP daquele asset, impede o download paralelo, infla o HTML/CSS e prejudica a métrica Largest Contentful Paint. Regra prática: até ~2 KB codificado costuma ser tranquilo; acima disso, prefira o arquivo normal.
Tipos MIME comuns
O tipo MIME após data: diz ao navegador como decodificar o conteúdo — errar (mandar um JPG como image/png, por exemplo) quebra a imagem silenciosamente em alguns navegadores.
| Formato | Tipo MIME | Observações |
|---|---|---|
| PNG | image/png | Lossless, supports transparency. Best for icons and UI. |
| JPG / JPEG | image/jpeg | Lossy. Best for photos. No transparency. |
| WebP | image/webp | Smaller than PNG/JPG; supported by all modern browsers. |
| GIF | image/gif | Animated, 256-colour. Heavier than WebP/MP4 for video. |
| SVG | image/svg+xml | Vector. Prefer URL-encoded over base64 in CSS. |
Perguntas frequentes
A imagem sai do meu navegador?
FileReader direto para uma string de data URL em JavaScript. Não há upload, nem chamada para servidor, nem analytics levando a imagem. Dá para arrastar uma imagem com a internet desligada que continua funcionando.Por que o base64 fica tão maior que o arquivo?
data:<mime>;base64,.Dá para embutir um SVG sem base64?
data:image/svg+xml;utf8,<svg…>) e ficam bem menores que a versão em base64. A ferramenta entrega a versão base64 por compatibilidade; em CSS de produção, prefira a versão URL-encoded.Imagem embutida fica em cache no navegador?
Posso decodificar uma string base64 qualquer?
data:, a ferramenta tenta detectar o tipo da imagem pelos bytes mágicos (PNG, JPG, GIF, WebP, SVG). Se a detecção falhar, aparece o erro de "inválido" e você pode adicionar manualmente um prefixo data:image/png;base64,.Por que minha data URL tem quebras de linha?
<img src>, mas alguns sistemas não. Esta ferramenta sempre gera o base64 numa linha só; se você colar uma string com quebras no modo decodificar, removemos os espaços em branco antes de decodificar.