Image to Base64
Converte uma imagem em uma URL de dados Base64 com um botão de cópia e uma verificação de tamanho ao vivo — inteiramente no seu navegador.
What is Image to Base64?
Uma URL de dados Base64 codifica os bytes binários de uma imagem diretamente em uma string de texto prefixada com data:image/png;base64, para que a imagem possa ser incorporada dentro de HTML, CSS ou JSON sem uma solicitação de arquivo separada. O navegador decodifica essa string novamente em pixels no momento do render, o que remove uma viagem de ida e volta HTTP, mas aumenta a carga em cerca de 33 por cento porque o Base64 usa apenas 64 dos 256 valores de byte possíveis. As URLs de dados são úteis para ícones pequenos, fundos de CSS inline, avatares SVG e modelos de HTML ou e-mail autocontidos onde cortar solicitações externas é mais importante do que o overhead de tamanho. Essa ferramenta lê uma imagem solta ou escolhida inteiramente no navegador por meio da API FileReader e retorna uma URL de dados pronta para ser colada ao lado de uma comparação de tamanho lado a lado.
How to Use Image to Base64
- Arraste uma imagem para a zona de soltar, ou clique nela para escolher uma do seu dispositivo.
- A ferramenta lê o arquivo com FileReader e produz uma string data:image/...;base64,… .
- Clique em "Copiar URL de dados" para copiar a string completa, então cole-a em uma tag <img src="…">, uma url(…) CSS ou um campo JSON.
- Compare o tamanho do arquivo original com o tamanho da URL de dados para julgar se a incorporação vale a pena o overhead de cerca de 33%.
Examples
Ícone PNG pequeno
Input: favicon.png de 512 bytes
Output: data:image/png;base64,iVBORw0KGgo… (≈ 684 caracteres)
Foto JPEG
Input: foto.jpg de 120 KB
Output: data:image/jpeg;base64,/9j/4AAQ… (≈ 160 KB codificado)
Common Mistakes
- Incluir fotos grandes como URLs de dados — a expansão de 33% e a perda de cache separado tornam as páginas mais lentas, não mais rápidas, após alguns centenas de kilobytes.
- Esquecer de citar a URL de dados dentro do CSS url("…"), o que pode quebrar a análise quando a string contém caracteres que não são válidos em um token não citado.
- Colar uma URL de dados em um contexto que truncia silenciosamente valores de atributos muito longos (alguns CMSs e bancos de dados), corrompendo a imagem sem um erro.
- Tratar uma URL de dados como um substituto de CDN — ela não pode ser armazenada em cache de forma independente, servida com cabeçalhos de cache ou deduplicada em várias páginas.
Why Use This Tool
- 100% cliente — sem upload, sem servidor e continua funcionando offline uma vez que a página é carregada.
- Cópia de um clique da string completa data:image/...;base64,…, pronta para HTML, CSS ou JSON.
- Comparação de tamanho ao vivo entre o arquivo original e a URL de dados codificada, para que a troca de inclusão seja visível.
- Trata PNG, JPEG, GIF, WebP, SVG, BMP e mais através do pipeline padrão do FileReader.