pressione ⌘K para trocar de ferramenta
IMAGE

Conversor Imagem → Data URI

Converte um arquivo de imagem em Data URI codificado em base64.

local
image-datauri

🖥 Images are encoded locally in your browser — never uploaded.

§01 SOBRE ESTA FERRAMENTA

Visão geral

Um Data URI embute o conteúdo de um arquivo diretamente em uma URL, na forma data:<mime-type>;base64,<data>. Esta ferramenta converte qualquer imagem para esse formato, para você embuti-la em um <img src>, em um background-image de CSS ou em um payload JSON. O arquivo é lido com FileReader.readAsDataURL no seu navegador; nada é enviado. Depois da conversão você tem o nome do arquivo, o tamanho original, o tamanho codificado, uma pré-visualização renderizada e o URI completo pronto para copiar.

Como usar

  1. Clique em Choose image e selecione um arquivo. A conversão acontece imediatamente.
  2. Confira a linha de informação (nome, KB de origem, KB do Data URI) e a pré-visualização para ter certeza de que a imagem certa foi codificada.
  3. Aperte Copy para colocar o Data URI completo na sua área de transferência.

Exemplos

  • Um favicon PNG de 1 KB se torna uma cadeia começando com data:image/png;base64,iVBORw0KGgo… que você pode colar em <link rel="icon" href="…">.
  • Embutir um pequeno ícone de seta no CSS: background-image: url("data:image/svg+xml;base64,…") para eliminar uma requisição.

Observações

Data URIs não são cacheados separadamente do documento que os contém, e cadeias muito longas podem deixar editores e diffs lentos. Reserve essa técnica para recursos de poucos kilobytes.

FAQ
Minha imagem é enviada para um servidor?
Não. O arquivo é lido com a API FileReader do navegador e codificado localmente. Nada é enviado.
Por que o Data URI é maior que o arquivo original?
O Base64 representa cada 3 bytes de dados binários como 4 caracteres ASCII, então a cadeia codificada fica cerca de 33% maior que o arquivo de origem. A ferramenta mostra os dois tamanhos para você comparar, por exemplo «logo.png · 4.2 KB · Data URI 5.6 KB».
Quando eu deveria embutir imagens como Data URI?
Para recursos pequenos (ícones, logotipos minúsculos, fallbacks de SVG inline) em que economizar uma requisição HTTP compensa a sobrecarga de tamanho. Imagens grandes normalmente são melhor servidas como arquivos separados, já que Data URIs inflam o HTML/CSS e não podem ser cacheados de forma independente.