Dimensioni Immagini per Newsletter
Gmail taglia i messaggi che superano i 102 KB, e la causa sono quasi sempre le immagini. Cosa tollera ogni client e come rimanere entro i limiti.
Mantieni ogni immagine della newsletter sotto i 100 KB, dimensiona le immagini al doppio della loro larghezza di visualizzazione e usa JPG o PNG anziché WebP. Gmail tronca qualsiasi messaggio il cui codice HTML supera circa i 102 KB, sostituendo il resto con un link Visualizza intero messaggio.
La maggior parte dei mittenti scopre il limite di troncamento a proprie spese, di solito quando il link di disiscrizione e il pixel di tracciamento finiscono sotto il taglio. Le immagini sono spesso la causa, o perché sono incorporate direttamente nel messaggio o perché il markup che le circonda è cresciuto nel corso di diverse campagne.
Cosa misura effettivamente il limite di troncamento di Gmail
Gmail misura il codice sorgente HTML del messaggio, non le immagini a cui si collega. Una newsletter che rimanda a 10 fotografie di grandi dimensioni rimane ampiamente entro il limite, mentre un messaggio con stili inline pesanti e immagini incorporate no.
La distinzione è importante perché la soluzione è diversa. Le immagini collegate non contano per la cifra di 102 KB, quindi il troncamento è solitamente causato da stili inline ripetuti, lunghi parametri di tracciamento su ogni link o immagini incorporate come dati base64. Rimuovere le immagini incorporate e alleggerire il markup risolve il troncamento, mentre comprimere le fotografie collegate risolve il tempo di caricamento.
Dimensioni consigliate per le immagini nelle email
Progetta il corpo dell'email a 600 pixel di larghezza ed esporta le immagini a 1200 pixel per gli schermi ad alta densità. Lo standard di 600 pixel resiste da anni perché si adatta al pannello di anteprima di ogni client desktop senza scorrimento orizzontale.
| Posizionamento | Larghezza visualizzazione | Larghezza esportazione | Peso file target |
|---|---|---|---|
| Header a larghezza intera | 600 px | 1200 px | Da 80 KB a 100 KB |
| Fotografia nel corpo | 600 px | 1200 px | Da 60 KB a 100 KB |
| Immagine a due colonne | 280 px | 560 px | Da 30 KB a 50 KB |
| Anteprima prodotto | 150 px | 300 px | Da 15 KB a 25 KB |
| Logo | 200 px | 400 px | Sotto i 20 KB |
Raddoppiare la larghezza di esportazione copre i display ad alta densità e si ferma lì. Esportare a 3 volte la larghezza di visualizzazione aggiunge peso che nessun client email renderizza meglio, e l'email è l'unico canale in cui ogni singolo kilobyte viene scaricato su un telefono.
Perché WebP è ancora la scelta sbagliata per le email
Il supporto dei client email per WebP rimane discontinuo, e Outlook in particolare è imprevedibile. L'email è uno dei pochi ambiti rimasti in cui i vecchi formati sicuri sono la scelta giusta.
I browser web supportano tutti WebP, il che porta a presumere che lo facciano anche i client email. Outlook per desktop renderizza i messaggi con un motore completamente diverso, e diversi sistemi di posta aziendali rimuovono o falliscono sui formati che non riconoscono. Un'immagine non visualizzata in una newsletter è molto più costosa del risparmio del 30 percento sulle dimensioni del file che WebP offrirebbe, quindi JPG e PNG rimangono le scelte corrette in questo caso.
Scelta del formato all'interno dell'email
Usa JPG per le fotografie e PNG per loghi, pulsanti e qualsiasi elemento contenente testo. La regola è la stessa del web, e le conseguenze sono più visibili perché le immagini delle email sono spesso piccole.
- JPG per fotografie di prodotti, immagini di intestazione e qualsiasi immagine di una scena reale.
- PNG per loghi, icone e grafiche con colori piatti o bordi di testo nitidi.
- GIF animate solo quando l'animazione ha un significato reale, e mantenute sotto 1 MB.
- Evita WebP e AVIF, poiché nessuno dei due viene renderizzato in modo affidabile su tutti i client di posta.
- Evita completamente SVG, perché la maggior parte dei client email lo blocca per motivi di sicurezza.
Le immagini sono bloccate per impostazione predefinita in molti client
Molti destinatari vedono la tua email con le immagini disattivate, quindi il messaggio deve funzionare anche come testo. I sistemi di posta aziendali e gli utenti attenti alla privacy bloccano entrambi le immagini remote finché il lettore non sceglie di caricarle.
Scrivi il testo alternativo (alt text) su ogni immagine, poiché le immagini bloccate mostrano invece quel testo. Non inserire mai informazioni essenziali, inclusa l'offerta, la scadenza o la chiamata all'azione, esclusivamente all'interno di un'immagine. Una newsletter costruita interamente da un'unica grande grafica diventa un rettangolo vuoto per una quota significativa della lista, e ha anche prestazioni scarse con i lettori di schermo.
Come preparare le immagini per la newsletter
Per mantenere una newsletter veloce e leggibile, segui questi 7 passaggi.
- Progetta l'email a 600 pixel di larghezza, che ogni client desktop renderizza senza scorrimento.
- Ritaglia ogni immagine nella forma esatta che occuperà nel layout.
- Ridimensiona al doppio della larghezza di visualizzazione, e non oltre.
- Converti in JPG per le fotografie o PNG per le grafiche contenenti testo.
- Comprimi ogni file per un target inferiore a 100 KB.
- Ospita le immagini sulla tua piattaforma di invio o sul tuo server anziché incorporarle nel messaggio.
- Invia un test a Gmail, Outlook e a un telefono prima di pianificare la campagna.
Il peso totale dell'email conta più di ogni singola immagine
Mantieni l'intero messaggio sotto i 600 KB, incluse le immagini, perché gli iscritti aprono le newsletter sui telefoni, spesso con connessioni scarse. Una newsletter da 5 MB si carica lentamente e viene chiusa prima di essere renderizzata.
Conta le immagini prima di comprimere qualsiasi cosa. Una newsletter che contiene 12 fotografie da 100 KB ciascuna è già a 1.2 MB, il che suggerisce che il layout ha bisogno di meno immagini piuttosto che di immagini più piccole. Ridurre il numero di immagini di solito migliora sia le prestazioni che la leggibilità, poiché le newsletter lunghe e piene di immagini vengono lette raramente fino alla fine.
La modalità scura cambia l'aspetto delle immagini
Diversi client invertono o regolano i colori in modalità scura, e un logo su sfondo bianco diventa un rettangolo luminoso in un messaggio scuro. Testa ogni campagna in modalità scura prima dell'invio.
Usa file PNG con sfondi trasparenti per loghi e icone in modo che si posizionino correttamente su entrambi i colori. Evita immagini con sfondi bianchi dove il design presuppone che anche la pagina dietro di esse sia bianca. Le fotografie sono generalmente sicure, poiché i client raramente alterano il contenuto fotografico, mentre le grafiche piatte e le immagini di testo sono i punti in cui compaiono i problemi con la modalità scura.
Schermi Retina e nitidezza delle immagini
Esporta al doppio della larghezza di visualizzazione in modo che le immagini rimangano nitide sugli schermi ad alta densità, quindi comprimi di più per compensare i pixel extra. Un'immagine da 1200 pixel a qualità 70 di solito appare migliore e pesa meno di un'immagine da 600 pixel a qualità 95.
Imposta l'attributo width nel markup sulla dimensione di visualizzazione anziché sulla dimensione del file, in modo che il client renderizzi l'immagine a 600 pixel pur utilizzando il dettaglio extra. Omettere l'attributo width fa sì che alcuni client visualizzino l'immagine alla sua dimensione pixel intera, il che interrompe il layout su desktop.
Controllare una campagna prima dell'invio
- Invia un test a Gmail, Outlook, Apple Mail e ad almeno un telefono.
- Visualizza il test con le immagini bloccate, confermando che il messaggio abbia ancora senso.
- Verifica che il messaggio non sia troncato in Gmail, che mostra un link Visualizza intero messaggio al taglio.
- Conferma che ogni immagine abbia un testo alternativo che descrive ciò che mostra.
- Controlla la resa in modalità scura, in particolare per loghi e grafiche piatte.
- Somma il peso totale di tutte le immagini e conferma che rimanga sotto i 600 KB.
Preparare una campagna in un unico lotto
Elabora insieme tutte le immagini della newsletter in modo che l'intera campagna condivida un'unica specifica. Una newsletter contiene in genere da 5 a 15 immagini, e chi invia settimanalmente ne prepara centinaia nel corso di un anno.
Imposta la larghezza e il target in KB una sola volta, trascina le immagini e ogni file viene restituito ottimizzato. Tutto viene eseguito all'interno del tuo browser sul tuo processore, quindi offerte non ancora annunciate, liste di iscritti renderizzate come immagini e lavori per campagne di clienti non raggiungono mai un server. Per un'agenzia che prepara un lancio, mantenere questi file locali evita una divulgazione che nessun risparmio di compressione giustificherebbe.
Conserva una cartella di modelli con segnaposto di dimensioni corrette per ogni blocco di layout ricorrente, come l'intestazione, la riga di prodotto a 2 colonne e il logo del piè di pagina. Chi invia settimanalmente riutilizza le stesse 4 o 5 forme all'infinito, e adattare la nuova grafica a una specifica esistente richiede meno tempo rispetto a decidere nuovamente le dimensioni per ogni campagna.