I’m sure by now you have heard the term ‘Retina display’. In case you aren’t familiar, Retina display is a brand term developed by Apple that refers to devices and monitors that have a resolution and pixel density much higher than what has been made in the past, roughly 300 or more pixels per inch, double the resolution of what they used to be. Retina displays are visually stunning, it’s amazing how crystal clear and vibrant they are.
Last month, I got a new Macbook Pro with Retina display, (special thanks to Relationship One—it’s a great place to work). I’m a big fan. I noticed the difference almost immediately. However, not all those noticeable differences where positive. Almost every webpage or email that had images was blurred, fuzzy, or seemingly unfocused. It might be my designer eye, but it drove me nuts! I thought I was designing for email properly, but boy, times they are a’changing. I’m a little late to the party (Retina displays have been around since 2012), but these days, more and more devices are now including it by default.
Let me show you what I’m talking about. Here’s an example of an email header. On a non-Retina display monitor, the images are sharp. But on my new laptop, I can see the text “December Blog Newsletter” is sharp as expected, but the three images are a bit fuzzy: the Relationship One logo, the Twitter icon, and the Facebook icon.
So, what should we email designers do about this? What is the solution? After speaking with our internal team of developers, I learned there are multiple things you can do for your websites and landing pages, but for email specifically, a fairly simple trick seems to work.
Last year, at the Email Design Conference, I learned that doubling the size of an image and then constraining its width with either CSS or the width attribute in the image tag will hold the image’s sharpness when viewed on a Retina device. Makes sense? The pixel size has doubled, so let’s double our images!
In the original email, the logo is 260 x 55 pixels. I’m going to double it to 520 x 110. I’ll do the same with the social icons. Then, on the HTML side, I’ll constrain the images to the original sizes used in the template, which I do using the width attribute in the image tag (
<img/>). Here’s an example:
<img src=“http://img.en2.com/EloquaImages/Relationshipone/Relationship-One-Logo-White.png” width=“260”>
Voila! This is what the header looks like when optimized for Retina display.
We could stop here, but, if you have an image-heavy email, it may take a long time for your email’s recipient to download all of the images. To save on download time, instead of saving the image at 2x the size, you can save the image at 1.5x the size and lower the quality of the image in Photoshop to around 80% when exporting. You’ll still get a good result.
If you have any further questions, please contact us. Cheers to making beautiful emails!