Otimizando Ativos com Base64
A codificação Base64 permite incorporar dados de imagem diretamente em seus arquivos HTML, CSS ou JSON como texto. Isso elimina a necessidade de uma solicitação HTTP separada para buscar o arquivo de imagem.
Prós e Contras
Vantagens
- Menos Solicitações HTTP: Acelera o carregamento da página reduzindo o número de viagens de ida e volta ao servidor.
- Arquivo Único: Fácil de compartilhar ou armazenar, pois tudo está contido em uma única string de texto.
Desvantagens
- Tamanho Maior: Strings Base64 são aproximadamente 33% maiores que o arquivo binário original.
- Sem Cache: A imagem não pode ser armazenada em cache separadamente pelo navegador; ela recarrega toda vez que o HTML/CSS recarrega.
Como Funciona
A codificação Base64 pega dados binários (como uma imagem) e os traduz em um conjunto de 64 caracteres ASCII (A-Z, a-z, 0-9, +, /). Isso garante que os dados permaneçam intactos durante o transporte por protocolos projetados para lidar com texto.
data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAUAAAAFCAYAAACNbyblAAAAHElEQVQI12P4//8/w38GIAXDIBKE0DHxgljNBAAO9TXL0Y4OHwAAAABJRU5ErkJggg==
Saiba Mais
Leia mais sobre Data URLs e quando usá-las.