A concise article to talk about a specific subject (you saw 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 keep an optimal image quality while reducing the file size as much as possible?
I have a bad habit (you'll understand why "bad" later) of recommending Retina images only 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 DPI (Dots Per Inch) than normal, a "high DPI": There are more pixels in a given area than another 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.
For an image of 600 pixels wide by 300 pixels high, you will design and export an image of 1200 pixels wide by 600 pixels high, then call it in your HTML code as follows:
<img src="monimage.jpg" width="600" height="300" style="display:block;" border="0">Ok, but if it's heavier, it's not great ?
But how good it is not to fall asleep on ready-made ideas! It was during discussions with my precious 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 display is much larger than a non-Retina display, we can also consider that we can apply a much stronger compression. And this is the case.
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 didn't take the time to read it all the way through. Shame on me!