Se le immagini appaiono stirate, sfocate o ritagliate male, quasi sempre è un disallineamento di dimensioni tra file, HTML e client email. Ecco come risolvere alla radice.
Suggerimento pro: Regola d'oro — 600 px di larghezza body, immagini esatte 1× o 2× per restare nitide sui retina.
I 4 problemi di dimensioni più comuni
- Immagine più grande della colonna: il client la riduce, può apparire sfocata.
- Immagine più piccola della larghezza dichiarata in HTML: stirata e pixelata.
- Senza
width/height: Outlook la renderizza alla dimensione reale. - Client mobili che ignorano il CSS: usano gli attributi inline.
Dimensioni consigliate
| Blocco | File (retina) | Larghezza HTML |
|---|---|---|
| Hero a tutta larghezza | 1200 px | 600 px |
| Immagine a due colonne | 560 px | 280 px |
| Logo | 300 px | 150 px |
| Icona | 96 px | 48 px |
Procedura passo passo
- Ridimensiona il file a 2× la larghezza renderizzata per i retina.
- Inserisci sempre
widtheheightnel tag<img>. - CSS inline
max-width:100%;height:autoper il mobile. - Comprimi con TinyPNG o Squoosh: ogni immagine sotto 200 KB.
- Test su Gmail, Apple Mail e Outlook prima dell'invio.
Immagini perfette in ogni newsletter — prova Mailpro gratis
L'editor immagini di Mailpro ridimensiona in automatico, applica le dimensioni retina e comprime al caricamento. Scopri l'editor immagini · Editor WYSIWYG
Letture correlate: