Imagem e Foto

Imagem para Base64

Codifique uma imagem como data URI Base64 para CSS ou HTML.

  • Instantânea
  • Grátis
  • Privada (processada localmente)
  • Sem registo

Processada localmente: a sua imagem não sai do dispositivo.

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.

  1. Largue a sua imagem

    PNG, JPG, WebP, GIF, SVG… qualquer formato de imagem é aceite e mantido tal e qual: sem recodificação, sem perdas.

  2. Escolha a saída

    Data URI bruto, background-image CSS pronto a colar, ou uma etiqueta <img> HTML completa.

  3. 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çãoData URI?Porquê
Ícone ou logótipo < 10 KBSimPoupa um pedido HTTP, exibição imediata
E-mail HTMLSimAs imagens externas são muitas vezes bloqueadas por defeito
Foto ou banner > 100 KBNão+33 % de peso, sem cache separada, renderização mais lenta
Imagem repetida em várias páginasNãoUm 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.