Incorporando imagens com Base64
A codificação Base64 converte bytes binários em caracteres ASCII para que imagens possam viajar dentro de HTML, CSS ou JSON sem requisições extras.
O que a codificação faz
Cada três bytes transformam-se em quatro caracteres Base64, resultando em um aumento médio de 33% no tamanho.
O navegador decodifica a string sob demanda e desenha os mesmos pixels do arquivo original.
Quando vale a pena embutir
Incorporar ícones reduz requisições HTTP em landing pages leves ou emails onde cada request custa alguns milissegundos.
Imagens grandes devem continuar como arquivos separados para aproveitar cache e streaming progressivo.
Tratando diferentes formatos
PNG e JPEG convertem facilmente, enquanto SVGs se beneficiam de minificação antes da codificação para remover caracteres supérfluos.
Para animações, considere WebP ou AVIF antes de converter para Base64 e começar do menor binário possível.
Casos de uso adequados
- Embutir pequenos ícones ou favicons diretamente no CSS
- Distribuir ilustrações placeholder em bibliotecas de componentes
- Executar testes automatizados que comparam fixtures Base64
- Empacotar sprites em extensões de navegador com acesso limitado ao disco
Boas práticas
- Compacte e remova metadados antes de codificar para compensar a sobrecarga
- Quebre strings enormes em blocos se elas forem parar em arquivos de configuração
- Valide MIME e sanitize SVGs ao processar uploads de usuários
- Use URIs data:image/png;base64,... apenas para ativos de poucos kilobytes