Codificador de Imagem Base64

Quando incluir imagens vale a pena

Candidatos a avaliar e testar antes da inclusão:

• Ícones abaixo de 2 KB, Economiza uma solicitação HTTP com sobrecarga negligenciável.
• Modelos de e-mail - Os clientes de e-mail não oferecem suporte uniforme a URIs de dados. Teste os clientes de destino e use imagens CID ou hospedadas quando necessário.
• Substitutos de herói (LQIP), Versão borrada de baixa qualidade incluída, imagem completa carregada depois.
• SVGs usados uma vez, Como SVG é texto, um URI de dados corretamente codificado por percentuais pode ser menor que Base64, dependendo dos caracteres e da formatação.

Maus candidatos:

• Imagens grandes, Inflar em 33% para uma imagem de 500 KB é 166 KB de desperdício.
• Imagens reutilizadas em várias páginas, A inclusão desabilita o cache do navegador entre rotas.
• CSS crítico, Incluir imagens pesadas explode o caminho crítico.

Expectativas de tamanho

Formato URI de dados

data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAAAEAAAABCAYAAAAfFcSJAAAADUlEQVR42mNk+M9QDwAEhQGAhKmMIQAAAABJRU5ErkJggg==

• Esquema data:
• Tipo MIME
• Indicador ;base64,
• Os bytes codificados

SVG é um caso especial

Base64 aumenta os bytes originais do SVG em cerca de um terço antes da sintaxe envolvente, enquanto a codificação por percentuais só aumenta os caracteres que precisam ser escapados. A forma mais curta depende do SVG. A forma textual deve usar um valor data:image/svg+xml,... corretamente codificado por percentuais: o token isolado ;utf8 não é um parâmetro padrão de URI de dados, e caracteres #, %, aspas ou espaços não escapados podem quebrar o URI. Esta ferramenta verifica a estrutura do SVG, mas não remove scripts, manipuladores de eventos nem referências externas. Revise SVGs não confiáveis antes de usar a saída.