preloadpreload

Retina Email
Overhauling user experience with
high quality display!
Uplers

Tired of the blurred logos, images and icons in your emails? The heavenly Retina Emails are here!
What the heck – Seriously? Yes, why not check out the Retina Email experience in your inbox?

Why step into the heavenly world of Retina Email?
- 1 -
Crystal Clear
Icons
Detailed View and
Enhanced Clarity of Email
Excellent Font
and Text Rendering
Improves Color and
Contrast of Email
HD Videos in
Email Look Brilliant
Sharper and
Smoother Logos
Cleaner, Sharper
and Crisp
Uplers
Which devices support Retina Display?
  • iPhone 4s
    iPhone 5, 5c, 5s

  • iPad Mini, iPad Mini 2
    iPad 3, 4, Air

  • Macbook Pro 3

So, why’s Retina a holy chant?

Retina Display is a brand name developed by Apple to refer to devices and monitors that have a resolution and pixel density so high – roughly 300 or more pixels per inch that a person is unable to discern the individual pixels at a normal viewing distance.

In layman's terms, ppi refers to the number of pixels spread across the surface area of the screen. You can calculate your own ppi using calculators like this https://www.sven.de/dpi/

It’s been noted that with 20/20 vision the human eye can distinguish pixels at up to 400 ppi.

Apple's Retina Display made its debut on 2011's iPhone 4S, which featured a 960x640 pixel screen with four times the number of pixels (326 pixels per inch) as the iPhone 4.

Before you kick start, Imbibe the below mantras

If you’ve read emails on a retina display you may have noticed that some graphics look a little blurry. Standard-resolution bitmap images can look blocky on a Retina display and when scaled bigger, it might not remain smooth.


So, how do you accommodate for these higher resolution displays and create an HTML email that looks brilliant on a Retina Display?

 
One double-sized graphic
for all recipients
In emails, you don’t have the option of serving up the higher density image only when needed so you’ll need to develop your email in a way that the double-sized retina-friendly graphic gets served to everyone.
 
 
 
Create your images at a perfect
2x aspect ratio to the original size
Doing so, the integrity of the image will look as perfect as it should be after scaling, especially if the graphic contains any text.
 
 
 
Watch your file size
Unlike web where you can control the file size using CSS, in emails you can’t do that! With doubling of the width and height of the images, you will also end up increasing file size. Be careful!
 
 
 
In emails, simpler graphics like logos, buttons and icons are easy to be converted to higher resolutions without making the file size humongous.
 
 
 
Watch out media queries for
responsive email html
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.
 
 
Uplers’ Verdict