O que é Gerador de Data URI?

O Gerador de Data URI converte arquivos em Data URIs codificados em base64 que podem ser incorporados diretamente em HTML, CSS ou JavaScript. Elimina requisições HTTP extras para recursos pequenos como ícones e fontes.

Solte um arquivo de até 20 MB e a ferramenta detecta o tipo MIME, codifica os bytes em base64 e entrega três trechos prontos para colar: a data URI bruta, a regra CSS background-image e a tag HTML img. Imagens vêm com pré-visualização ao vivo, dá para perceber saída em branco ou corrompida antes de ir para produção. Você também pode colar texto para codificar uma string SVG ou JSON, reduzir imagens grandes antes de codificar para manter a URI pequena, corrigir o tipo MIME se ele foi detectado errado, codificar vários arquivos de uma vez, buscar um arquivo remoto direto pela URL ou alternar para o modo decodificar para colar uma data URI e baixar o arquivo original de volta.

Como usar

1. Envie um arquivo pelo seletor, ou mude para o modo texto e cole uma string (SVG, JSON, CSS) para codificar.
2. A ferramenta codifica o arquivo em base64 e gera a Data URI completa com o tipo MIME correto.
3. Copie a Data URI para usar em atributos img src, CSS background-image ou código JavaScript.

Quando usar

• Incluir um logo pequeno em uma demo HTML de arquivo único sem hospedar nada.
• Embutir imagens em e-mails para aparecerem mesmo quando o cliente bloqueia carregamento remoto.
• Colar uma fonte ou SVG dentro do CSS para eliminar uma requisição que bloqueia a renderização.

Resultado

Converta um favicon.png de 2KB em uma Data URI e cole diretamente no seu HTML — uma requisição de rede a menos em cada carregamento de página.

Perguntas frequentes

Por que a data URI codificada fica cerca de 33% maior que o arquivo?

O base64 representa cada 3 bytes binários com 4 caracteres ASCII, então cresce 33%. Com gzip na resposta HTTP a maior parte volta, mas o arquivo HTML ou CSS no disco continua maior que o recurso original.

Qual é o limite prático de tamanho para uma data URI?

Algo perto de 10 KB antes da codificação é o ponto razoável para embutir. Acima disso, o navegador ainda interpreta mas você perde cache (é reprocessada a cada página) e o HTML ou CSS fica difícil de editar. Para arquivos maiores vale hospedar normalmente.

Dá para usar data URI como imagem de fundo no CSS?

Sim, a ferramenta já entrega a regra CSS pronta. Coloque a URI dentro de url() em background-image. O navegador decodifica na primeira pintura, o ícone pequeno fica inline e some uma requisição de rede que adiaria o primeiro render.

O navegador armazena uma data URI em cache como uma imagem comum?

Não. A data URI faz parte do documento pai, então só entra em cache junto com o documento. A mesma imagem referenciada em vinte páginas é reprocessada vinte vezes. Para recursos compartilhados entre páginas, uma URL hospedada normal sai mais rápida no total.

Data URIs funcionam em e-mails HTML?

Gmail e Apple Mail mostram. Outlook (versão desktop do Windows) remove. Para compatibilidade ampla, anexe a imagem como parte referenciada por CID em vez de incluir a data URI dentro do corpo HTML.

Ferramentas relacionadas