This morning it occurred to me that there was a lack of good information around for what we can get away with when using images in an email design.
I’m missing my images
Images not loading in an email is sucky, especially when it’s an email you’ve designed. Top of mind is the one pictured below (not one of mine) which arrived in my inbox recently.
We have to assume that no matter what we do we’re going to have to live with the occasional missing image, which is why we should always avoid splitting images up into separate parts. This stops photographs of products being cut in half, and rasterized text becoming unreadable.
I decided to ask @campaignmonitor what their opinion was on acceptable file size was:
@craigrozynski Generally, we say keep the email as light as possible – image-heavy emails are slow-loading and can burden mobile users ^RH
Nothing we didn’t already know right? Is it possible that no one has done conclusive testing? How can we be this far down the evolutionary path of email design and still be this vague?
I don’t think I’ve ever built an email larger than 200kB, but what if I’ve been needlessly paranoid, compressing product shots down all this time?
It’s all well and good to say “Dude your email should be like, 20kB tops. Draw it with CSS or something”, but when you’re selling products based on their aesthetic value, a heavily compressed jpg is dumb.
What I want to know is – how big a file size can I get away with?
How many times?
But wait, there’s another factor that may play a part here. Do email clients have an aversion to how many http requests I make? Obviously a single 100kB image will load better than 100 1kB images, but I want to know – what are the margins I should be working within? If my EDM has over 20 images in it should I be worried that some won’t load?
To the laboratory!
Okay I don’t have a laboratory. In fact I kinda hoped that by raising the issue with Campaign Monitor they might carry the torch, but alas:
@craigrozynski I’ll let you know if anything comes across my desk, def one to think about here :) ^RH
They are certainly better equipped to produce meaningful results, but they’re all very busy people. So, what’s the best I can do to get the ball rolling?
1. What is a safe file size limit for an email design?
2. Does the number of http requests have an impact on loading images?
3. How do they compare on different connections?
1. Image size test file
1.1 100kB image
1.2 200kB image
1.3 500kB image
1.4 1000kB image
2. Http requests test file
2.1 5 images totaling 200kB
2.2 10 images totaling 200kB
2.3 30 images totaling 200kB
3. Connection type
3.1 Standard cable connection (100mbps)
3.2 Mobile 3G
3.3 Mobile Wifi
I’ve only tested with one email client, Apple Mail for the standard cable connection, and iPhone iOS for mobile 3G and Wifi. Given that different email clients use different rendering engines, I can only assume results vary across email clients, but that’s a test for another day.
|Image size test file (Ranked out of 10, where 10 is the fastest load)|
|Http requests test file (Ranked out of 10, where 10 is the fastest load)|
|5 images total 200kB||10 images total 200kB||30 images total 200kB|
Judging by these results we should have no qualms about sending out a 500kB email. A 1000kB email would perhaps test the patience of someone checking their email on the move. Still, it was only a matter of seconds.
The amount of http requests made had no real effect. The most images used was 30, although they were all the same image. I’m not certain whether Mail and iOS redraw the same image from cache or call it from the server 30 times. A better test would’ve been 30 individual images.
What bothers me is there’s no evidence here of why images occasionally, and intermittently, fail to load in an email? That mystery is yet to be solved.