Recently at PostUp, we’ve received an increase in the number of questions about high-density, “Retina,” displays and email rendering on these displays. What are these high-density displays and how do they affect your email marketing efforts?
Explaining High-Density or Retna Displays
First, high-density displays or Retina displays, as Apple markets them, are generally acknowledged to have a physical pixel density of greater than 200 pixels per inch (PPI). This means that they have twice the pixel density of a high-definition computer monitor. Smartphones and tablet devices are the main driver behind this trend because of their low cost and high pixel density displays usually greater than 250 PPI. This means that the average person cannot see individual pixels on a high-density display, 10-15 inches away on a Smartphone or tablet or 20+ inches on a laptop or computer monitor.
All of that sounds great. In fact, if we’re doubling the pixel density, it sounds twice as good, right? The downside is that if we send an email using images that do not scale to double the image resolution of their content, the result can be a blurry eyesore in your email creative.
We now know our main issue is that our marketing emails can be blurry and unpleasant for our contacts to view. But, how much does this really affect the people that we email? Should we really worry about a group of people that view emails on those tiny screens? The short answer is an emphatic, “YES!” For some of our clients, we’ve found that greater than 2/3rds of their contacts view emails on tablet and mobile devices. This means that the majority of your customers could be receiving a message that is not ideal for viewing on a smartphone or tablet.
Let’s Talk About A Solution
Now that we’re aware of the issues and how much it can affect our audience, let’s talk about the solution without getting too technical into how we actually code the email. The main goal is to start with an image that has four times the resolution of what we’re coding to display in the email. For example, if we want to display a 100 x 100 pixel image for a logo in our email. We need the original image that we’re referencing in the code to be 200 x 200 pixels and we’ll use styling to set the image dimensions to 100 x 100 pixels. Our guideline is to start with an image that is 1.5 to 2 times the width and height of what we’re going to display in the email. Use 1.5x if you’re concerned about the image file size being too large.
What else do we need to know about these images and possible challenges? The main challenge to keep in mind is that by increasing the image size, we also increase the file size. This potentially causes the email to take longer to load, which could use up more of the recipient’s data plan (not to mention increase the chance of them not sticking around to let the images finish downloading).
For this reason, we recommend using higher resolution images only where it will be beneficial. For images such as small icons, company logos, and any images with text, it makes sense to use high resolution images. For large pictures and graphics that don’t require crystal clarity to get the message across, we recommend optimizing the image but not making it the highest resolution possible.
Check out this Retina Email Infographic from the Email Monks for more information on Overhauling User Experience with High Quality Display!
We hope that this information gives you some insight into optimizing images for high-density displays. If you’re ready to send emails that look great on mobile, optimizing your template for mobile responsiveness is a great place to start. Download our free responsive email template today!
Corey Duncan
Corey serves as PostUp’s Interactive Creative Director, where he manages and designs all creative development for the Professional Services department. He is responsible for designing, implementing and tracking everything from email, web banners, websites, social media and SMS while adhering to digital marketing best practices.