There was a lack of good information around for what we can get away with when using images in an email design. In this article, we will explore the optimal image size for use in emails.
How big?
@craigrozynski Generally, we say keep the email as light as possible image-heavy emails are slow-loading and can burden mobile users.
Nothing we didnt 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?
Its all well and good to say your email should be like, 20kB tops. Draw it with CSS or something, but when youre 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 images?
But wait, theres 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 wont load?
The criteria
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
This test is using 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 to keep the results comparable, we will limit this to Apple Mail.
Results
| Image size test file (Ranked out of 10, where 10 is the fastest load) | ||||
| 100kB | 200kB | 500kB | 1000kB | |
| Cable | 10 | 10 | 10 | 10 |
| 3G | 10 | 7 | 7 | 5 |
| Wifi | 10 | 10 | 7 | 10 |
| 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 | |
| Cable | 10 | 10 | 10 |
| 3G | 7 | 7 | 7 |
| Wifi | 10 | 10 | 10 |
Findings
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.
In conclusion, I would recommend going no higher than 200kb per image and of course keep smaller images as low as possible.
Original article can be found here.