Prepare as imagens certas para embutir
O primeiro passo é selecionar apenas o que compensa: ícones, logos pequenos e texturas de poucos kilobytes. Abra cada imagem e confira o tamanho real em disco — acima de 10 KB por asset, o ganho de eliminar a requisição raramente supera o inchaço de 33% imposto pelo Base64, e o CSS começa a ficar pesado demais.
Otimize antes de codificar: comprima o PNG, remova metadados desnecessários ou converta para um formato mais eficiente. Codificar uma imagem já otimizada evita carregar bytes desperdiçados dentro do CSS para sempre — cada byte conta em dobro quando vai embutido.
Codifique e monte o data URI corretamente
Com a imagem pronta, codifique o arquivo em Base64 e monte a string no formato data:image/png;base64,<sequência>, ajustando o tipo MIME para o formato real do arquivo: image/jpeg, image/svg+xml, image/webp etc. Um tipo MIME errado faz o navegador recusar a renderização silenciosamente, sem mensagem de erro útil.
Guarde cada sequência num arquivo de rascunho durante o trabalho, identificada pelo nome da imagem original. Colar direto no CSS sem backup dificulta ajustes futuros — quando precisar trocar um ícone, você vai querer gerar o data URI de novo a partir do original.
Integre ao CSS e valide no navegador
Cole o data URI na propriedade CSS adequada — background, mask ou content, conforme o caso — e recarregue a página. Confira nas ferramentas de desenvolvedor se a imagem renderizou corretamente e observe o tamanho final do arquivo CSS: se ele dobrou por causa de dois ícones grandes, é sinal de que a técnica foi aplicada no asset errado.
Teste em mais de um navegador, principalmente se parte do público usa versões antigas. E valide a sintaxe do CSS: uma aspa esquecida no meio de uma sequência de 5 mil caracteres quebra a folha de estilos inteira — e o erro é difícil de localizar a olho nu.
Erros comuns neste fluxo e como evitá-los
O erro mais frequente é declarar o tipo MIME errado: dizer image/png para um arquivo que na verdade é JPEG faz o navegador descartar a imagem sem explicar o motivo. Confira a extensão e o formato real do arquivo original antes de montar o data URI.
Outro deslize comum é embutir imagens grandes demais e só perceber quando o CSS passa de 1 MB. Estabeleça um teto claro — por exemplo, 10 KB por asset — e meça o tamanho final do CSS a cada leva de ícones adicionados ao projeto.
Passos
- Selecione ícones e imagens pequenas (até ~10 KB cada) para embutir.
- Otimize cada imagem antes: comprima ou converta para o formato ideal.
- Codifique cada arquivo em Base64 com a ferramenta da CubTools.
- Monte o data URI no formato data:[tipo-mime];base64,<sequência>.
- Cole no CSS, recarregue a página e confira a renderização.
- Verifique o tamanho final do CSS e teste em outros navegadores.
- Documente a origem de cada data URI para facilitar a manutenção.
Perguntas frequentes
Qual o tamanho máximo razoável para um data URI?
Como referência prática, até cerca de 10 KB por imagem. Acima disso, o aumento de 33% e o CSS inchado costumam anular o benefício da requisição eliminada.
SVG também pode virar data URI?
Pode, mas SVG costuma ir melhor com codificação URL-encoded do que com Base64, gerando strings menores. Para PNG e JPG pequenos, Base64 é o caminho ideal.
Data URI funciona em e-mail marketing?
Com ressalvas importantes: vários clientes de e-mail bloqueiam ou limitam data URIs. Para e-mail, prefira imagens hospedadas com URL absoluta e testada.
Como organizo vários data URIs no projeto?
Centralize em variáveis CSS ou num arquivo parcial dedicado, com comentários indicando a imagem original de cada um. Isso facilita substituições e auditorias futuras.