Imagem para Base64
Transforme uma imagem em uma data URI Base64 que você pode incorporar diretamente em HTML ou CSS.
Como usar Imagem para Base64
- Escolha uma imagem do seu dispositivo.
- Copie a data URI em Base64 ou o trecho de CSS pronto.
- Cole no seu HTML, CSS ou JSON.
Sobre Imagem para Base64
Esta ferramenta codifica uma imagem como uma data URI em Base64 — uma longa string de texto que começa com data:image/...;base64, e contém o arquivo inteiro como texto. Por ser apenas texto, você pode colá-la diretamente em um <img src>, em um background-image de CSS, em uma folha de estilos ou em um payload JSON, e a imagem carrega sem um arquivo separado e sem uma requisição de rede extra. A ferramenta também gera a linha correspondente de background-image em CSS para você, pronta para colar direto.
A codificação acontece no seu navegador com o FileReader nativo, então a imagem nunca é enviada. A ferramenta mostra o comprimento da string resultante, o que é importante porque o Base64 deixa um arquivo cerca de um terço maior que o original — ótimo para ícones e logos pequenos, menos indicado para fotos grandes. Como regra geral, vale a pena incorporar imagens com poucos kilobytes.
Para fazer o caminho inverso e transformar uma data URI de volta em uma imagem visível e baixável, use Base64 para imagem. Se o arquivo for grande, reduza-o primeiro com comprimir imagem ou o redimensionador de imagens para que a string codificada continue gerenciável. Para codificar texto comum em vez de imagens, veja codificar Base64.
Perguntas frequentes
Para que serve uma data URI em Base64?
Ela permite incorporar uma imagem diretamente em HTML, CSS ou JSON como texto, para que ela carregue sem um arquivo separado ou uma requisição de rede. É mais útil para ícones pequenos, logos e imagens de e-mail.
O Base64 deixa a imagem maior?
Sim, um pouco. A codificação Base64 aumenta o tamanho em cerca de um terço, porque representa dados binários usando apenas caracteres de texto. Por isso funciona melhor com imagens pequenas.
Minha imagem é enviada para ser codificada?
Não. A codificação é feita no seu navegador com a API FileReader. O arquivo nunca sai do seu dispositivo.
Posso usar o resultado como um background de CSS?
Sim. A ferramenta monta a linha background-image para você — basta copiá-la para a sua folha de estilos. Você também pode colar a data URI bruta em uma tag img.
Quais formatos posso codificar?
Qualquer imagem que o seu navegador consiga ler, incluindo PNG, JPEG, WebP, GIF e SVG. A data URI preserva o formato original e, no caso do PNG, a sua transparência.