L'importanza della dimensione dei file email
Uccello
27 ago 2018
1 min read
Conclusioni principali
Premise: The effectiveness of an email campaign depends heavily on file size — both for deliverability and user experience. Oversized HTML or image assets can cause clipping, slow load times, and lower engagement, especially on mobile.
Goal: Help marketers balance design ambition with technical constraints by optimizing HTML, external assets, and fully loaded size.
Highlights:
HTML file size:
Keep under 100 KB to avoid Gmail clipping (ideal target ≈ 50 KB).
Oversized HTML can break layouts and affect deliverability.
Reduce size through:
Code cleanup (remove outdated markup and unused elements).
Avoiding over-nesting of tables — 5–10 tables are usually sufficient.
Moving safe inline styles to embedded CSS where possible.
Simplifying layout (single-column designs) and minifying code.
External assets (mainly images):
Recommended max = 100 KB per image; animated GIFs may reach 500 KB.
Optimize with ImageOptim, Caesium, or CDN compression.
Choose correct formats: JPG for photos, GIF for graphics, PNG for transparency.
Use fewer, lighter images — display :none still downloads assets.
Fully loaded size:
Ideal total load ≤ 1 MB for smooth performance.
On 3G networks, large emails can take 2–14 seconds to load; even longer on 2G.
Optimize for slow or limited-data users (especially in developing regions).
Testing and balance:
A/B test to find the trade-off between visual richness and performance.
Ensure the email is legible without images for faster perceived load.
Poor size optimization can amplify deliverability and engagement problems.
Outcome: Clean, compact code and optimized media lead to faster loading, higher inbox placement, and better user experience across devices.
Q&A Highlights
Why does email file size matter?
Large emails risk clipping in Gmail and cause long load times — both harm engagement and deliverability.
What’s the recommended maximum HTML size?
Keep your HTML under 100 KB (ideally < 50 KB). Gmail clips messages at 102 KB.
How can I reduce my HTML size?
Remove redundant code, minimize table nesting, consolidate CSS, and minify safely.
What’s the best way to handle image weight?
Compress files using CDNs or optimization tools, use proper formats, and limit each to ≤ 100 KB.
How can I ensure accessibility for users with slow connections?
Keep total email size < 1 MB, design for no-image fallback, and prioritize essential content loading first.
What’s the ultimate goal of email size optimization?
To balance design quality, deliverability, and speed — resulting in higher open and click-through rates.
Quando si parla di dimensioni dei file nelle email, stiamo davvero parlando di 3 argomenti: la dimensione del file HTML inviato, la dimensione delle risorse esterne e la dimensione completamente caricata. Vogliamo mantenere tutte queste dimensioni dei file il più piccole possibile, ma quali sono le dimensioni massime e a cosa dovremmo mirare?
Dimensione del file HTML
La dimensione del file HTML è la dimensione del file .html che viene effettivamente inviato. Questa dimensione del file non include la dimensione delle immagini incluse, poiché queste sarebbero collegate da questo file html e scaricate quando aperte.
La dimensione massima che consigliamo è 100KB, poiché qualsiasi dimensione superiore può portare a problemi di consegna e visualizzazione. Ad esempio, Gmail taglierà il tuo html a 102KB. Il taglio nasconderà la fine della tua email e può rompere il layout. Anche la gestione delle email da parte di Gmail ha altre considerazioni, come l'impatto del prefetching delle immagini sul tracciamento delle email.
La maggior parte delle email dovrebbe facilmente essere sotto i 50KB. Tuttavia, a volte miglioramenti progressivi complessi o una grande quantità di contenuti di campagna risultano in una dimensione del file maggiore. Se ciò accade, ci sono diversi modi per aiutare a ridurre la dimensione del file HTML.
Pulisci il tuo codice. L'email è in continua evoluzione e vediamo molti modelli con codice obsoleto. Una rapida pulizia può risparmiare alcuni KB.
Non esagerare con il codice. Alcuni modelli che vediamo hanno codice extra che semplicemente non è necessario. Per una guida su come creare modelli efficienti, vedi la nostra guida su modelli email avanzati. Il peggior colpevole è aggiungere elementi di tabella aggiuntivi. La maggior parte dei layout può essere realizzata con 5-10 tabelle, ma spesso vediamo codice con 30-40 tabelle. Meno tabelle hanno anche il vantaggio aggiunto di rendere il tuo codice più facile da leggere.
Sposta alcuni codici da HTML a CSS. Non è ancora sicuro spostare tutti i tuoi stili in CSS, ma se fatto correttamente, spostare alcuni stili in linea negli stili incorporati può aiutare a ridurre il codice.
Semplifica il tuo design. Un'altra opzione è tornare alla fase di design. Le email a singola colonna utilizzano molto meno codice.
Minimizza il tuo codice. Minimizzare il codice rimuoverà spazi e commenti non necessari. Questo può avere un enorme effetto, ma fai attenzione poiché molti ESP impongono una lunghezza massima della linea che potrebbe forzare una nuova linea e rompere il codice.
Dimensioni degli Asset Esterni
Dimensione Email Completamente Caricata
Questa è la dimensione complessiva di tutto quando l'email viene aperta e tutto viene scaricato. Questo può variare a seconda dell'ambiente in cui l'email viene aperta.
Il problema principale qui è il tempo necessario per caricare l'email. Probabilmente testerai le tue email in un ufficio con una connessione molto veloce, ma molti dei tuoi destinatari potrebbero essere su dispositivi mobili con una connessione 3G lenta.
Su una buona connessione, una dimensione totale dell'email di 1mb si caricherebbe in una frazione di secondo e sembrerebbe istantanea per l'utente. Tuttavia, su una connessione 3G potrebbe richiedere tra 2 e 14 secondi per caricare l'intera email. E se il tuo pubblico target è probabilmente su una connessione 2G, quel download potrebbe richiedere un paio di minuti. Quando le email si caricano lentamente, compelling subject lines diventano ancora più critiche per l'engagement.
Questo è anche un problema potenziale per gli utenti con piani dati restrittivi che devono considerare ogni MB che scaricano. Ciò è particolarmente una considerazione nei paesi in via di sviluppo.
Alcune cose che puoi fare per aiutare:
Innanzitutto, guarda tutte le raccomandazioni che abbiamo menzionato riguardo all'ottimizzazione della dimensione dell'html e delle immagini.
Se hai il tempo, è sempre utile sperimentare con il codice e testare ciò che è realmente necessario e ciò che puoi omettere. Sperimenta con le immagini e prova modi diversi per comprimerle. Assicurati che la tua email abbia un aspetto buono e abbia senso senza immagini, così i tuoi utenti possono iniziare a guardare la tua email mentre aspettano le immagini.
Putting it All Together
Con le dimensioni dei file, come con molte cose, tutto si riduce a un compromesso. Potresti eseguire alcuni test A/B e scoprire che immagini di grandi dimensioni ad alta risoluzione funzionano bene. Potresti scoprire che molti contenuti dettagliati funzionano bene. Potresti scoprire che un'interattività complessa funziona bene. Tuttavia, quando metti tutti e tre in una singola campagna, potresti vedere che le cose iniziano a funzionare male. I problemi di prestazioni delle email possono anche derivare da problemi di recapito come errori di battitura negli indirizzi email.
