Imagem para Base64

Um Data URI é uma cadeia que embute o conteúdo de um ficheiro — aqui uma imagem — diretamente no código, sem precisar de um ficheiro à parte. Tem a forma data:image/png;base64,XXXX, em que XXXX é a imagem em Base64. Cola-se no atributo src de uma tag img ou numa regra CSS background-image.

O Base64 representa cada 3 bytes de dados binários com 4 caracteres de texto, o que aumenta o tamanho em cerca de 33%. Por isso só compensa embutir imagens pequenas, como ícones e logos: poupa pedidos, mas em imagens grandes incha o HTML e o CSS.

Não. A conversão acontece toda no navegador, com a API FileReader do JavaScript: a imagem não sai do seu dispositivo nem é enviada para servidor nenhum. Isso torna a ferramenta privada e muito rápida, e depois de a página carregar funciona até sem ligação.

É uma cadeia que leva o conteúdo do ficheiro dentro de si, na forma data, dois pontos, tipo de ficheiro, base64 e depois os dados. Cola-se onde estaria o endereço de uma imagem, sem precisar de um ficheiro à parte.

Porque o Base64 representa cada três bytes com quatro caracteres de texto, por isso o peso cresce cerca de um terço. Só compensa em ícones e logos pequenos, onde se poupa um pedido HTTP.

Não, o navegador faz a conversão com o FileReader do JavaScript, por isso o ficheiro não sai do dispositivo. Depois de a página abrir, a ferramenta continua a funcionar sem ligação.