Should you design your images in Retina in an email?

A concise article on a specific subject (you've seen it rhyme! It's the claaaasse...): our customers (and not only them) regularly ask us advice on the weight of visuals in their email campaigns. But also how to maintain optimum image quality while minimizing file size?

I have the bad habit (you'll understand why I say "bad" afterwards) of only recommending Retina images when really necessary: for product visuals, for example, or very aesthetic visuals.

I (Charles) am always saying that you have to pay attention to the weight of the Retina images, because images that are twice as big are "inevitably" heavier.

Let's remember what the Retina is

Retina displays are a line of high-resolution liquid crystal displays from Apple. "Retina" is a registered trademark of Apple [...]. The higher resolution of the Retina display increases the visibility of images and improves the user's visual experience.

Wikipedia

In other words, this type of high-resolution screen has a higher-than-normal DPI (Dots Per Inch): there are more pixels in a given area than in any other screen.

And the higher the DPI, the more detailed the images and texts are. Most manufacturers have adopted high resolution screens.

Unfortunately, images not optimized for Retina appear "blurry" and pixelated on Retina displays. I've put below an example.

How to plan for Retina in email?

Displaying Retina images in an email is relatively simple. Since high-resolution screens have twice as many pixels per inch as their traditional counterparts, it's relatively easy, the images must therefore be twice as large.

So, for an image 600 pixels wide by 300 pixels high, you'll design and export an image 1200 pixels wide by 600 pixels high, then call it up in your HTML code as follows:

<img src="monimage.jpg" width="600" height="300" style="display:block;" border="0">

Okay, but if it's heavier, it's not so great?

But how good it is not to fall asleep on ready-made ideas! It was during discussions with my valued colleagues Pierre, Grégory and Fabien that I discovered thata Retina display can very well be as light as a non-Retina display (or even less heavy), and always of better quality.

So, how do we do this? Well, if we consider that a Retina visual is much larger than a non-Retina visual, we can also consider that we'll be able to apply much stronger compression to it. And so it is.

This type of compression can of course be done with tools like Photoshop (probably the most adapted for an optimized compression with an optimal quality preserved) or online solutions like squoosh.app.

What is crazy though (and I might as well be totally transparent) is that this article from Litmus already mentioned this trick. But I probably hadn't taken the time to read it all the way through. Shame on me!