Base64 em imagens: data URIs para CSS e HTML sem requisições HTTP
Embutir imagens diretamente em HTML e CSS usando Base64 e data URIs é uma técnica útil para eliminar requisições HTTP adicionais em casos específicos. Em vez de src='/images/icon.png', você usa src='data:image/png;base64,...' com toda a imagem codificada inline. O Codificador Base64 do WikiPlus converte imagens para Base64 de forma rápida, diretamente no navegador. Este artigo explica quando usar e quando evitar essa técnica.
O que é um data URI e como funciona
Um data URI é um esquema de URI que permite incluir dados diretamente em documentos HTML ou CSS, sem referência a um arquivo externo. O formato é data:[tipo-mime][;base64],dados. Para uma imagem PNG em Base64: data:image/png;base64,iVBORw0KGgo... Para SVG como texto: data:image/svg+xml,%3Csvg... Para fontes: data:font/woff2;base64,... O navegador interpreta o data URI diretamente, sem fazer nenhuma requisição HTTP adicional ao servidor. Isso elimina a latência de uma requisição de rede mas aumenta o tamanho do HTML ou CSS.
Quando usar data URIs com Base64
Data URIs em Base64 são vantajosos em casos específicos. Pequenos ícones SVG ou PNGs usados em múltiplas páginas podem ser embutidos para eliminar requisições separadas, especialmente em SPAs onde o CSS é carregado uma vez. E-mails HTML frequentemente exigem imagens inline em Base64 porque alguns clientes de e-mail bloqueiam imagens externas. Páginas que precisam funcionar completamente offline (PWAs com service workers) embutem recursos em Base64. Favicons pequenos podem ser definidos como data URIs no HTML. Para sprites CSS simples ou indicadores de carregamento animados em SVG, Base64 inline é prático.
Quando evitar data URIs
Para a maioria das imagens em sites modernos, data URIs são contraproducentes. O aumento de 33% no tamanho da imagem somado à inclusão no HTML ou CSS impede que o browser faça cache da imagem independentemente. Um logo de 10KB em Base64 aumenta o HTML em ~13KB a cada página carregada, sem benefício de cache. Data URIs não podem ser pré-carregados com <link rel='preload'>. Em conexões lentas, aumentar o tamanho do documento de entrada crítica piora a performance. As melhores práticas modernas recomendam usar data URIs apenas para imagens abaixo de 1-2KB ou em contextos sem acesso a servidor (e-mail HTML, exports).
Gerando data URIs com o Codificador Base64 do WikiPlus
O Codificador Base64 do WikiPlus aceita texto como entrada. Para converter uma imagem para Base64 e usá-la como data URI, você precisará primeiro converter o arquivo de imagem binário para Base64 — o WikiPlus faz isso para texto e strings. Para imagens binárias, a ferramenta Image to Base64 do WikiPlus é especificamente projetada para esse fluxo: você carrega a imagem e obtém o data URI completo pronto para usar em HTML ou CSS. Para verificar ou decodificar strings Base64 de imagens existentes no código, o Codificador Base64 funciona perfeitamente.
Perguntas frequentes
- Data URIs Base64 afetam a performance do site?
- Sim, geralmente negativamente para imagens grandes. O tamanho aumenta 33%, o arquivo não pode ser cacheado separadamente, e o parsing do HTML/CSS é mais lento. Para imagens acima de 2KB, use arquivos separados com cache adequado. Para ícones muito pequenos ou e-mails HTML, data URIs são aceitáveis.
- Qual é o tamanho máximo de um data URI?
- Não há limite técnico definido em HTML5, mas navegadores têm limites práticos. Chrome suporta data URIs de até vários megabytes. Para uso em atributos de elementos HTML como src, limites de URL do servidor podem aplicar-se. Na prática, mantenha data URIs abaixo de 32KB para compatibilidade ampla.
- Como usar Base64 para fontes em CSS?
- Em CSS: @font-face { font-family: 'MinhaFonte'; src: url('data:font/woff2;base64,BASE64_DA_FONTE'); }. Isso emite a fonte inline. Porém, fontes WOFF2 são frequentemente 100KB+, tornando o Base64 ~133KB — muito custoso para embutir. Use apenas para fontes de ícones muito pequenas.