Como usar
- Digite o texto ou escolha o arquivo que você quer incorporar.
- Confira ou informe o Tipo MIME, como image/png ou image/svg+xml, e escolha Base64 ou Codificação percentual em Codificação.
- Copie o data URI gerado para o seu HTML, CSS ou JSON.
- Para inspecionar um data URI existente, cole-o no modo Analisar para ver o tipo MIME, o conjunto de caracteres, o tamanho e uma prévia, e baixe o arquivo incorporado.
Sintaxe do data URI
Um data URI, definido na RFC 2397, carrega um pequeno arquivo dentro da própria URL:
data:[<mediatype>][;base64],<data>
data:text/plain;charset=UTF-8,Hello%20world
data:image/png;base64,iVBORw0KGgo...O tipo de mídia informa ao navegador como interpretar os dados; quando ele é omitido, assume-se text/plain;charset=US-ASCII. O indicador ;base64 significa que a parte depois da vírgula está em Base64. Sem ele, os dados são texto simples em que os caracteres especiais usam codificação percentual.
Base64 ou codificação percentual
Base64 é a escolha certa para arquivos binários, como PNG, JPEG, WebP, fontes e PDFs. Ele sempre acrescenta cerca de 33%. Para formatos de texto, a codificação percentual costuma gerar um resultado menor, porque a maioria dos caracteres fica como está e só alguns, como <, >, #, % e aspas duplas, precisam de escape. Isso a torna ideal para ícones SVG, e o resultado legível também comprime melhor com gzip ou Brotli. Por outro lado, cada byte de texto não ASCII vira três caracteres, então, para texto em chinês ou em cirílico, o Base64 costuma ser mais curto. Na dúvida, teste as duas opções e fique com o resultado mais curto.
/* SVG com codificação percentual no CSS: aspas simples por dentro, # escrito como %23 */
.dot { background: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 8 8'%3E%3Ccircle cx='4' cy='4' r='4' fill='%23f60'/%3E%3C/svg%3E"); }Quando vale a pena incorporar
Um data URI economiza uma requisição HTTP, mas os dados passam a fazer parte do documento que os contém:
- Sem cache separado. Uma imagem incorporada ao HTML é baixada novamente a cada página. Uma incorporada a uma folha de estilo fica em cache junto com esse arquivo, e alterá-la invalida a folha de estilo inteira.
- Primeira renderização mais lenta. Data URIs grandes no CSS atrasam a renderização, porque o navegador precisa baixar e analisar a folha de estilo inteira antes.
- Aumento de tamanho. O Base64 acrescenta um terço, que só em parte é recuperado ao comprimir o HTML ou o CSS.
Com HTTP/2 e HTTP/3, requisições extras custam pouco, então incorpore apenas recursos pequenos, de poucos kilobytes, como ícones, pequenos placeholders ou um fundo essencial, e sirva todo o resto como arquivos normais. Sites com Content Security Policy precisam permitir data: em img-src ou font-src para que imagens e fontes incorporadas sejam carregadas.
Perguntas frequentes
Existe um limite de tamanho para data URIs?
A RFC 2397 não define limite, e os navegadores modernos aceitam data URIs de vários megabytes em imagens e folhas de estilo. Mesmo assim, data URIs grandes não são uma boa ideia: incham a página, não podem ser armazenados em cache separadamente e demoram mais para ser analisados.
Por que um data URI não abre quando clico em um link para ele?
A maioria dos navegadores impede que páginas da web levem a janela principal até uma URL data:, como proteção contra phishing. Use data URIs dentro de imagens, CSS ou links de download, ou cole o URI no modo Analisar desta página para ver a prévia e baixar o conteúdo.
Como uso um data URI em HTML e CSS?
<img src="data:image/png;base64,..."> no HTML, ou background-image: url("data:image/svg+xml,...") no CSS. No CSS, coloque o valor entre aspas, principalmente no caso de SVG com codificação percentual.Preciso especificar um charset?
text/plain ou text/html que contenham caracteres não ASCII, sim: adicione ;charset=UTF-8 depois do tipo de mídia; caso contrário, o padrão US-ASCII pode corromper esses caracteres. Tipos binários como image/png não precisam de charset.