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.
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.
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;” />
The difference between the two types of images is clear (sorry, couldn’t resist). For marketers, optimizing images for retina devices has several benefits:
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.
Sterling Crain is an Art Director at Data Axle, where he elevates the Marriott Rewards program through impactful email design. In his spare time, he loves traveling, seeing live music and comedy shows, and playing guitar.