HTML File Size
HTML file size is the size of the .html file that is actually sent. This file size does not include the size of the included images, as these would be linked from this html file and downloaded when opened.
The maximum size we’d recommend is 100KB, as anything over can lead to deliverability and display issues. For example, Gmail will clip your html at 102KB. Clipping will hide the end of your email and can break your layout.
Most emails should easily come in under 50KB. However, sometimes complex progressive enhancements or a large amount of campaign content results in a larger file size. If this happens there are a number of ways to help reduce the size of your HTML file.
Clean your code. Email is constantly changing and we see a lot of templates with outdated code in them. A quick clean up can save a few KBs.
Don’t over code. Some templates we see have extra code that simply isn’t needed. The worst offender is adding additional table elements. Most layouts can be achieved with 5-10 tables, but we often see code with 30-40 tables. Fewer tables also has the added benefit of making your code easier to read.
Move some code from HTML to CSS. It’s not yet safe to move all your styles to CSS, but if done correctly moving some inline styles to embedded styles can help reduce code.
Simplify your design. Another option is to go back to the design stage. Single column emails use a lot less code.
Minify your code. Minifying code will remove unnecessary spaces and comments. This can have a huge effect but be careful as many ESPs enforce a maximum line length that could force a new line and break the code.
External Assets Size
External asset size is the size of all your images and external style sheets. Since external sizes are rare, we’ll focus more on images for now.
If you’re using background images and media queries then it’s possible in certain environments not everything will be downloaded for every user. But, remember even if you define display:none; on an <img> element, it will still download. There is currently no way of stopping this.
The maximum size for most images is 100KB, but if you have one large high res image or an animated gif that could go up to 500KB. However, it’s more about the total size, which we’ll cover in the full loaded email size section.
There are loads of resources around to help with compressing images sizes:
ImageOptim – on Mac, or as a web service
Caesium – on Windows
CDN – Many CDNs have image optimization built in. Some will even adjust the compression depending on the bandwidth available.
Here are some other tips we recommend:
Make sure you are using the most appropriate format, .jpg for photos, .gif for graphics and .png for when you need alpha channels
Simplify your design. Again go back to the design stage to use fewer images, smaller images, or simpler images that can be compressed to smaller sizes.
Fully Loaded Email Size
This is the combined size of everything when the email is opened and everything is downloaded. This can vary depending on the environment where the email is opened.
The main issue here is the time it takes the email to load. You’ll likely be testing your emails in an office with a very fast connection but many of your recipients may be on mobile devices with slow 3G connection.
On a good connection, a total email size of 1mb would load in a fraction of a second and seem instant to the user. However, on a 3G connection it could take between 2 and 14 seconds to load the full email. And, if your target audience is likely to be on a 2G connection that download could take a couple of minutes.
This is also a potential issue with users with restrictive data plans who have to consider every MB they download. This is particularly a consideration in developing nations.
A couple of things you can do to help:
Firstly, look at all the recommendations we mentioned regarding html and image size optimization
If you have the time it’s always good to experiment with code and test what is really needed and what you can leave out. Experiment with images and try different ways to compress them. Make sure your email looks good and makes sense without images, so your users can start looking at your email while they wait for the images.
Putting it All Together
With file sizes, as with a lot of things, it all comes down to compromise. You may do some A/B testing and find large high resolution images perform well. You may find that a lot of detailed content performs well. You may find that complex interactivity performs well. However, when you put all three into a single campaign– you may see that things start to perform poorly.