Imagem para Base64

Continuar na ferramenta

Data URI e Base64 em imagens

Data URI e Base64 em imagens: quando usar

Um Data URI embute os bytes de uma imagem direto no HTML, CSS ou JS como texto, no formato `data:[tipo-mime];base64,<dados>` definido pela RFC 2397. Isso elimina uma requisição HTTP separada para o arquivo, mas troca esse ganho por um arquivo de texto sempre maior que o binário original, e essa ferramenta calcula exatamente quanto maior antes de você decidir.

A conta do Base64 e onde ela para de valer a pena

Base64 codifica cada grupo de 3 bytes binários em 4 caracteres ASCII, um overhead fixo de 33%: 1024 bytes (1 KB) viram 1368 caracteres, e uma foto JPEG de 200 KB vira cerca de 267 KB de texto. Essa ferramenta calcula esse overhead exato a partir do tamanho original e do tamanho do texto gerado, em vez de você estimar de cabeça.
A ferramenta marca como "grande" qualquer Data URI acima de 20.000 caracteres, o que corresponde a uma imagem original de cerca de 15 KB (15.360 bytes viram 20.480 caracteres pela mesma conta de 4 para 3). Acima desse ponto, o texto embutido some do cache de imagens do navegador e é redownloaded junto do HTML ou CSS a cada visita à página, ao contrário de um `<img src>` normal, que o navegador cacheia à parte e reaproveita entre páginas.
A armadilha real é confiar na extensão do arquivo para saber o formato: essa ferramenta lê a assinatura de bytes (magic bytes) do conteúdo decodificado, os 8 bytes iniciais 89 50 4E 47 0D 0A 1A 0A identificam PNG, FF D8 FF identifica JPEG, e um RIFF seguido de "WEBP" no offset 8 identifica WebP, entre outras assinaturas. Um `.png` que na verdade começa com FF D8 FF é reconhecido como JPEG, não como PNG.

Três tamanhos, três decisões diferentes

Ícone pequeno (Base64 compensa)

Entrada: PNG de 1024 bytes (1 KB)
Saída esperada: 1368 caracteres em Base64 (+33%)

Para um ícone assim, os 344 caracteres extras custam menos do que uma requisição HTTP a mais.

Foto grande (Base64 não compensa)

Entrada: JPEG de 200 KB
Saída esperada: ~267 KB de texto, sem cache próprio de imagem

A imagem embutida é baixada de novo a cada carregamento da página, junto do HTML ou CSS que a contém.

Extensão errada

Entrada: Arquivo `.png` que começa com os bytes FF D8 FF
Saída esperada: Formato identificado como image/jpeg pela assinatura

A ferramenta ignora o nome do arquivo e lê os bytes reais para decidir o tipo MIME.

FAQ da ferramenta completa

O que é um Data URI Base64?

É uma forma de representar dados binários (como uma imagem) usando apenas caracteres de texto ASCII, no formato data:image/png;base64,XXXX. Isso permite embutir a imagem diretamente no código HTML ou CSS, sem um arquivo separado.

Quando devo embutir imagens em Base64?

Por que o Base64 fica maior que o arquivo original?

A ferramenta envia minha imagem para algum servidor?

Qual a diferença entre a string Base64 e o Data URI?

Posso usar Base64 com SVG?

Imagens em Base64 são cacheadas pelo navegador?

Como decodifico um Base64 de volta para imagem?

Perguntas frequentes

Por que a imagem em Base64 fica maior que o arquivo original?

Porque a codificação Base64 representa cada 3 bytes binários com 4 caracteres de texto, um overhead fixo de 33% (4/3), qualquer que seja o formato da imagem original.

A partir de que tamanho de imagem o Base64 deixa de valer a pena?

Esta ferramenta usa 20.000 caracteres (cerca de 15 KB de imagem original) como o limite prático: abaixo disso, a requisição HTTP economizada costuma valer mais que o overhead de 33%; acima, o arquivo maior e a perda do cache de imagem pesam mais.

Dá para usar Base64 como background-image no CSS, ou só em tag <img>?

Dá nas duas formas: a ferramenta gera o snippet tanto como atributo src de uma tag <img> quanto como valor de background-image no CSS, a partir do mesmo Data URI.

Como saber o formato real de uma imagem em Base64 se a extensão do arquivo está errada?

A ferramenta decodifica o Base64 e lê a assinatura de bytes do início do arquivo (por exemplo FF D8 FF para JPEG, ou os 8 bytes iniciais de PNG), em vez de confiar na extensão ou em um nome de arquivo digitado errado.

Próximos passos

Continuar na ferramenta

Abrir ferramenta completa

Data URI e Base64 em imagens

Data URI e Base64 em imagens: quando usar

A conta do Base64 e onde ela para de valer a pena

Base64 codifica cada grupo de 3 bytes binários em 4 caracteres ASCII, um overhead fixo de 33%: 1024 bytes (1 KB) viram 1368 caracteres, e uma foto JPEG de 200 KB vira cerca de 267 KB de texto. Essa ferramenta calcula esse overhead exato a partir do tamanho original e do tamanho do texto gerado, em vez de você estimar de cabeça.

A ferramenta marca como "grande" qualquer Data URI acima de 20.000 caracteres, o que corresponde a uma imagem original de cerca de 15 KB (15.360 bytes viram 20.480 caracteres pela mesma conta de 4 para 3). Acima desse ponto, o texto embutido some do cache de imagens do navegador e é redownloaded junto do HTML ou CSS a cada visita à página, ao contrário de um `<img src>` normal, que o navegador cacheia à parte e reaproveita entre páginas.

A armadilha real é confiar na extensão do arquivo para saber o formato: essa ferramenta lê a assinatura de bytes (magic bytes) do conteúdo decodificado, os 8 bytes iniciais 89 50 4E 47 0D 0A 1A 0A identificam PNG, FF D8 FF identifica JPEG, e um RIFF seguido de "WEBP" no offset 8 identifica WebP, entre outras assinaturas. Um `.png` que na verdade começa com FF D8 FF é reconhecido como JPEG, não como PNG.

Três tamanhos, três decisões diferentes

Ícone pequeno (Base64 compensa)

Entrada: PNG de 1024 bytes (1 KB)
Saída esperada: 1368 caracteres em Base64 (+33%)

Para um ícone assim, os 344 caracteres extras custam menos do que uma requisição HTTP a mais.

Foto grande (Base64 não compensa)

Entrada: JPEG de 200 KB
Saída esperada: ~267 KB de texto, sem cache próprio de imagem

A imagem embutida é baixada de novo a cada carregamento da página, junto do HTML ou CSS que a contém.

Extensão errada

Entrada: Arquivo `.png` que começa com os bytes FF D8 FF
Saída esperada: Formato identificado como image/jpeg pela assinatura

A ferramenta ignora o nome do arquivo e lê os bytes reais para decidir o tipo MIME.

FAQ da ferramenta completa

O que é um Data URI Base64?

Quando devo embutir imagens em Base64?

Por que o Base64 fica maior que o arquivo original?

A ferramenta envia minha imagem para algum servidor?

Qual a diferença entre a string Base64 e o Data URI?

Posso usar Base64 com SVG?

Imagens em Base64 são cacheadas pelo navegador?

Como decodifico um Base64 de volta para imagem?

Perguntas frequentes

Por que a imagem em Base64 fica maior que o arquivo original?

Porque a codificação Base64 representa cada 3 bytes binários com 4 caracteres de texto, um overhead fixo de 33% (4/3), qualquer que seja o formato da imagem original.

A partir de que tamanho de imagem o Base64 deixa de valer a pena?

Dá para usar Base64 como background-image no CSS, ou só em tag <img>?

Dá nas duas formas: a ferramenta gera o snippet tanto como atributo src de uma tag <img> quanto como valor de background-image no CSS, a partir do mesmo Data URI.