Apple refers to their high-DPI display as Retina displays since, in theory, the DPI is so high that the human eye can no longer distinguish between individual pixels on the screen.
While ‘Retina display’ is an Apple brand name, the term ‘retina’ is often used to describe high-DPI display from other manufacturers.
Likewise, the retina is commonly used to refer to images optimized for high-DPI display.
Any need for retina images?
As a marketer, it’s your job to present our brands in the best light possible. While subject lines, copy, and cadence all play an important part in looking good to subscribers, visuals draw people to an email campaign first.
After opening an email, our eyes move to the design and imagery before we start reading any copy or tapping calls-to-action.
If you’re not accounting for high-DPI display, you run the risk of looking careless to subscribers.
Because of the way high-DPI display work, non-optimized images end up looking blurry and pixelated on retina screens.
If you’re not optimizing your images for high-DPI screens, those users see a degraded email signature design, which can lead to equally degraded trust in your brand.
How to use retina images in an email signature
Roughly speaking, high-DPI display have twice as many pixels per inch than their traditional counterparts.
Therefore, if you want your images to look good on those screens, they need to be twice as large so that, when they’re scaled down in the email signature, there are more pixels for retina screens to display.
Let’s look at an example.
In our email signature, we include the Xink logo.
Using HTML, it’s sized so that it displays at 100 by 29 pixels. If we created and saved the logo image at that size, subscribers would see a blurry mess on retina screens:
<img alt="Xink" src="xink_logo_100_29.png" width="100" height="29" style="font-family: sans-serif; color: #ffffff; font-size: 10px; display: block; border: 0px;" border="0">
To keep the logo crisp, we simply create an image at a larger size.
In this case, the image file is 200 pixels by 58 pixels, but anything that’s at least double the intended display size works.
Then, in our HTML, we use the original, intended display size in the width and height attributes to scale the larger image down:
<img alt="Xink" src="xink_logo_200_58.png" width="100" height="29" style="font-family: sans-serif; color: #ffffff; font-size: 10px; display: block; border: 0px;" border="0">
Any considerations?
While doubling the size of your images helps ensure that they display beautifully on retina screens, this technique is not without its drawbacks.
As we increase the dimensions of an image, the file size increases, too. That increased size cuts into your internet bandwidth (and mobile data plan) and can cause an email signature to load slowly.
Both issues are a big problem and create a less-than-friendly user experience.
One way to keep file sizes in check is to use a dedicated program to compress your images after saving them.
Applications—many of them free—exist for every operating system that allows you to process and compress images after they are created.
Some of our favorites include ImageOptim, JPEGmini, TinyPNG,Compressor.io, Kraken, and Pied Piper.
In most cases, you simply drag and drop—or upload—your images to the program and they compress them.
Then, you can upload those optimized images to your Xink account or link the image to your ESP.
