Incorporar uma imagem coloca seus bytes dentro de HTML, CSS ou outro documento. Ele pode tornar um pequeno artefato independente, mas também acopla a imagem à entrega e ao cache do documento. Decida com base no fluxo de trabalho completo, em vez de presumir que menos URLs sempre significam uma página mais rápida.
Crie o wrapper correto
Uma imagem PNG Dados URI começa com data:image/png;base64,, seguido pela representação Base64 do arquivo original. Um JPEG precisa image/jpeg; WebP necessidades image/webp. Renomear um tipo MIME não converte os bytes. Se o receptor exigir um JPEG, codifique novamente a imagem antes de construir seus dados URI.
<img src="data:image/png;base64,BASE64_PAYLOAD" alt="Descriptive alternative text" width="32" height="32">O espaço reservado acima não é uma imagem funcional; substitua-o pela saída completa do codificador. Se a saída já contém o data: prefixo, não adicione outro. Mantenha as aspas equilibradas e evite quebras de linha introduzidas por editores de rich text.
Calcule o tamanho real
A parte codificada precisa de quatro caracteres para cada três bytes de entrada, arredondados para completar grupos. O prefixo Data URI adiciona um pouco mais. Para um arquivo de 30.000 bytes, apenas a carga útil é de 40.000 caracteres. A compactação HTML pode alterar o tamanho transferido, mas o navegador ainda precisa analisar o documento e decodificar a imagem. Meça a página real, não apenas o arquivo de origem.
Uma imagem veiculada separadamente pode ser armazenada em cache e reutilizada de forma independente nas páginas. Uma imagem incorporada está vinculada a cada documento que a contém. Ilustrações grandes e repetidas são, portanto, fracas candidatas para inlining automático. Pequenos ícones únicos em um relatório independente podem ser uma compensação razoável.
Verifique o destino
A Política de Segurança de Conteúdo pode restringir data: imagens. Os clientes de e-mail podem remover ou recusar conteúdo incorporado. Um arquivo visualizado em seu navegador não prova que o aplicativo do destinatário o exibirá. Teste a exportação exata, o cliente de e-mail ou o sistema downstream que você precisa para oferecer suporte.
Para visualizações locais temporárias, um Blob URL geralmente evita a criação de uma cadeia de caracteres Base64 grande. Revogue URL quando sua visualização for removida. Para HTML autônomo exportado, um dado URI pode ser apropriado. Preserve o texto alternativo e as dimensões em ambos os casos. Considerações sobre sintaxe e navegador são abordadas em MDN: URLs de dados.