There isn’t any doubt that we have an increasing number of mobile devices which support Retina Displays. It became a web-standard now, like responsive design. Email Marketing shouldn’t be any different, your precious email campaign deserves crystal clear images as much as any other website on the world wide web do.

First things first… What is Retina Display?

It is a brand name used by Apple. A “Retina Ready” image viewed with a device that supports retina displays has a high density of pixel count, enough that our eye is unable to notice any pixelation. Similar technologies also used on various brands with different operating systems, like Android OS and Windows OS.

What is the advantage of using Retina Ready images, and what if I ignore to use them in my email campaign?

If you use Retina Ready images (we will discuss it in a minute), images in your email will look sharp and crystal clear, on both Retina and non-Retina devices. But if you don’t, the images in your email will look blurry when displayed on a device supporting Retina displays. In other words, regular images will be displayed blurry by devices that have retina support.

So, what is the solution? What is the trick to make my images (and my email template) Retina ready?

The trick is, to create the image at TWICE the size you actually plan on displaying it. And then, shrink it down for the Retina Displays. This will double the pixel density of your image. Let’s assume that you want to use an image with a width of 250 pixels, and with a height of 100 pixels. If you want to serve a Retina Ready image with your email, then you should double the image size. In other words, you should use an image with a width of 500 pixels and with a height of 200 pixels. Then the trick will be shrinking the image down to the width of 250px and to the height of 100px within our HTML code.

My images are ready now, what about the HTML code?

After calculating your image’s dimensions, now it is our code’s turn to shrink it down for a higher density of pixels. If you’re never dealt with HTML before, please do not be afraid, it is very easy. In HTML, images are served with an HTML tag called img. In our case, the important parts are the width and height attributes of the img tag.

Let’s remember the dimensions of our image: width=500px and height=200px

<img src=”myimage.jpg” alt=”company logo” width=”250″ height=”100″/>

Thus, we just shrunk our image, serving it as retina ready for the retina devices.