Imagem para Base64
Codifique uma imagem como data URI Base64 para CSS ou HTML.
- Instantânea
- Grátis
- Privada (processada localmente)
- Sem registo
Codifique uma imagem em Base64 em dois segundos
O data URI permite incorporar uma imagem diretamente no seu código, sem ficheiro externo. Largue a imagem, escolha o formato de saída — data URI bruto, propriedade CSS ou etiqueta HTML — e copie o resultado.
-
Largue a sua imagem
PNG, JPG, WebP, GIF, SVG… qualquer formato de imagem é aceite e mantido tal e qual: sem recodificação, sem perdas.
-
Escolha a saída
Data URI bruto, background-image CSS pronto a colar, ou uma etiqueta <img> HTML completa.
-
Copie
Um clique em Copiar e o código está na área de transferência, com os tamanhos antes/depois exibidos.
Quando usar (e evitar) o Base64
| Situação | Data URI? | Porquê |
|---|---|---|
| Ícone ou logótipo < 10 KB | Sim | Poupa um pedido HTTP, exibição imediata |
| E-mail HTML | Sim | As imagens externas são muitas vezes bloqueadas por defeito |
| Foto ou banner > 100 KB | Não | +33 % de peso, sem cache separada, renderização mais lenta |
| Imagem repetida em várias páginas | Não | Um ficheiro normal é colocado em cache uma única vez |
Dica: para ícones vetoriais, o SVG inline (colado diretamente no HTML) é muitas vezes mais leve e nítido do que a versão Base64.
Perguntas frequentes
O que é um data URI?
É um URL que contém diretamente os dados do ficheiro, na forma data:image/png;base64,iVBOR… Usa-se em qualquer lugar onde se espera um URL de imagem: atributo src, background-image CSS, favicon…
Porquê codificar uma imagem em Base64?
Para incorporar a imagem diretamente no HTML, CSS ou JSON, sem ficheiro separado nem pedido HTTP adicional. Prático para ícones pequenos, e-mails HTML ou protótipos autónomos.
O Base64 aumenta o tamanho do ficheiro?
Sim, cerca de 33 % em relação ao binário original. É o preço da representação em texto. A compressão gzip/brotli do servidor recupera uma parte, mas um ficheiro normal continua mais eficiente para imagens grandes.
Até que tamanho é boa ideia?
Regra geral, reserve o data URI para imagens com menos de algumas dezenas de KB (ícones, logótipos, padrões pequenos). Acima disso, incha as páginas, impede a cache separada e atrasa a renderização.
A minha imagem é enviada para algum lado?
Não. A leitura e a codificação são feitas pela API FileReader do seu navegador. A imagem nunca sai do seu dispositivo.