Tamanhos de Imagem para Newsletters

Mantenha cada imagem da newsletter abaixo de 100 KB, dimensione as imagens para o dobro da largura de exibição e use JPG ou PNG em vez de WebP. O Gmail trunca qualquer mensagem cujo código HTML exceda aproximadamente 102 KB, substituindo o restante por um link para Visualizar mensagem inteira.

A maioria dos remetentes descobre o limite de corte da pior maneira, geralmente quando o link de cancelamento de inscrição e o pixel de rastreamento ficam abaixo do corte. As imagens são frequentemente o motivo, seja porque estão incorporadas diretamente na mensagem ou porque a marcação ao redor delas cresceu ao longo de várias campanhas.

O que o limite de corte do Gmail realmente mede

O Gmail mede o código-fonte HTML da mensagem, não as imagens para as quais ela aponta. Uma newsletter com links para 10 fotografias grandes permanece bem dentro do limite, enquanto uma mensagem com estilos inline pesados e imagens incorporadas não.

A distinção é importante porque a solução difere. Imagens vinculadas não contam para o valor de 102 KB, portanto, o corte geralmente é causado por estilos inline repetidos, parâmetros de rastreamento longos em cada link ou imagens incorporadas como dados base64. Remover imagens incorporadas e reduzir a marcação resolve o corte, enquanto compactar as fotografias vinculadas resolve o tempo de carregamento.

Tamanhos de imagem recomendados para email

Desenhe o corpo do email com 600 pixels de largura e exporte as imagens com 1200 pixels para telas de alta densidade. O padrão de 600 pixels se mantém há anos porque se ajusta ao painel de visualização de qualquer cliente de desktop sem rolagem horizontal.

Dobrar a largura de exportação atende às telas de alta densidade e para por aí. Exportar com 3 vezes a largura de exibição adiciona um peso que nenhum cliente de email renderiza melhor, e o email é o único canal onde cada kilobyte é baixado em um celular.

Por que o WebP ainda é a escolha errada no email

O suporte dos clientes de email para WebP continua irregular, e o Outlook, em particular, permanece imprevisível. O email é um dos poucos lugares restantes onde os formatos antigos e seguros são a decisão correta.

Todos os navegadores web suportam WebP, o que leva as pessoas a presumirem que os clientes de email também suportam. O Outlook para desktop renderiza mensagens com um mecanismo totalmente diferente, e vários sistemas de email corporativos removem ou falham em formatos que não reconhecem. Uma imagem quebrada em uma newsletter custa muito mais caro do que a economia de 30 por cento no arquivo que o WebP proporcionaria, portanto, JPG e PNG continuam corretos aqui.

Escolha do formato dentro do email

Use JPG para fotografias e PNG para logotipos, botões e qualquer elemento que contenha texto. A regra é a mesma da web, e as consequências são mais visíveis porque as imagens de email costumam ser pequenas.

• JPG para fotografias de produtos, imagens de cabeçalho e qualquer imagem de uma cena real.
• PNG para logotipos, ícones e gráficos com cores planas ou bordas de texto nítidas.
• GIF animado apenas quando a animação tiver um propósito, mantendo-o abaixo de 1 MB.
• Evite WebP e AVIF, pois nenhum deles é renderizado de forma confiável em todos os clientes de email.
• Evite SVG completamente, porque a maioria dos clientes de email o bloqueia por motivos de segurança.

As imagens são bloqueadas por padrão em muitos clientes

Muitos destinatários visualizam seu email com as imagens desativadas, portanto, a mensagem ainda deve funcionar como texto. Sistemas de email corporativos e usuários preocupados com a privacidade bloqueiam imagens externas até que o leitor decida carregá-las.

Escreva texto alternativo (alt text) em cada imagem, pois as imagens bloqueadas exibirão esse texto. Nunca coloque informações essenciais, incluindo a oferta, o prazo ou a chamada para ação, apenas dentro de uma imagem. Uma newsletter construída inteiramente a partir de um único gráfico grande torna-se um retângulo em branco para uma parte significativa da lista, além de apresentar um desempenho ruim com leitores de tela.

Como preparar imagens para newsletters

Para manter uma newsletter rápida e legível, siga estes 7 passos.

1. Desenhe o email com 600 pixels de largura, que todo cliente de desktop renderiza sem rolagem.
2. Corte cada imagem no formato exato que ela ocupará no layout.
3. Redimensione para o dobro da largura de exibição, e não mais do que isso.
4. Converta para JPG para fotografias ou PNG para gráficos que contenham texto.
5. Comprima cada arquivo para uma meta abaixo de 100 KB.
6. Hospede as imagens na sua plataforma de envio ou no seu próprio servidor, em vez de incorporá-las na mensagem.
7. Envie um teste para o Gmail, Outlook e para um celular antes de agendar a campanha.

O peso total do email importa mais do que qualquer imagem individual

Mantenha a mensagem inteira abaixo de 600 KB, incluindo as imagens, porque os assinantes abrem as newsletters em celulares, muitas vezes em conexões ruins. Uma newsletter de 5 MB carrega lentamente e é fechada antes mesmo de ser renderizada.

Conte as imagens antes de compactar qualquer coisa. Uma newsletter com 12 fotografias de 100 KB cada já soma 1,2 MB, o que sugere que o layout precisa de menos imagens, e não de imagens menores. Reduzir a quantidade de imagens geralmente melhora tanto o desempenho quanto a legibilidade, já que newsletters longas e cheias de imagens raramente são lidas até o fim.

O modo escuro altera a aparência das imagens

Vários clientes invertem ou ajustam as cores no modo escuro, e um logotipo sobre um fundo branco torna-se um retângulo brilhante em uma mensagem escura. Teste cada campanha no modo escuro antes de enviar.

Use arquivos PNG com fundos transparentes para logotipos e ícones, para que fiquem corretos em qualquer cor de fundo. Evite imagens com fundos brancos onde o design pressupõe que a página atrás delas também seja branca. As fotografias geralmente são seguras, pois os clientes raramente alteram o conteúdo fotográfico, enquanto gráficos planos e imagens com texto são onde os problemas do modo escuro costumam aparecer.

Telas Retina e nitidez de imagem

Exporte com o dobro da largura de exibição para que as imagens permaneçam nítidas em telas de alta densidade e, em seguida, comprima mais para compensar os pixels extras. Uma imagem de 1200 pixels com qualidade 70 geralmente parece melhor e pesa menos do que uma imagem de 600 pixels com qualidade 95.

Defina o atributo de largura na marcação para o tamanho de exibição, e não para o tamanho do arquivo, para que o cliente renderize a imagem em 600 pixels enquanto aproveita os detalhes extras. Omitir o atributo de largura faz com que alguns clientes exibam a imagem em seu tamanho real de pixels, o que quebra o layout no desktop.

Verificando uma campanha antes do envio

• Envie um teste para o Gmail, Outlook, Apple Mail e pelo menos um celular.
• Visualize o teste com as imagens bloqueadas, confirmando se a mensagem ainda faz sentido.
• Verifique se a mensagem não está cortada no Gmail, que exibe um link para Visualizar mensagem inteira no ponto de corte.
• Confirme se cada imagem possui texto alternativo descrevendo o que ela mostra.
• Verifique a renderização no modo escuro, especialmente para logotipos e gráficos planos.
• Some o peso total de todas as imagens e confirme se permanece abaixo de 600 KB.

Preparando uma campanha em lote

Processe todas as imagens da newsletter juntas para que toda a campanha compartilhe a mesma especificação. Uma newsletter normalmente contém de 5 a 15 imagens, e quem envia semanalmente prepara centenas ao longo de um ano.

Defina a largura e a meta de KB uma única vez, arraste as imagens e cada arquivo retornará ajustado. Tudo é executado no seu navegador, usando o seu próprio processador, de modo que ofertas não anunciadas, listas de assinantes renderizadas como imagens e trabalhos de campanha de clientes nunca chegam a um servidor. Para uma agência que prepara um lançamento, manter esses arquivos locais evita uma exposição que nenhuma economia de compactação justificaria.

Mantenha uma pasta de modelos com marcadores de posição dimensionados corretamente para cada bloco de layout recorrente, como o cabeçalho, a linha de produtos de 2 colunas e o logotipo do rodapé. Quem envia semanalmente reutiliza os mesmos 4 ou 5 formatos indefinidamente, e ajustar a nova arte a uma especificação existente leva menos tempo do que decidir as dimensões novamente a cada campanha.