Imagem para Base64
Transforme uma imagem em um URI de dados que você pode colar direto em CSS ou HTML.
- Roda no seu dispositivo — o arquivo nunca é enviado a lugar nenhum
- Sem cadastro, sem marcas d'água, sem cotas diárias
- Grátis, sem limite de quantas vezes você usa
Como funciona
Um URI de dados incorpora uma imagem diretamente no seu código-fonte, em vez de referenciar um arquivo separado. Isso elimina uma requisição de rede, o que importa para imagens minúsculas que, de outra forma, custariam uma ida e volta cada uma.
Quando vale a pena
Ícones pequenos, logotipos e gráficos de uma só cor. Abaixo de aproximadamente 2 KB, a requisição economizada costuma compensar o custo. Acima disso, uma referência normal a um arquivo é melhor.
A penalidade de tamanho
O Base64 codifica três bytes como quatro caracteres, então um URI de dados fica cerca de 33% maior que o arquivo. Ele também não pode ser armazenado em cache separadamente — é baixado de novo a cada cópia da folha de estilo ou da página que o contém.
Onde colar
Direto em um url() do CSS ou em um atributo src de img. O resultado já traz o prefixo correto do tipo de mídia.
Imagem para Base64 — perguntas
Por que há um limite de tamanho?
URIs de dados pertencem ao código-fonte, e as muito grandes incham todas as páginas que as incluem. O limite é de 2 MB.
Funciona com SVG?
SVG é texto, então pode ser incorporado diretamente, sem Base64, o que fica menor.
Minha imagem é enviada?
Não. A codificação acontece no seu navegador.