Se as imagens aparecem esticadas, borradas ou cortadas errado, quase sempre é um desalinhamento de tamanhos entre arquivo, HTML e cliente de email. Veja como resolver de vez.
Dica pro: Regra de ouro — 600 px de largura de corpo, imagens exatas em 1× ou 2× para ficarem nítidas em telas retina.
Os 4 problemas de dimensões mais comuns
- Imagem maior que a coluna: o cliente reduz, fica borrada.
- Imagem menor que a largura no HTML: esticada e pixelada.
- Sem atributos
width/height: o Outlook usa o tamanho do arquivo. - Clientes mobile ignorando CSS: caem nos atributos inline.
Tamanhos recomendados
| Bloco | Arquivo (retina) | Largura HTML |
|---|---|---|
| Hero largura total | 1200 px | 600 px |
| Imagem em duas colunas | 560 px | 280 px |
| Logo | 300 px | 150 px |
| Ícone | 96 px | 48 px |
Solução passo a passo
- Redimensione o arquivo para 2× a largura final para retina.
- Sempre coloque
widtheheightna tag<img>. - CSS inline
max-width:100%;height:autopara mobile. - Comprima com TinyPNG ou Squoosh: cada imagem abaixo de 200 KB.
- Teste em Gmail, Apple Mail e Outlook antes do envio.
Imagens perfeitas em cada newsletter — teste Mailpro grátis
O editor de imagens do Mailpro redimensiona automaticamente, aplica dimensões retina e comprime no upload. Descobrir o editor de imagens · Editor WYSIWYG
Leituras relacionadas: