Conversor de imagem para Base64
Transforme uma imagem em uma string Base64 para colar no código.
O texto Base64 fica cerca de 37% maior que o arquivo original. É uma boa opção para ícones pequenos, não para fotos inteiras.
Funciona no navegador. Seus arquivos nunca saem do seu dispositivo.
- URL de dados, CSS e HTML
- Funciona com qualquer imagem
- Nada é enviado
Como converter uma imagem para Base64
- Solte uma imagem aqui, ou toque em Escolher arquivos.
- Copie a URL de dados, o Base64 puro, ou um trecho pronto de CSS ou HTML.
- Cole no seu código.
Como a codificação funciona
O Base64 transforma cada 3 bytes da imagem em 4 caracteres de texto, usando os 64 caracteres de A a Z, a a z, 0 a 9, mais e barra, o alfabeto padrão da RFC 4648.
Uma URL de dados é esse texto com um prefixo curto, como data:image/png;base64, para que um navegador ou app saiba o que está vendo sem um arquivo separado.
| Arquivo original | Texto Base64 (cerca de 37% maior) |
|---|---|
| Ícone de 5 KB | Cerca de 6,9 KB |
| Logo de 20 KB | Cerca de 27 KB |
| Foto de 100 KB | Cerca de 137 KB |
Essa sobrecarga é o motivo pelo qual as URLs de dados funcionam melhor para gráficos pequenos, não fotos inteiras.
Onde as URLs de dados são usadas
- CSS, dentro de background-image, para que um ícone pequeno carregue junto com a folha de estilo em vez de uma requisição separada.
- HTML, dentro de um atributo img src ou marcação SVG inline.
- Respostas de API em JSON e campos de banco de dados que guardam uma imagem como texto.
- HTML de e-mail, já que alguns clientes de e-mail bloqueiam imagens vinculadas mas permitem dados inline.
Quando manter um arquivo normal
As URLs de dados não ficam em cache separadas da página que as contém, então uma foto usada em dez páginas é baixada dez vezes em vez de uma só. Para qualquer coisa maior que um ícone pequeno, um arquivo de imagem normal com cache do navegador carrega mais rápido.
Perguntas frequentes sobre Imagem para Base64
O que é uma URL de dados Base64?
São os bytes de uma imagem escritos como texto, então você pode colar uma imagem direto no HTML, CSS ou JSON sem um arquivo separado.
O Base64 deixa o arquivo maior?
Sim, em cerca de 37 por cento, já que a codificação transforma cada 3 bytes da imagem em 4 caracteres de texto.
Quando devo usar uma URL de dados em vez de um arquivo?
Para ícones pequenos e gráficos simples, quando economizar uma requisição de rede importa mais do que o tamanho da página. Para fotos, mantenha um arquivo de imagem normal.
Minha imagem é enviada para algum lugar?
Não. A codificação roda no seu navegador, então a imagem nunca sai do seu dispositivo.
Converter para Base64 muda a qualidade da imagem?
Não. Os dados dos pixels não são alterados, só reescritos como texto, então decodificar de volta dá exatamente os bytes originais.
Existe um tamanho máximo para uma URL de dados?
Os navegadores não impõem um limite rígido, mas uma URL de dados longa não pode ser armazenada em cache sozinha e deixa a análise mais lenta, então use só em ícones e gráficos pequenos.
Todo navegador suporta URLs de dados?
Sim. As URLs de dados funcionam em todo navegador importante desde o Internet Explorer 8, incluindo todos os navegadores móveis atuais.
Posso usar isso para um favicon?
Um favicon pequeno pode ser incorporado como URL de dados no head do HTML, embora um arquivo favicon.ico normal mais os tamanhos em PNG ainda seja a configuração mais comum.