Imagem para Base64

Este conversor de imagem para Base64 transforma uma imagem num data URI, uma longa string de texto que incorpora a imagem diretamente, além de um fragmento de fundo CSS pronto a usar. Pode inserir uma imagem inline em vez de ligar a um ficheiro separado.

Corre localmente no seu navegador, por isso a sua imagem é lida no seu dispositivo e nunca é carregada.

Um data URI transporta a imagem inteira dentro do markup, por isso o navegador não faz um pedido de rede separado para a obter. Para recursos pequenos como ícones, essa ida e volta poupada pode fazer uma página parecer mais rápida.

O senão é o tamanho e a cache. O Base64 acrescenta cerca de 33 por cento de sobrecarga porque representa dados binários com um alfabeto de texto limitado, e uma imagem inserida inline não pode ser guardada em cache separadamente, por isso é descarregada de novo com cada página que a contém.

A regra prática é inserir inline imagens pequenas, ícones, logótipos minúsculos ou um sprite, onde evitar um pedido compensa a sobrecarga, e manter as imagens maiores como ficheiros normais que o navegador pode guardar em cache e carregar em paralelo.

Os data URI funcionam em qualquer lugar onde um URL seja aceite: um src de img, um fundo CSS, ou um campo em JSON ou num modelo de email. Isso torna-os práticos para fragmentos autónomos.