Guias

Imagens Base64 e data URLs: quando usar e quando evitar

Data URLs servem para arquivos pequenos, mas afetam tamanho, cache e desempenho.

O que faz

Uma data URL coloca um arquivo pequeno dentro de uma URL. Em imagens, a forma comum começa com data:image/png;base64,.

Bom uso

Use para ícones minúsculos, testes, emails simples ou previews gerados.

Custo

Base64 transforma 3 bytes em 4 caracteres. HTML ou CSS fica maior antes de o navegador encontrar o recurso.

Limites

MDN registra limites de tamanho e regras de segurança. Navegadores bloqueiam navegação principal para data: URLs por risco de phishing.

Regra prática

Inline apenas arquivos que cabem bem no código fonte. Mantenha imagens normais e uploads como arquivos separados.

Fontes técnicas