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.