O que faz
Esta ferramenta transforma uma imagem em texto Base64 e em um data URI pronto para colar. Um data URI embute a imagem diretamente em HTML, CSS, Markdown, JSON ou em um e-mail, então a página faz uma requisição HTTP a menos e o trecho funciona sem hospedar um arquivo separado. Também funciona ao contrário: cole Base64 ou um data URI para ver a imagem e baixá-la.
Como usar
- Solte uma imagem na área indicada, clique em Escolher imagem ou clique em Exemplo para carregar um logo SVG.
- A prévia mostra a imagem com o tipo, o tamanho do arquivo, o tamanho em Base64 e as dimensões.
- Escolha um formato de Saída:
- Data URI:
data:image/png;base64,…, para atributossrce JSON. - Só Base64: a string pura, opcionalmente quebrada a cada 76 caracteres para uso em MIME e no estilo PEM.
- Fundo CSS: uma declaração
background-image: url("…");completa. - HTML
<img>: uma tag de imagem com o data URI comosrc. - Markdown:
.
- Data URI:
- Copie o resultado. Para decodificar, cole Base64 ou um data URI no campo de entrada e clique em Baixar imagem.
Exemplo
Um PNG de 2×1 pixel vira:
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAIAAAABCAIAAAB7QOjdAAAADUlEQVR4nGP4zwAE/wEHAAH/4iOeWQAAAABJRU5ErkJggg==
Usado em CSS:
.dot { background-image: url("data:image/png;base64,iVBORw0KGgo…"); }
Quando embutir imagens
Embutir ajuda com imagens pequenas e usadas com frequência, como ícones, fundos minúsculos, spinners de carregamento e assinaturas de e-mail. Não é uma boa escolha para fotos e gráficos grandes: o Base64 aumenta o tamanho em cerca de um terço, a imagem não pode ser guardada em cache separadamente da página ou da folha de estilo e atrasa a leitura do resto do arquivo. Como regra geral, mantenha as imagens embutidas abaixo de alguns kilobytes. Para SVG, um data URI com percent-encoding (data:image/svg+xml,…) costuma ser menor que o Base64, e a ferramenta aceita os dois.
Perguntas frequentes
› Minha imagem é enviada para algum lugar?
Não. O arquivo é lido e codificado no seu navegador. Nada é enviado a um servidor, então capturas de tela privadas e designs ainda não lançados ficam no seu dispositivo.
› Quais formatos de imagem são suportados?
PNG, JPEG, GIF, WebP, AVIF, SVG, ICO e BMP. O tipo é detectado pelos próprios bytes do arquivo, não pelo nome.
› Por que o Base64 é maior que o arquivo?
O Base64 escreve cada 3 bytes como 4 caracteres, então o texto fica cerca de 33% maior que o arquivo original. Embuta só imagens pequenas, como ícones; as maiores devem ser referenciadas como arquivos normais.
› Posso transformar Base64 de volta em imagem?
Sim. Cole um data URI ou uma string Base64 pura no campo de entrada. A ferramenta mostra uma prévia, detecta o tipo e permite baixar o arquivo de imagem.