Neste artigo
O que sao data URIs?
Um data URI (Uniform Resource Identifier) e um esquema que permite incorporar conteudo de arquivo diretamente em uma string URL em vez de vincular a um arquivo externo. Definido pela RFC 2397, data URIs codificam o conteudo inline usando o formato data:[mediatype][;base64],data. Isso elimina a necessidade de uma requisição HTTP separada para buscar o recurso.
Data URIs sao comumente usados para incorporar pequenas imagens, fontes, SVGs e outros assets diretamente em HTML ou CSS. Em vez de referenciar um arquivo externo com uma URL, todo o conteudo do arquivo e codificado (tipicamente em base64) e colocado inline. Isso pode reduzir requisições HTTP e simplificar o deployment para assets pequenos.
Como criar data URIs
Um gerador de data URI converte conteudo de arquivo ou texto para o formato data URI. O processo envolve identificar o tipo MIME e codificar o conteudo.
- Entrada de texto — insira texto diretamente e especifique o tipo MIME (text/plain, text/html, text/css, application/json). O texto pode ser codificado em URL ou em base64
- Upload de arquivo — faca upload de qualquer arquivo (imagens, fontes, SVGs, documentos) e o gerador determina o tipo MIME automaticamente e codifica o conteudo em base64
- Seleção de tipo MIME — o tipo de midia diz ao navegador como interpretar os dados. Tipos comuns incluem image/png, image/svg+xml, text/css e application/javascript
Experimente gratuitamente — sem cadastro
Gerar um data URI →Quando usar data URIs
Data URIs sao mais beneficos para assets pequenos e frequentemente usados onde eliminar uma requisição HTTP melhora o desempenho.
- Imagens de fundo CSS — incorpore pequenos icones ou padrões diretamente no CSS para evitar requisições extras. Ideal para imagens abaixo de 2-4 KB
- SVGs inline no CSS — incorpore icones SVG como data URIs em propriedades background-image quando o SVG não pode ser colocado diretamente no HTML
- Templates HTML de email — incorpore imagens diretamente no HTML do email porque muitos clientes de email bloqueiam imagens externas por padrão
Perguntas frequentes
Ha um limite de tamanho para data URIs?
Não ha um limite rigido na especificação, mas limites praticos existem. A maioria dos navegadores modernos lida com data URIs de ate varios megabytes, mas o Internet Explorer os limitava a 32 KB. A codificação base64 aumenta o tamanho dos dados em aproximadamente 33%. Para assets maiores que 5-10 KB, arquivos externos com cache adequado sao geralmente mais eficientes.
Os data URIs afetam o desempenho?
Para assets pequenos, data URIs melhoram o desempenho eliminando requisições HTTP. No entanto, dados codificados em base64 sao cerca de 33% maiores que o arquivo original, e data URIs não podem ser armazenados em cache independentemente pelo navegador. Para arquivos grandes, arquivos externos com headers de cache funcionam melhor.
Os data URIs sao seguros?
Data URIs tem implicações de segurança. A maioria dos navegadores bloqueia a execução de JavaScript em data URIs. No entanto, data URIs podem contornar regras de Content Security Policy (CSP) se não configuradas corretamente. Ao aceitar data URIs gerados por usuários, sempre valide o tipo MIME.