Imagem para Base64
Base64 codifica bytes de imagem binários como texto ASCII que você pode colar em HTML img src, CSS url() ou cargas úteis JSON. Útil para ícones minúsculos, URIs de dados em protótipos e APIs que esperam imagens embutidas. A codificação acontece localmente - nada é carregado.
Como codificar uma imagem para Base64
1. Carregue o arquivo de imagem (mantenha-o pequeno - menos de 100 KB é prático).
2. Copie a string Base64 gerada ou o URL completo dos dados.
3. Cole em seu HTML, CSS ou configuração.
4. Teste no ambiente de destino - alguns clientes de e-mail limitam URIs de dados.
Exemplos de codificação
Logotipo embutido em e-mail HTML
Um logotipo PNG de 2 KB como data:image/png;base64,... evita o bloqueio de imagens externas em caixas de entrada corporativas restritas.
Fundo CSS para protótipo
Colar uma textura Base64 em uma demonstração de arquivo único sem hospedagem de ativos.
Acessório de teste de API
Inclua um pequeno JPEG Base64 em um corpo de solicitação JSON para teste de endpoint de upload de imagem.
Quando imagens Base64 ajudam
• Para ativos muito pequenos onde uma solicitação HTTP custa mais do que a sobrecarga de tamanho inline.
• Para recursos offline protótipos HTML de arquivo único.
• Quando a hospedagem externa não está disponível em ambientes bloqueados.
Quando evitar imagens Base64
• Para fotos grandes - Base64 cresce cerca de 33% e incha o cache HTML.
• Quando o cache CDN e o srcset responsivo estão disponíveis.
• Quando muitos clientes de e-mail bloquear URIs de dados - use imagens hospedadas.
Base64 em orçamentos de desempenho
Inlining remove viagens de ida e volta, mas evita o cache da imagem do navegador separadamente. Use com moderação para ícones minúsculos acima da dobra; normalmente, carrega lentamente mídias grandes.
Peculiaridades do cliente de e-mail
O desktop do Outlook tem suporte historicamente limitado a URI de dados. Teste o Gmail, o Apple Mail e o Outlook antes de confiar em imagens embutidas em campanhas.
Segurança
Não cole Base64 não confiável em páginas sem entender o conteúdo - ainda é um contexto executável em HTML. Codifique apenas seus próprios ativos.
Perguntas frequentes
Por que Base64 é maior que o arquivo?
A codificação usa 4 caracteres para cada 3 bytes - aproximadamente 33% de sobrecarga mais o prefixo da URL de dados.
O que é uma URL de dados?
Formato: dados:imagem/png;base64,iVBORw0KG... — Tipo MIME mais carga útil codificada.
Tamanho máximo para e-mail?
Manter o crescimento total de mensagens abaixo de 10–20 KB; muitos clientes engasgam com enormes imagens inline.
Decodificar de volta para o arquivo?
Use a ferramenta codificadora/decodificadora Base64 para reverter ASCII para binário, se necessário.
As imagens são carregadas?
Não - o FileReader lê localmente no navegador.
SVG para Base64?
Possível para texto SVG pequeno; formatos raster são mais comuns para URIs de dados.