Retina display: Email problems and solutions

In addition to all the different screen sizes available, electronic devices’ constant evolution presents another challenge for email marketing specialists: DPI high-resolution screens, also known as Retina display. These have the power to improve the experience given by an email marketing campaign, but also of doing just the contrary; if we do not know how to properly implement images in the email, it can give the subscriber a much lesser experience. 

This post will explain how DPI high-resolution screens work and what they mean for email marketing designers and marketing specialists. After seeing how we can implement retina images in our own campaigns, we will finish up with some important considerations. 

In the world of email marketing, retina displays are not an issue on their own; the problem is forgetting about them when designing an email. If we don’t optimize the images, subscribers who open the email with a retina display device will most probably see blurry and unfocused images, especially diagrams. In fact, here, we can see an example of an optimized image vs. one that is not:

Unoptimized image vs. Optimized image

As we were saying, the email’s designs will lose quality, which can generate distrust towards the brand. Given so, how can we solve this?

In general terms, high-resolution screens have twice the pixels per inch than traditional screens. Therefore, if we want our images to show correctly on these screens, they must be two times bigger so that, when we reduce their size to fit the email, there are more pixels and can be seen properly on the retina display. This technique, however, doesn’t come without drawbacks. 

Some considerations to keep in mind

As we increase the dimensions of our image, the size of the file will grow as well. This could translate into a slower loading of the email and a lesser experience for the user. If you need to implement several retina images in the email, here are two methods that can be helpful: 

  • Using compression images

 The images would be stored in large dimensions but set to a very low quality. Most photo editing software allow you to decide at which quality to save images. For example, you can adjust the quality of a JPEG with a simple slider. 

To create compression images, we have to design the image four times bigger than our desired size and save it with an extremely low-quality setting. Even though it will not display correctly when opening the image to full size, this problem will disappear after reducing it to the email’s required size. The low-quality setting will ensure a minimum file size and an optimal loading speed. 

  • Using an image compression software

We can also use software that allow us to compress, even more, the images after saving them. There are tools, many of them free, for each operating system that let you process and compress images once they have been created: ImageOptim , JPEGmini , TinyPNG , Compressor.io, and Kraken 

Finally, we want to emphasize the importance of campaign testing, even more so in these cases. Sending tests to check how our email is displayed on different devices and screens is fundamental to find possible mistakes and solutions.