Gerador de Data URI

Um data URI (ou data URL) incorpora o conteúdo de um arquivo diretamente dentro de uma string — data:<mime-type>;base64,<data> — para que possa ser usado em qualquer lugar onde uma URL normal seja esperada sem uma solicitação HTTP separada. Esta ferramenta cria um a partir de um arquivo enviado ou texto colado e relata exatamente quanto maior a versão codificada é do que a original.

Como usá-lo

1. Escolha uma fonte: Enviar Arquivo (qualquer tipo de arquivo — imagem, fonte, PDF, áudio, qualquer coisa) ou Inserir Texto (cole texto bruto, HTML, CSS, JavaScript ou markup SVG e escolha seu tipo MIME).
2. Para um upload de arquivo, o navegador detecta automaticamente o tipo MIME do arquivo em si. Se estiver errado ou você precisar de um tipo diferente, marque Substituir tipo MIME detectado e insira um manualmente (ex. image/png, font/woff2).
3. Copie o Data URI resultante — está pronto para colar em um <img src>, CSS background-image: url(...), um campo JSON ou @font-face src.
4. Verifique a tabela Tamanho e Tipo para o tipo MIME detectado/escolhido, o tamanho em bytes original, o tamanho do data URI codificado e o aumento percentual.
5. Se a fonte for uma imagem, uma Visualização ao vivo aparece abaixo do data URI para que você possa confirmar se foi decodificado corretamente antes de usá-lo.

Tudo é executado localmente no seu navegador — um arquivo que você envia nunca é enviado para um servidor.

Por que o data URI é muito maior do que o arquivo original?

A codificação Base64 representa cada 3 bytes de dados binários como 4 caracteres ASCII, o que por si só adiciona cerca de 33% ao tamanho. Além disso, o prefixo data:<mime-type>;base64, adiciona uma pequena sobrecarga fixa. Para um trecho curto, essa sobrecarga pode dominar — codificar 13 bytes de "Hello, World!" produz um data URI mais de 3x o comprimento original — mas para arquivos maiores o aumento percentual converge para a sobrecarga base64 de ~33%.

Quando devo usar um data URI em vez de um arquivo comum?

Data URIs são úteis para ativos pequenos e frequentemente reutilizados — ícones, pequenas imagens de fundo, web fonts, pequenas imagens de espaço reservado — onde economizar uma solicitação HTTP compensa a penalidade de tamanho de ~33% e o fato de que o ativo não pode mais ser armazenado em cache independentemente ou compartilhado entre páginas. Para qualquer coisa maior que alguns quilobytes ou um ativo reutilizado em muitas páginas, um arquivo vinculado normal que o navegador pode armazenar em cache é quase sempre a melhor escolha.

Funciona com texto não-inglês ou emoji?

Sim. O texto colado é codificado UTF-8 antes de ser codificado em base64, portanto caracteres acentuados, texto CJK e emoji fazem o caminho de volta corretamente. (Algumas ferramentas mais antigas usam um truque btoa(unescape(encodeURIComponent(text))) que trata mal certos textos Unicode — esta ferramenta usa TextEncoder diretamente.)

Qual tipo MIME devo escolher para texto colado?

Corresponder o conteúdo: text/plain para texto simples, text/html para fragmentos HTML, text/css para folhas de estilo, text/javascript para scripts e image/svg+xml para markup SVG (isso também é o que faz a visualização SVG renderizar). Obter o tipo MIME correto é importante se o data URI for consumido por algo que o inspecione — um navegador renderizando uma tag <img>, por exemplo, requer um tipo image/*.

Relacionado

Para ir na direção oposta — decodificando um data URI ou string Base64 de volta para texto simples — use Base64 Decode. Para SVG especificamente, SVG to Base64 Encode também produz snippets HTML <img> e CSS background-image prontos para colar ao lado do data URI.