Conversor de Data URI | Conversão bidirecional entre arquivo e Base64

Transforme qualquer imagem, fonte ou PDF em um Data URI Base64 com esquema data:, e decodifique Data URIs existentes de volta em arquivos para download. A ferramenta mostra o tipo MIME, o tamanho do arquivo e o comprimento Base64, e pré-visualiza imagens em linha.

💡 Sobre esta ferramenta

Embutir um ícone ou logo pequeno como Data URI dentro do seu HTML ou CSS elimina uma requisição HTTP, o que economiza uma ida e volta no carregamento da página. É o truque clássico para background-image em CSS, e-mails HTML e demos de arquivo único onde você não quer recursos externos soltos. O outro lado é a inspeção: quando você encontra um bloco data: na folha de estilo de outra pessoa, muitas vezes precisa saber o que realmente é ou recuperar a imagem original.

Este conversor cobre os dois sentidos com uma troca de aba. O lado de codificação aceita arrastar e soltar e informa de imediato o comprimento Base64 resultante, para você julgar se o recurso é pequeno o bastante. O lado de decodificação analisa um Data URI colado, expõe o MIME e o tamanho decodificado, pré-visualiza imagens e exporta os bytes como um arquivo com nome adequado em um clique.

🧐 Perguntas frequentes

P. Quais tipos de arquivo são aceitos? Tudo o que o navegador conseguir ler: imagens, fontes, PDF, texto puro e mais. O formato Data URI em si não depende do tipo.

P. Quanto o tamanho cresce com Base64? O Base64 aumenta os dados binários em cerca de 4/3. O comprimento Base64 mostrado revela esse acréscimo, por isso embutir combina com recursos pequenos de poucos KB e não com arquivos grandes.

P. Ele lê um Data URI sem ;base64? Sim. Formas com codificação de porcentagem como data:text/plain,Hello também são analisadas, e o tipo MIME é exibido.

P. Que nome o arquivo decodificado recebe? A extensão é deduzida do tipo MIME, gerando nomes como decoded-file.png. Quando o tipo é desconhecido, recorre a .bin.

📚 Curiosidades sobre Data URIs

O esquema Data URI é definido pelo RFC 2397 com a forma data:[<mediatype>][;base64],<data>. Um detalhe que pega muita gente: um Data URI não pode ser cacheado separadamente do documento que o contém, ao contrário de um arquivo externo. Embutir um ícone SVG de 2 KB compensa, mas uma imagem grande reutilizada em várias páginas perde a vantagem do cache. Um uso comum é converter um SVG em Data URI para empregá-lo como fundo CSS sem um arquivo extra, mantendo o componente autossuficiente.

Toda a leitura e conversão de arquivos acontece inteiramente no seu navegador; nada é enviado a um servidor.