O que é um data URI
É uma forma de colocar um ficheiro dentro do próprio código, em vez de o ligar: data:image/png;base64,iVBORw0….
O navegador lê-o como se fosse um URL, por isso serve em qualquer sítio onde iria o endereço de uma imagem: o
src de uma <img>, um url() de CSS ou um campo de um JSON.
Quando compensa (e quando não)
O Base64 ocupa mais 33 % do que o ficheiro original e não pode ser guardado em cache em separado: se a imagem estiver no CSS, é transferida de novo sempre que o CSS muda. Compensa para:
- Ícones e ornamentos pequenos, com menos de alguns KB, usados em todas as páginas.
- E-mails HTML e documentos de um só ficheiro, onde não é possível ligar recursos externos.
- Pré-visualizações minúsculas (LQIP) mostradas enquanto a imagem final carrega.
- Testes e protótipos que têm de funcionar sem ligação.
Para fotografias e qualquer imagem grande, é melhor um ficheiro normal, com loading="lazy" e em WebP ou AVIF.
SVG: melhor sem Base64
Um SVG é texto, por isso pode ir no data URI quase tal como está, escapando apenas alguns caracteres. Essa versão «URL-encoded» ocupa bastante menos do que em Base64 e continua legível. Ao converter um SVG, a ferramenta permite escolher.
Privacidade
A conversão é feita com a API FileReader do navegador: a imagem não é carregada para nenhum servidor. O botão
de teste transfere um placeholder do gerador ximg.es, como https://ximg.es/64x64/2563eb/fff,
e converte-o tal como faria com uma imagem própria.