Gerador de data URI

Como criar um data URI

1. Escolha um modo. De texto (o padrão) codifica o que você digita ou cola. De arquivo aceita um arquivo de qualquer tipo, arrastado, colado ou selecionado. Analisar faz o caminho inverso e desmonta um URI.
2. Em De texto, defina o Tipo MIME (por exemplo text/css ou application/json), um Charset e a Codificação: Base64 ou codificado para URL. Em De arquivo, o tipo MIME vem do arquivo e pode ser editado.
3. Escolha o Formato de saída: data URI, url() de CSS, <a> HTML com nome de download ou Markdown. <img> HTML aparece para imagens e @font-face para fontes.
4. Clique em Copiar saída. Baixar arquivo salva o próprio payload, e Salvar como .txt guarda o texto da saída.

Abaixo dos botões, Payload é o tamanho dos dados, Comprimento do URI é o tamanho do resultado e Overhead é a diferença em porcentagem.

A sintaxe do data URI

Um data URI embute um arquivo inteiro em uma URL:

data:[<media type>][;charset=<charset>][;base64],<data>

Alguns exemplos:

A vírgula é obrigatória, mesmo quando os dados estão vazios: data:, é um URI válido e vazio.

Base64 ou codificação de URL

As duas codificações produzem um URI válido; elas diferem em tamanho e legibilidade.

Texto ASCII simples fica mais curto com codificação de URL, e você ainda consegue lê-lo no código-fonte. Cada byte não ASCII custa três caracteres (é vira %C3%A9), então texto em outros alfabetos logo favorece o Base64. Para imagens, fontes, PDFs e outros arquivos binários, use Base64; o gerador avisa se você escolher codificação de URL para dados binários.

A codificação de URL aqui é conservadora: letras, dígitos e - . _ ~ ! $ * + , ; = : @ / ? ficam como estão, e todo o resto recebe escape, incluindo #, %, aspas, parênteses e espaços. Um # cru encerraria o URI, porque os navegadores o leem como início de um fragmento. Para SVG existe uma terceira opção, mais curta, em SVG para data URI.

Onde os data URIs funcionam

• Imagens em <img src>, background-image do CSS, <link rel="icon"> e no poster de um vídeo.
• Fontes no src de @font-face, prático para uma pequena fonte de ícones. O gerador monta a regra para você quando o tipo MIME é de fonte.
• Downloads via <a href="data:..." download="report.csv">, para arquivos gerados em uma página sem servidor.
• Folhas de estilo e scripts carregados com <link href> ou <script src>, quando a Content Security Policy da página permite data: para eles.
• Fixtures de teste e payloads JSON que precisam de um arquivo pequeno inline.

Eles não funcionam em todo lugar. O Chrome e o Firefox bloqueiam a navegação iniciada pela página da aba inteira para uma URL data:, então um link para data:text/html,... não faz nada ao ser clicado. Uma Content Security Policy precisa listar data: em img-src, font-src ou na diretiva correspondente. Muitos clientes de webmail, o Gmail entre eles, descartam totalmente imagens em data URI; veja Base64 em e-mail.

Tamanho e desempenho

O Base64 deixa dados binários cerca de 33% maiores, e o URI se repete em cada página ou folha de estilo que o contém, sem entrada própria no cache. A troca compensa para recursos pequenos, de poucos kilobytes, e não compensa para fotos. Desempenho de data URIs mostra os números. Para imagens em especial, Imagem para Base64 pode redimensionar e converter antes de codificar.

Como montar um data URI no código

Texto codificado para URL em JavaScript:

const uri = "data:text/plain;charset=utf-8," + encodeURIComponent("Prices: 5 € & up");
// data:text/plain;charset=utf-8,Prices%3A%205%20%E2%82%AC%20%26%20up

JSON em Base64 com Python:

import base64, json

obj = {"name": "Ada", "langs": ["en", "fr"]}
uri = "data:application/json;base64," + base64.b64encode(json.dumps(obj).encode()).decode()
# data:application/json;base64,eyJuYW1lIjogIkFkYSIsICJsYW5ncyI6IFsiZW4iLCAiZnIiXX0=

Mais em Base64 em JavaScript e Base64 em Python. Para inspecionar um data URI que você encontrou por aí, use o analisador de data URI.

Perguntas frequentes