Het belang van e-mailbestandsgrootte
Bird
27 aug 2018
1 min read
Belangrijkste punten
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 Hoogtepunten
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.
Wanneer we het hebben over bestandsgroottes in e-mail, hebben we het eigenlijk over 3 onderwerpen: de grootte van het verzonden HTML-bestand, de grootte van externe assets en de volledige geladen grootte. We willen al deze bestandsgroottes zo klein mogelijk houden, maar wat zijn de maximale groottes en waar moeten we naar streven?
HTML Bestandsgrootte
HTML-bestandsgrootte is de grootte van het .html-bestand dat daadwerkelijk wordt verzonden. Deze bestandsgrootte omvat niet de grootte van de bijgevoegde afbeeldingen, aangezien deze aan dit html-bestand zouden worden gekoppeld en bij het openen worden gedownload.
De maximale grootte die we aanbevelen is 100KB, omdat alles daarboven kan leiden tot bezorg- en weergaveproblemen. Bijvoorbeeld, Gmail zal je html inkorten bij 102KB. Inkorting zal het einde van je e-mail verbergen en kan je lay-out breken. Gmail's verwerking van e-mails heeft ook andere overwegingen, zoals de impact van afbeeldings-prefetching op e-mailtracking.
De meeste e-mails zouden gemakkelijk onder de 50KB moeten blijven. Soms zorgen echter complexe progressieve verbeteringen of een grote hoeveelheid campagnemateriaal voor een grotere bestandsgrootte. Als dit gebeurt, zijn er een aantal manieren om de grootte van je HTML-bestand te helpen verminderen.
Reinig je code. E-mail verandert voortdurend en we zien veel sjablonen met verouderde code erin. Een snelle opruiming kan een paar KB's besparen.
Overcodeer niet. Sommige sjablonen die we zien, hebben extra code die gewoon niet nodig is. Voor begeleiding bij het maken van efficiënte sjablonen, zie onze gids over geavanceerde e-mailsjablonen. De grootste boosdoener is het toevoegen van extra tabelelementen. De meeste lay-outs kunnen worden bereikt met 5-10 tabellen, maar we zien vaak code met 30-40 tabellen. Minder tabellen maken je code ook makkelijker leesbaar.
Verplaats wat code van HTML naar CSS. Het is nog niet veilig om al je stijlen naar CSS te verplaatsen, maar als het correct wordt gedaan, kan het verplaatsen van enkele inline stijlen naar embedded stijlen helpen om de code te verkleinen.
Vereenvoudig je ontwerp. Een andere optie is om terug te gaan naar de ontwerpfase. E-mails met één kolom gebruiken veel minder code.
Minimaliseer je code. Het minimaliseren van code verwijdert onnodige spaties en opmerkingen. Dit kan een enorm effect hebben, maar wees voorzichtig, aangezien veel ESP's een maximale regellengte afdwingen die een nieuwe regel kan afdwingen en de code kan breken.
Externe Vermogen Grootte
Volledig Geladen Email Size
Dit is de gecombineerde grootte van alles wanneer de e-mail wordt geopend en alles wordt gedownload. Dit kan variëren afhankelijk van de omgeving waarin de e-mail wordt geopend.
Het belangrijkste probleem hier is de tijd die het kost om de e-mail te laden. Je zult waarschijnlijk je e-mails testen in een kantoor met een zeer snelle verbinding, maar veel van je ontvangers kunnen zich op mobiele apparaten met een trage 3G-verbinding bevinden.
Bij een goede verbinding zou een totale e-mailgrootte van 1MB in een fractie van een seconde laden en voor de gebruiker onmiddellijk lijken. Echter, op een 3G-verbinding kan het tussen de 2 en 14 seconden duren om de volledige e-mail te laden. En als je doelgroep zich waarschijnlijk op een 2G-verbinding bevindt, kan die download enkele minuten duren. Wanneer e-mails langzaam laden, worden aansprekende onderwerpregels nog kritischer voor betrokkenheid.
Dit is ook een potentieel probleem voor gebruikers met beperkende databundels die bij elk MB moeten overwegen wat ze downloaden. Dit is met name een overweging in ontwikkelingslanden.
Een paar dingen die je kunt doen om te helpen:
Kijk allereerst naar alle aanbevelingen die we noemden over html- en afbeeldingsoptimalisatie.
Als je de tijd hebt, is het altijd goed om met code te experimenteren en te testen wat echt nodig is en wat je kunt weglaten. Experimenteer met afbeeldingen en probeer verschillende manieren om ze te comprimeren. Zorg ervoor dat je e-mail er goed uitziet en logisch is zonder afbeeldingen, zodat je gebruikers naar je e-mail kunnen kijken terwijl ze wachten op de afbeeldingen.
Alles samenvoegen
Bij bestandsgroottes, zoals bij veel dingen, komt het allemaal neer op een compromis. U kunt A/B-tests uitvoeren en ontdekken dat grote afbeeldingen met hoge resolutie goed presteren. U kunt ontdekken dat veel gedetailleerde inhoud goed presteert. U kunt ontdekken dat complexe interactiviteit goed presteert. Echter, wanneer u alle drie in een enkele campagne stopt – kunt u zien dat dingen beginnen slecht te presteren. E-mailprestatieproblemen kunnen ook voortkomen uit afleverproblemen zoals spelfouten in e-mailadressen.
