How to create Retina Ready Email Templates

Readability and legibility are two of the most critical factors determining the success of your email campaigns. With the increase in usage of high-DPI screens around the globe, marketers need to ensure that their emails look clean, crisp, and not cheap on these displays. High-DPI displays, commonly known as Retina displays, can elevate the reader’s viewing experience. That said, not every image in the email needs to to be a retina image. So, where should marketers use retina images in emails, and where should they avoid them? How are retina-ready email templates created? Let’s explore answers to these questions, and more, in this article.

What is a Retina display?

Retina Display is a brand name developed by Apple to refer to devices and monitors that have a resolution and a pixel density of 300 or more pixels per inch (ppi). The development of Retina display started with iPhone 4. The pixel density of Retina displays is so high that a person is unable to catch sight of the individual pixels at a normal viewing distance. Higher the pixels, clearer and more detailed the image.

Today, almost all the devices use Retina screens, or something similar. Therefore, it is essential to create images and newsletters with a high number of DPIs. Retina images are ordinary images displayed in such a way that they display crisper on Apple’s Retina displays.

Need for Retina-ready email templates

When you show an image at its native dimensions, there are chances that the image may appear a bit blurry on Retina displays. For example, a natively 300px wide image that is being displayed via CSS at 300px on the iPhone will appear a bit more blurry as all four pixels show the same thing in each 2×2 block. Now, if a natively 600px wide image is displayed at 300px width via CSS, the retina screen will come into play. Every pixel in each 2×2 block will be able to show a different color, and thus the image will look crisper.

Some images will benefit more than others from this sort of treatment, especially logos. If logos are not correctly optimized for Retina displays, they can look blocky. Also, any image that a user might zoom in will benefit hugely from Retina optimization. If your emails contain a lot of images, especially for product-related campaigns, you must use retina-friendly email templates. Another factor determining the use of retina-friendly email templates is your audience. If your targeted readers, in your list, are predominantly using iOS, then you have to use retina-ready images in your email campaigns.

How to create Retina-ready email templates?

Retina displays have twice the pixels per inch (ppi) than traditional ones. This means that images on your emails also need to grow twice their size. So if the image is 500×400, save it at 1000×800. Although we resize our images to twice their size, we still place the original size image in the newsletter and then fix it with HTML coding. <img alt= “ ” src=“[email protected]” width= “500” height= “400 ” style= “font-family: sans-serif; color: #fffffff; font-size: 20px; display: block; border: 0px;” border= “0”> The main challenge in coding retina images is to make sure that they are compatible with various Outlook desktop clients. In order to achieve this, you can set the width as an attribute on the image tag and then reset the width using media queries to get the images in a size you’d like in mobile clients. The height of the images will automatically be scaled to match in most of the clients.

Things to remember

  • In emails, you don’t have the option of using the higher density image as and when you require or wish. There’s one double-sized graphic for all recipients. Therefore, you need to create your email in a way that the double-sized retina-friendly graphic gets served to everyone.
  • Always create your images in a perfect 2x ratio to the original size; nothing more or less than that. Creating the precisely double-sized image will ensure that the image looks ideal after scaling, especially if the graphic contains any text.
  • Make sure that your file size is under control. On the web, you can control the file size using CSS, however, in emails, you can’t do that. When you double the width and height of images, you will end up increasing the file size. With more and more emails being opened on mobile phones, the large file size will pose a big issue. It will take a long time to download and will also consume a lot of mobile data.
  • You must focus more on logos, images with text, icons and buttons. These are more likely to get blurry on retina displays, when not optimized. That said, these email elements are easy to convert into higher resolutions without drastically increasing the file size.
  • Doubling the size of images and then scaling them might be challenging in responsive HTML. To do so successfully, make sure that media queries aren’t setting a fixed size that conflicts with the way you are scaling the images.
  • The most important thing to remember is that not every email marketing campaign requires you to use Retina images. Use non-Retina images if there are a large number of images in a newsletter for a campaign, so that it doesn’t take ages to download such campaigns.
If recent trends are anything to take a queue from, they clearly indicate that we will continue to see an upside in the number of people moving to smaller mobile devices to read emails. And, with more and more manufactures fitting devices with high DPI displays, the need for retina-ready email templates is obvious. Retina images are easy to implement and can really improve the visual impact of your emails.