Tratamento de imagens em clientes de e-mail

Muitos clientes bloqueiam as imagens por padrão até que o usuário clique em "mostrar imagens". O Outlook, o Gmail (para remetentes desconhecidos) e a maioria dos clientes móveis em uma conexão com franquia de dados exibem um espaço reservado. Planeje o design supondo que as imagens talvez não apareçam.

Nunca incorpore textos essenciais (títulos, rótulos de CTA, preços) em imagens. Use texto HTML estilizado com CSS em linha para que a mensagem seja exibida mesmo quando as imagens estiverem bloqueadas, os leitores de tela possam lê-la e o modo escuro possa invertê-la adequadamente.

Todo <img> precisa de um atributo alt descritivo. Quando as imagens são bloqueadas, o texto alternativo aparece na caixa de espaço reservado — um texto alternativo bem escrito preenche o vazio visual com a mensagem que seria transmitida pela imagem.

Sem dimensões explícitas, o espaço reservado desaparece e o layout muda quando a imagem é carregada. Defina ambos os atributos (e o estilo em linha correspondente) para que a célula reserve espaço, independentemente de a imagem ser carregada ou não.

O Outlook insere um pequeno espaço abaixo das imagens em linha. Aplique style="display:block" a cada <img> para eliminar esse espaço e garantir um ritmo vertical consistente em todos os clientes.

Clientes mais antigos adicionam uma borda azul ao redor de <a><img></a>. Defina border="0" no atributo da imagem e style="border:0" em linha para que as imagens envolvidas sejam renderizadas corretamente dentro das chamadas para ação.

Os clientes de email não têm o conceito de "esta página". O src de toda imagem deve ser um endereço https:// absoluto que aponte para uma CDN publicamente acessível. Caminhos locais, caminhos relativos e endereços http:// (conteúdo misto) não são carregados, geralmente sem qualquer aviso.

Use um host de imagens rápido e distribuído geograficamente. Alguns clientes buscam imagens por meio de proxies (o Gmail, por exemplo), que adicionam sua própria camada de cache; as CDNs primárias evitam o carregamento inicial a partir de uma origem lenta e garantem que as imagens sejam carregadas de forma consistente em todas as regiões.

Para fundos principais, combine o background-image do CSS com um bgcolor que corresponda ao tom predominante. Se a imagem for bloqueada, a célula ainda exibirá uma cor adequada, e o texto sobreposto ao bgcolor continuará legível — evitando o desastre de texto branco sobre um bloco branco.

Renderize as imagens em 2x e reduza-as por meio do atributo width para que fiquem nítidas em telas de alta DPI: uma fonte de 600x600 exibida com width="300" height="300" fica nítida em uma tela Retina. O custo é o consumo de banda, portanto mantenha os tamanhos dos arquivos pequenos usando uma compressão equivalente à do WebP.

GIFs animados funcionam na maioria dos clientes, exceto no Outlook (que exibe apenas o primeiro quadro). Planeje o primeiro quadro para que faça sentido como imagem estática — o título, o CTA ou o valor principal devem ser legíveis mesmo sem o restante da animação.

Por que textos essenciais (títulos, rótulos de CTA, preços) nunca devem ser incorporados em imagens em um email HTML?

Trate as imagens como aprimoramento, não como a mensagem. Use endereços https absolutos, defina width/height/display:block/border:0, escreva textos alternativos significativos, hospede as imagens em uma CDN rápida, combine fundos com alternativas bgcolor, planeje imagens em 2x para telas Retina e lembre-se de que o Outlook congela os GIFs no primeiro quadro.