O que é uma imagem Base64
Base64 é uma forma de codificar dados binários em texto puro. Depois de convertida em Base64, uma imagem vira uma longa cadeia de texto que pode ser embutida diretamente em HTML/CSS, sem precisar de um arquivo de imagem separado. Esse uso é chamado de "imagem inline".
Quando usar imagens Base64
Cenários adequados para inline
- Pequenos ícones: Ícones de poucos KB inline reduzem requisições HTTP e aceleram o carregamento
- Modelos de e-mail: Clientes de e-mail restringem imagens externas; inline é mais confiável
- Entrega em arquivo único: Relatórios em HTML, demos que você quer empacotar em um único arquivo
- Data URI: Imagens de fundo em CSS, referências a SVG
Cenários inadequados para inline
- Imagens grandes: Após a codificação Base64, o tamanho é 33% maior que o original; imagens grandes inline ficam ainda mais lentas
- Imagens que precisam de cache: Imagens inline não podem ser armazenadas em cache separadamente pelo navegador; a cada carregamento do HTML são baixadas novamente
- Imagens muito reutilizadas: Imagens compartilhadas entre várias páginas são mais eficientes como arquivo externo + cache
Como converter
Use a ferramenta de conversão de imagem para Base64 do DocsAll para converter com um clique:
- Abra imagem para Base64
- Faça upload da imagem
- A string Base64 e a Data URL são geradas automaticamente
- Copie e use
Para o caminho inverso, restaurar uma imagem a partir de Base64, use a ferramenta de Base64 para imagem.
Como usar
O formato da Data URL gerada é semelhante a data:image/png;base64,iVBORw0KGgo... — uma longa cadeia.
- No HTML: escreva diretamente no atributo src da tag img
- No CSS: escreva dentro de url() no background-image
Ponderação entre prós e contras
| Dimensão | Arquivo de imagem externo | Inline em Base64 |
|---|---|---|
| Requisição HTTP | Uma requisição por imagem | Sem requisição extra |
| Tamanho | Tamanho original | 33% maior |
| Cache | Pode ser armazenado em cache separadamente | Armazenado junto com o HTML |
| Aplicável a | Imagens grandes, reutilizadas | Pequenos ícones, arquivo único |
Recomendação
Ícones pequenos (menores que 4KB) inline, fotos grandes como arquivo externo. Combine com a compressão de imagens para reduzir o tamanho primeiro e depois decidir se vale a pena usar inline — esse é o melhor resultado. Para mais conhecimentos sobre Base64, leia o guia de codificação e decodificação Base64.