Data URI Encoder / Decoder
Understand Data URI Encoder / Decoder
Um data URI carrega o conteúdo de um arquivo dentro da própria URL, então uma imagem, fonte ou SVG pode ser embutida diretamente no HTML ou no CSS em vez de ser buscada.
How it works
O formato é data:<tipo-mime>;base64,<payload> — por exemplo, data:image/svg+xml;base64,PHN2Zy4uLg==. O texto que você digita é codificado em UTF-8 e depois em Base64; um arquivo solto na ferramenta é lido como bytes brutos e o tipo MIME vem do próprio arquivo. O Base64 acrescenta cerca de um terço ao tamanho, que é a troca feita contra uma requisição HTTP economizada.
When to use it
- Embutir um ícone ou SVG pequeno no CSS, para que ele apareça já na primeira pintura em vez de depois de uma segunda requisição.
- Embutir imagens em um e-mail HTML, em que muitos clientes bloqueiam URLs de imagem externas por padrão.
- Montar uma página HTML de arquivo único ou um bookmarklet que precisa funcionar sem servidor por trás.
- Extrair o payload de uma URL data: encontrada em uma folha de estilo para ver o que ela contém de fato.
Watch out for
- Um data URI não pode ser cacheado por conta própria. Os bytes viajam dentro de cada cópia do documento que os referencia, então acima de cerca de 5 KB um arquivo externo costuma vencer em visitas repetidas.
- A decodificação espera a forma ;base64,. Um data URI percent-encoded — data:image/svg+xml,%3Csvg... — é perfeitamente válido e não é tratado aqui.
- A decodificação exibe o payload como texto, então um PNG ou um WOFF volta como caracteres ilegíveis. Para SVG e outros formatos de texto, você recupera o código-fonte real.
- O Content-Security-Policy bloqueia URLs data: a menos que a diretiva as permita, então uma página que envia img-src 'self' não vai renderizar uma imagem embutida. Navegadores também bloqueiam a navegação de nível superior para uma URL data:, então não dá para pré-visualizar uma colando-a na barra de endereços.
Frequently Asked Questions
Quando usar data URIs?
Data URIs eliminam requisições HTTP para recursos pequenos. Bons usos: ícones e SVGs pequenos no CSS (url("data:image/svg+xml,...")), imagens embutidas em e-mails HTML, em que URLs externas são bloqueadas, aplicações HTML de arquivo único e fontes embutidas no CSS sem uma requisição de rede separada.
Qual é a sobrecarga de tamanho da codificação base64?
A codificação base64 acrescenta cerca de 33% ao tamanho. Um PNG de 30KB vira cerca de 40KB como data URI. Para recursos acima de aproximadamente 5KB, o aumento de tamanho e a impossibilidade de cachear separadamente costumam tornar os arquivos externos mais eficientes que os data URIs.
Posso usar data URIs para bundles JavaScript?
Não — navegadores bloqueiam a execução de scripts a partir de URLs data: em muitos contextos, por questões de segurança (XSS). Data URIs são seguros para imagens, fontes, folhas de estilo e SVGs usados em background-image ou em atributos src de elementos que não são scripts.
How to Use Data URI Encoder / Decoder
- Paste or type your input in the input area above.
- The tool processes your input automatically or click Run.
- Copy or download the result using the action buttons.
- Use Ctrl+Enter to run quickly from the keyboard.