How to optimize emails for retina devices

As technology progresses, the quality of screen resolution has greatly increased. The revolution started in 2011 when Apple introduced retina displays, which show four times more pixels than standard screens. While this has resulted in sharper graphics and more stunning images, it’s also posed challenges to brands who are designing for these devices. The standard practice of saving images won’t cut it for retina displays—they’ll appear pixelated and fuzzy. Luckily, there’s an easy way to make sure your emails look great no matter what device they’re opened on: optimizing images for retina display.

What is retina display?

Retina display (a term coined by Apple) refers to screens with an ultra-high number of pixels. These high PPI (pixels-per-inch) displays generally show 300 pixels per inch, compared to ~100 pixels per inch for standard devices. Because there are so many more pixels packed into the same amount of space, your eye isn’t able to discern individual pixels, resulting in text that looks incredibly crisp, and images that appear more realistic. While this high PPI trend is the standard with new Apple products, the movement is being followed across the tech industry. You can now find dozens of phones (Samsung Galaxy S6, LG G3, and Google Nexus 6P, etc.), tablets (Samsung Galaxy Tab Pro 8.4, Google Pixel C.), and laptops (Microsoft Surface Book, Chromebook Pixel, Dell XPS) that have high-resolution displays. With the number of high PPI devices increasing every year, it’s more important now than ever to optimize your emails for retina display.

How do I optimize for retina devices?

In retina display, each user interface widget has double the number of pixels in width and height compared to non-retina displays. So making images retina-ready couldn’t be easier. Your photo just needs to be double the dimensions of the space it’s being placed in.

Let’s assume you have a 300px by 200px space allotted for a photo. If you save the photo exactly in those dimensions, it will appear perfectly fine on non-retina displays, yet lack definition on retina devices. However, if you save that same image as 600px by 400px (twice the dimensions of the space it will be placed into), the image will scale down to fit the dimensions, while packing in four times as many pixels. It will appear incredibly sharp across retina devices.

Some versions of Outlook display the retina-optimized image at full size (regardless of width and height attributes). A good approach is to declare width but not height. Then—to ensure rendering across environments— include 100% width and max-width styles. The 100% width style makes the image responsive across viewport sizes, while max-width limits the image to the container size on larger screens. <img src=”RetinaImageURL.jpg” width=”600″ style=”width:100%; max-width:600px;” />

• Pro Tip: you can also target high-density displays using media queries, then use an image swap to serve the retina image for those devices.

Why should I optimize for retina devices?

The difference between the two types of images is clear (sorry, couldn’t resist). For marketers, optimizing images for retina devices has several benefits:

• Reduction in eye strain: Because retina images are sharper than traditional images, they appear less blurry on retina displays which improve the user experience.
• Attention grabbers: Retina images have a wider spectrum of color and brighter colors, making them more aesthetically pleasing to the audience.
• Better branding: Images are a critical component of any email, and if they’re super crisp it will put your brand in the best light.
• Great mobile experience: In 2016, more than half of email opens occurred on mobile devices¹. It’s expected that in 2017 that number will jump to 80%. Because most phones have high PPI, it’s a huge opportunity to give those mobile readers a stellar viewing experience.

Helpful tips and tricks to optimize images for retina display

1. Reduce the size of retina-ready images: Due to retina images being twice the dimensions of traditional images, the file sizes are larger and can slow down load times for image-heavy emails. Luckily, there are many useful sites that reduce the size of these retina images while still retaining the quality, ultimately reducing load speeds. Examples include: https://tinypng.com/, https://compressor.io/compress, and http://jpeg-optimizer.com/
2. Make sure your logo is retina ready: As the most important element of your email, your logo should stand out. Ensuring it’s retina-ready won’t significantly affect the weight of your emails, and it’ll make your brand shine.
3. Avoid putting text in images: Whenever possible, you should use HTML text instead of saving text directly into images. Besides the fact that most email clients block images by default, the text will appear blurry on retina devices if the images don’t have high-enough resolution.

The shift to mobile devices and the increased use of high DPI displays makes the need for retina images in email campaigns easy to see. In the constant battle for eyeballs, their use greatly enhances your message and user experience.

Source:

¹ https://litmus.com/blog/2016-email-client-market-share-infographic