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
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).
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.
