Image swapping in emails
In emails we should never design different imagery for mobile and desktop. This includes different croppings of images, like a header graphic that's wide for desktop but then has the sides chopped off for mobile. We should always avoid this kind of thing in email design. (Designing emails mobile first is tremendously helpful in avoiding this. It makes it easy! If you're not designing emails mobile first, you are doing it wrong.)
So all images in an email should be exactly the same for mobile and desktop; larger ones can simply scale as needed for different viewports, and smaller ones (e.g. icons) can usually just stay the same size.
Why can't we swap in different images for mobile and desktop? Several reasons:
Risks
- Some email platforms may show both images in each instance, e.g. both the mobile and desktop headers, stacked. Yikes!
- If the above doesn't happen, there's an even greater risk that if a user forwards the email, both images will appear in all instances. I've seen agency teams get burned on this one several times when clients have forwarded our emails. The test blast passed QA, but no one thought about forwarding it. (Should we begin QA'ing forwarded emails? Seems like hugely wasteful overkill, which we can avoid by simply never doing any image swapping.)
Let's say the dev team is able to achieve the image swap, and it tests perfectly across platforms, even when forwarded. I've seen this pulled off with some fancy code. I still say we should never do it.
Other reasons image swapping goes against best practice
- The user has to download both images in all instances, causing the overall download of the email to be slower; not great for user experience.
- The duplicate images may cause the email to exceed the (often very small) file size limit that's dictated by the deployment vendor.
- Image swapping incurs extra design work, extra dev work, extra QA work, and possibly extra routing time for the whole team — all for no extra value to the user or client.*
"But we've done it before"
There are plenty of email development vendors out there who will happily program your email with different images swapped in for mobile and desktop. This means they're just executing; they're not acting as a partner or a consultant. For example, they'll probably also happily program an email for you with a background image (which is not supported in Outlook), or an email that's not ADA-compliant (which puts our client at risk of being sued). I see it all the time.
A partner, a consultant, would speak up, in the interest of helping you make a better email that will perform better for your clients. A partner or consultant would also speak up and let you know that you're paying for an email that's more expensive than it should be. For email, simple, streamlined, fast, cheap is always better.
*Two questions
Two questions that are always worth asking when we're tempted to do something that goes against best practice:
1. Is there any value to the user?
2. Will this make the piece more successful for our client?
In the case of image swaps in email, the answer to these is always no. Period. We simply need to design mobile first, nail that mobile experience, and then effortlessly extend for desktop. Email design should never be more complicated than that.
For emails, we must embrace streamlined design; cheaper design, cheaper dev. Image swaps in emails run completely counter to this.
(Same thing for repositioning of elements!)
– Manning
Questions/comments? Feel free to contact me at manning@manningkrull.com. I update these articles pretty frequently — best practices evolve over time as the world of digital quickly changes, and I always welcome insights from others.