How to Ensure Your Email & Landing Page Graphics Look Great on Retina Displays

"Normal" images in HTML are noticeably blurred on today's hi-resolution displays. Here's what you can do about it.

 
Your prospect has made it to your landing page! Great job – that’s half the battle. But there’s a problem…

Your logo and images look a bit fuzzy to her on the Macbook Pro she’s using (it has a Retina Display that’s making your logo look noticeably blurred).

Without even thinking, she perceives your company as low quality and moves on. And buys from your competitor.

Are you making the wrong impression by failing to understand Retina Displays?

Everyday prospective customers come to your website and make an instant judgement about your entire company. First impressions are made in mere seconds.

If you are creating images for your website, landing pages, and HTML emails like it’s 2009 – with no understanding of modern, high-resolution displays and their specific requirements – you may be turning off the very people you’re working so hard to attract.

 

Fuzzy or Crisp: A Close Look at the Problem

Here we’ve zoomed in on two different versions of the Net-Results logo. You’ll see right away that there’s an obvious difference between them…

Let’s Zoom In to See the Evidence

Not Retina Friendly (3x Zoom)

fuzzy-logo-non-retina

Fuzzy & Blurred
Retina Friendly (3x Zoom)

clear-logo-retina

Not So Fuzzy

We captured these 2 screenshots from a brand new Macbook Pro. The logo on the left is “ignorant” of retina displays. As you can see its edges are far from crisp.

The logo on the right is far less fuzzy around the edges. In fact, if we hadn’t zoomed in on this image it would have hardly any “fuzz” at all. And this fuzz is the heart of the problem.

Since their introduction by Apple in 2011, retina displays have exploded in popularity and are everywhere these days – in the hands and on the desks of your prospects and customers. Read on to learn how to ensure crisp images in your web-based marketing assets and make the right impression.

 

What is a Retina Display?

Retina Display is a marketing term created by Apple referring to ultra-high resolution displays with pixel densities much higher than non-retina devices.

According to Apple, “the Retina display packs four times the pixels of the standard … display, giving content incredible detail and dramatically improving the viewing experience.”

Craig Buckler from SitePoint simply illustrates Retina Display with the following example:

 

Retina has four times more pixels than standard screens. If you have a 400 x 300 image (120,000 pixels), you’d need to use an 800 x 600 alternative (480,000 pixels) to render it well on a high-density display.

 

Retina displays are now the standard in many Apple devices and can be found in all of their latest products including iPhones, iPads, MacBooks, iMacs and iPods. Retina style displays are also predicted to arrive in the Windows world soon including laptops, Windows 8 tablets and ultrabooks.

With millions of people using retina displays every day, you need to understand what’s changed, and how to optimize your images for display on these high resolutions screens.

While images that aren’t retina friendly will appear noticeably fuzzy on retina displays, retina ready images are incredibly crisp and pleasing to the eye. Here’s exactly what you need to do to ensure your emails, landing pages and website always look their best.

 

How to Ensure Your Images are Retina Display Ready

Making retina friendly images is very simple and requires no special software or new skills. Just a little bit of knowledge and a few minutes of effort are all it takes.

1. Create a New Image Twice the Size of Your Original

If your image would normally be 200 pixels wide by 100 pixels tall (200px by 100px), you need to create a new version of that image that is exactly twice the size of its original. In this case, you’d need to create an image 400 pixels wide by 200 pixels tall (400px by 200px).

Important: DO NOT just resize your existing image to double its dimensions. For most images this will cause “pixelation”, an unsavory loss of resolution that will make your images look awful.

2. Use HTML to Force Your New Image to Display at ½ its New Width

In your HTML, your image tag needs to explicitly declare the width to be exactly half of the full width of the image, like this…

<img src=”your_image.jpg” width=”200” />

Because your new image is 400 pixels wide, your HTML must tell the device to display it in only half of that width, in this case 200 pixels.

I’ve heard this referred to as “pixel doubling”. While you do end up doubling the dimensions of your images, the total number pixels in your images is multiplied by four (do the math :)

The key to understanding retina displays is that there are four “tiny pixels” for each one pixel on a “normal” device. This allows edges of images and fonts to appear incredibly crisp and sharp (and images that aren’t retina friendly to appear fuzzy around the edges…).

 

No Need to Go Overboard

Not every image needs to be doubled in size for retina displays. It’s a judgement you’ll need to make once you are clear on the tradeoffs involved.

Doubling the resolution of your images is great to make sure things turn out crisp and clear on all devices but doing this can also negatively impact your website. By doubling size of your image, you will also be doubling the size of your image in kilobytes, which will impact the time it takes for your website to load. Make thoughtful decisions about which images on your website NEED to be crisp and which images can be left alone. Your logo, closely cropped pictures of people, and images of your products are good candidates for high resolution display.

Craig Buckler from SitePoint offered some great advice for deciding when to resize your image.

“Be pragmatic: if the standard image is 200Kb and the high-resolution version is 250Kb, there is negligible benefit using image replacement techniques. Use the better version throughout.”

The SitePoint article also offers several additional methods that can be used to make your images retina friendly (though most of them don’t apply to the HTML used in emails).

 
Retina displays are becoming more and more popular everyday, don’t let your company lose prospects because your fuzzy images give the wrong impression of your company. Make changes to the way you placing images on your website, landing pages, and lead nurturing &  drip campaign emails, to guarantee your images look crisp and clear.

Chelsee Esmailli

Chelsee Esmailli is a Colorado native who attended the University of Colorado at Boulder where she was a communications major. She is a die hard Star Wars fan, and truly a crazy cat lady at heart. As an Account Executive for Net-Results, Chelsee works to help our customers better leverage our technology and use its full functionality to help their business grow more qualified leads, and in turn more revenue. Chelsee wishes more than anything that she was the lead singer in an all girl rock band…. Maybe some day.

  • Good tip, Chelsee!

  • Christine Magnuson

    But if your landing page is responsively designed, forcing a width on your image will prevent your responsive design from working properly on different browsers and devices, right? On my landing pages, the image widths adjust to fit the screen because I don’t put dimensions on them.

    • You’re correct (generally) for images in a responsive layout. The best practice is to set the image width to be 100% of the width of its container, not to declare its specific width in pixels. This is normally done via or using a CSS style like img {width: 100%;}

      For images where this does not apply, for example your logo in an email or in a navigation bar, you should definitely employ the “pixel doubling” technique outlined in this post.

      That said, responsive images set to a width of 100% will normally still suffer from a noticeable lack of crispness on retina displays – unless your image is a good deal larger in its actual dimensions than it appears on screen.

      Retina displays effectively use “smaller” pixels than normal displays. This allows them to pack more pixels per inch, making the edges of fonts super crisp and a pleasure to read. Images can be super crisp too, but only if they provide the display with enough pixels to work with…

      If your image is “normal” in size, the retina display has to “spread” each of your image’s pixels across several of its smaller pixels. This results in noticeable fuzziness. Using my shiny new macbook pro, this can be readily apparent when moving from a site with crisp images to one without.

      If you’ve got a retina device it pays to experiment with this. We’re working on a new, fully responsive website now and are often using images that are double the size they’d be on a non-retina display – even for images with widths set at 100% in a responsive grid.

      Here’s a quick trick you can use to see what some of the top sites on the web are doing:

      Using Chrome of Firefox, go to a popular consumer site that has a great, responsive design. Right click on a nice, clear image and click “Inspect Element”. Hover your mouse over the tag and you’ll often see the image’s actual dimensions vs. the dimensions it’s being displayed at in your browser. It’s very common to see, for example, 600px images used in a 300px area in a responsive, grid-based layout.