Gerador de Data URI

Gerador de Data URI

Um data URI incorpora o conteúdo do arquivo diretamente em um atributo HTML ou propriedade CSS, substituindo uma URL externa pelos dados do arquivo em si. Esta ferramenta gera data URIs a partir de qualquer arquivo lendo localmente, detectando seu tipo MIME e codificando o conteúdo como Base64.

Como Usar

1. Solte um arquivo na área de upload ou clique para navegar
2. A ferramenta detecta o tipo MIME e codifica o arquivo
3. O formato de saída “Data URI” está selecionado por padrão
4. Copie o data URI completo

Sintaxe do Data URI

Todo data URI segue esta estrutura:

data:[<mediatype>][;base64],<data>

• mediatype: O tipo MIME (ex.: image/png, application/pdf, audio/mpeg). Padrão é text/plain;charset=US-ASCII se omitido.
• ;base64: Indica que os dados estão codificados em Base64. Sem isso, os dados são texto codificado em URL.
• data: O conteúdo real, codificado em Base64 (para binário) ou URL (para texto).

Exemplos:

data:image/png;base64,iVBORw0KGgoAAAANSU...
data:text/html,%3Chtml%3E%3Cbody%3EOl%C3%A1%3C/body%3E%3C/html%3E
data:text/plain;charset=utf-8,Ol%C3%A1%20Mundo

Onde Data URIs Funcionam

Tags img HTML

<img src="data:image/png;base64,iVBORw0KGgo..." alt="Imagem inline" />

Fundos CSS

.icon {
  background-image: url(data:image/svg+xml;base64,PHN2Zy...);
}

Downloads de link HTML

<a href="data:application/pdf;base64,JVBERi..." download="documento.pdf">
  Baixar PDF
</a>

Favicons

<link rel="icon" href="data:image/svg+xml;base64,PHN2Zy..." />

Iframês

<iframe src="data:text/html;base64,PCFET0NUWVBF..." width="100%" height="400"></iframe>

JavaScript

const audio = new Audio('data:audio/mpeg;base64,SUQz...');
const img = new Image();
img.src = 'data:image/png;base64,iVBOR...';

Data URIs vs URLs Externas

Diretrizes Práticas de Tamanho

Acima desses limites, arquivos separados com cache HTTP oferecem melhor desempenho.

Para tipos de arquivo específicos, veja Imagem para Base64, PDF para Base64, Áudio para Base64 ou o gerador de CSS Background Image.