Although Apple was the first to introduce the Retina display to a mainstream audience, it wasn\u2019t long before other device manufacturers hopped on board. While most companies started with smaller devices like phones, retina screens can now be found on tablets, laptops, and even desktop computers like Apple\u2019s massive 27-inch Retina 5k iMac.<\/p>\n
Why does email need retina images?<\/h2>\n
Subject lines<\/a>, copy, and cadence all play an important part in looking good to subscribers, but visuals draw people to an email campaign first. After opening an email, our eyes move to the design and imagery before we start reading any copy or tapping calls-to-action<\/a>.<\/p>\n If you\u2019re not accounting for high-DPI displays, you run the risk of looking careless to subscribers. Because of the way high-DPI displays work, non-optimized images end up looking blurry and pixelated on retina screens. Here\u2019s an example:<\/p>\n As users grow accustomed to retina screens, they expect text and images to appear crisp and clear. If you\u2019re not optimizing your images for high-DPI screens, those users see a degraded email design, which can lead to equally degraded trust in your brand.<\/p>\n How exactly can you optimize images for retina screens? Forturnately, it’s quite simple.<\/p>\n Roughly speaking, high-DPI displays have twice as many pixels per inch than their traditional counterparts. For images to look good on those screens, they need to be twice as large. When they\u2019re scaled down in the email, there are more pixels for retina screens to display.<\/p>\n Here’s an example.<\/p>\n In our emails, we include the Litmus logo at the top. Using HTML, it\u2019s sized so that it displays at 130 by 48 pixels. If we created and saved the logo image at that size, subscribers would see a blurry mess on retina screens:<\/p>\n To keep the logo crisp, we simply create an image at a larger size. In this case, the image file is 276 pixels by 102 pixels, but anything that\u2019s at least double the intended display size works. Then, in our HTML, we use the original, intended display size in the width and height attributes to scale the larger image down:<\/p>\n On high DPI displays, we get beautiful, crisp, retina images.<\/p>\n Some versions of Microsoft Outlook still display the retina images at their full size, despite the explicit sizes set by the width and height attributes. To get around this, you can include a max-width rule in the style attribute of the image.<\/p>\n In the example below, we use the width attribute (no height attribute) and the max-width to get retina images working across all email clients.<\/p>\n You’ll notice the inclusion of a width style set to 100%. This is a handy trick for making images responsive across different screen sizes. On larger screens, the max-width rule will kick in to constrain the image size, while on smaller screens they will fill 100% of the screen\u2014or container\u2014width.<\/p>\n You can use retina images as background images<\/a>. The implementation is slightly more complex, but the principles are the same.<\/p>\n But note that this approach won’t work everywhere. For retina background images, you should use the background CSS property instead of the background HTML attribute on something like a table cell.<\/p>\n The background is set using both the shorthand property and using individual CSS background properties to account for some quirks in Gmail and Android clients. This Community discussion<\/a> has a great overview of the techniques available to designers looking for gorgeous background images on high-DPI displays.<\/p>\n Doubling the size of your images helps ensure that they display beautifully on retina screens, but this technique is not without its drawbacks.<\/p>\n As we increase the dimensions of an image, the file size increases, too. That can cause an email to load slowly<\/a>.<\/p>\n And, not every campaign needs retina images. If you’re using a lot of images in your campaign, or images that are really large, using standard, non-retina images may help provide a better user experience since the images will be quick to download and display in your campaign.<\/p>\n If you do need to use retina images, there are two techniques to help avoid bloated file sizes.<\/strong><\/p>\n The first\u2014and more complicated\u2014is to use something called compressive images. These are images that are saved at huge dimensions, but very low quality settings.<\/p>\n Most image editing programs allow you to set the quality at which images are saved. In Photoshop, for example, you can adjust the quality of a JPEG using a simple slider:<\/p>\n To create a compressive image, design the image at something around four times the intended size and save it at an extremely low quality setting. While the image looks terrible when viewed at full-size, after it\u2019s scaled down to its intended size in an email, the artifacts shrink down and go unnoticed. And the low quality settings ensure that your file size is kept to a minimum.<\/p>\n The second way to keep file sizes in check is to use a dedicated program to further compress your images after saving them. Applications\u2014many of them free\u2014exist for every operating system that allow you to process and compress images after they are created.<\/p>\n Some of our favorites include ImageOptim<\/a>, JPEGmini<\/a>, TinyPNG<\/a>, Compressor.io<\/a>, and Kraken<\/a>. In most cases, you simply drag and drop\u2014or upload\u2014your images to the program and they compress them. Then, you can upload those optimized images to your ESP or server to include in your retina-ready campaigns.<\/p>\n \u00a0<\/p>\n As high DPI displays become more common the need for retina images increases. Learn how to use retina images in email campaigns.<\/p>\n","protected":false},"author":3,"featured_media":3422,"comment_status":"closed","ping_status":"open","sticky":false,"template":"","format":"standard","meta":{"_acf_changed":false,"footnotes":""},"tags":[478,468],"blog_category":[53],"class_list":["post-3421","post","type-post","status-publish","format-standard","has-post-thumbnail","hentry","tag-design","tag-images","blog_category-tips-resources"],"yoast_head":"\n![\"Non-Retina](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/retina-comparison.jpg\")
\nHow to use retina images in email<\/h2>\n
![\"Retina](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/retina-images-logo-blurry.jpg\"){kind=logo}
<\/figure>\n<img alt=\"Litmus\" src=\"logo@2x.png\" width=\"130\" height=\"48\" style=\"font-family: sans-serif; color: #ffffff; font-size: 20px; display: block; border: 0px;\" border=\"0\"><\/code><\/pre>\n![\"Using](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/retina-images-logo-crisp.jpg\"){kind=logo}
<\/figure>\nUsing Retina Images in Outlook<\/h3>\n
<img alt=\"Litmus\" src=\"hero@2x.png\" width=\"600\" style=\"width: 100%; max-width: 600px; font-family: sans-serif; color: #ffffff; font-size: 20px; display: block; border: 0px;\" border=\"0\"><\/code><\/pre>\nCan background images be retina images?<\/h3>\n
<td style=\"background:url(img-x2.jpg) center\/cover;background-image:url(img-x2.jpg);background-size:100%;background-size:cover;\"><\/code><\/pre>\nConsiderations before using retina images<\/h2>\n
![\"retina](\"https:\/\/www.litmus.com\/wp-content\/uploads\/2020\/04\/retina-images-quality-settings.png\")
<\/figure>\n\u00a0<\/h2>\n
\n\n
\n \u00a0<\/td>\n \u00a0<\/td>\n<\/tr>\n<\/tbody>\n<\/table>\n<\/div>\n\n\n\n\t