Codificação
Data URI / Imagem Base64
Codificação de uma imagem em Data URI (data:image/…;base64,…) para inserção em CSS/HTML, e decodificação de um Data URI ou Base64 bruto de volta para um arquivo — tudo diretamente no navegador.
A pré-visualização da imagem aparecerá aqui.
A Data URI embeds a file's contents (usually an image) directly into HTML or CSS as a Base64 string, instead of linking to a separate file. This removes an extra network request at the cost of a larger document.
How to use it
- Encode: upload an image and the tool generates a ready data:image/…;base64,… string to paste into src, href, or CSS.
- Decode: paste a Data URI or raw Base64 to get the original file back for download.
- The copied string can be pasted straight into an HTML attribute or a CSS property with no extra processing.
Common uses
- Embedding small icons or sprites in CSS to avoid an extra HTTP request.
- Building email templates, where external images can get blocked by the email client.
- Quickly previewing an image as a self-contained string without uploading the file anywhere.
Things to keep in mind
Base64 encoding grows the data by about 33% — for large images, a Data URI is usually a worse choice than a separate file with browser caching.
A Data URI isn't cached separately from the document it's embedded in — it gets re-downloaded along with the page every time.
Artigo sobre esta ferramenta: Data URI: quando incorporar imagens diretamente no código
Perguntas frequentes
Quando devo usar um Data URI em vez de um arquivo de imagem normal?
Data URIs são úteis para imagens pequenas e usadas com frequência, como ícones ou logos, quando você quer evitar uma requisição HTTP extra — por exemplo, incorporando uma imagem direto no CSS ou HTML inline.
Existem desvantagens em usar Data URIs para imagens?
Sim. Elas aumentam o tamanho do arquivo (cerca de 33% maior que a imagem crua, por causa do Base64), não são armazenadas em cache separadamente como uma URL de imagem real, e muitos navegadores e clientes de e-mail impõem limites práticos de tamanho.
Esta ferramenta envia minha imagem para algum lugar?
Não. A imagem é lida e codificada inteiramente no seu navegador — nunca é enviada a um servidor.
É possível usar Data URI para SVG sem Base64?
Sim. O SVG é texto (XML), então em vez de Base64 basta o percent-encoding dos caracteres especiais: data:image/svg+xml,%3Csvg...%3E. Essa variante é mais compacta e continua editável diretamente num arquivo CSS.
É possível inserir um Data URI num atributo href ou background-image?
Sim, o Data URI funciona em qualquer lugar onde se espera uma referência a um recurso — em src, href, background-image no CSS e até em @import. A sintaxe e os limites de tamanho são os mesmos que para a tag img.