Things like adding video backgrounds, CSS animation, responsively showing/hiding images or content, complex media queries and other cool new effects people are doing is adding a lot of weight to emails.

I’ve been thinking of ways to tighten up on load times to compensate for this. Would be great to hear any thoughts on the below and additional ideas.

Keep the number of images down

Each image you load is a request to the server, 30 tiny images = 30 individual requests. I’ve not tried using sprites in email, might be able to do something with overflow:hidden; rather than background-image:

You can often use things like, styled text, unicode characters, CSS triangles etc. instead of images.

Save images for web

An obvious one but I’ve seen a couple of print optimised images used in email before. I’m assuming it was a mistake and they didn’t mean to include a 10mb image.

Crop unwanted white space

Using HTML to position an image rather than white space can easily reduce an image file size.

Minify HTML

Minifying can significantly reduce your HTML file size.

Avoid bloated code

This is hard, you need to bloat the code to get all your hacks working. But I do see a lot of duplicated code such as setting text styles on a <td> and a <span> and in a <style> block.

If you’re using prefixed CSS check the support, for example you can just use -webkit-animation

Keep the message short

Simply include less and your file size will be smaller.
This seems to be a trend anyway and emails often perform better with one simple message.

Paint times

I just read this today so will just share the article

Cheers,

Mark