Imagem para Base64
Transforme uma imagem em uma string Base64 ou data URI para colar direto no CSS ou no HTML.
ou solte as imagens aqui
Até 30 MBSuas imagens são processadas no seu navegador e nunca são enviadas- 1Escolha
Escolha uma imagem.
- 2Ajuste
Escolha a saída: Base64 puro, data URI, background em CSS ou uma tag img em HTML.
- 3Baixe
Copie com um clique.
Como usar Imagem para Base64
Escolha a forma que você vai colar
O data URI vai direto em src="…" ou num url() de CSS. O Base64 puro serve para JSON e arquivos de configuração. As linhas prontas de CSS background-image e de HTML <img> estão ali para quando você só quer soltar algo que já funciona. Um clique copia o que você escolheu.
Mantenha pequeno
O Base64 fica cerca de um terço maior que o arquivo que codifica, e mora dentro do seu HTML ou CSS em vez de ser guardado em cache como arquivo separado. Embutir compensa abaixo de 10 KB, para ícones pequenos, espaços reservados e separadores; acima de 50 KB a ferramenta avisa, porque a página vai começar a carregar mais devagar.
Alternativas que vale conhecer
Um SVG quase sempre é melhor colado como marcação do que como Base64: continua editável, aceita estilos e comprime melhor. E tudo que aparece em mais de uma página rende mais como arquivo de imagem comum, que o navegador guarda em cache uma vez e reaproveita.
Perguntas frequentes
Minhas fotos são enviadas para um servidor?
Não. Tudo acontece dentro do seu navegador, então suas fotos nunca saem do seu dispositivo. Feche a aba e não sobra nada.
Até que tamanho de imagem faz sentido usar Base64?
Em geral, até 10 KB. O Base64 fica cerca de 33% maior que o arquivo original, então embutir imagens grandes deixa a página mais lenta.