If your website isn’t accounting for retina users, it’s about time. Retina isn’t a mobile-only concern anymore.
Just to be clear, I use the word “Retina” to refer to all HiDPI displays. The word retina was coined by Apple, but I prefer to use it over HiDPI because I’ve grown tired of the endless acronyms used to talk about digital displays. Want to watch ESPN on my 2160p 4K LED LCD UHD TV?
Retina displays are not new. Apple’s iPhone 4 was likely the first of these displays that you saw in person, it was for me. It was a game changer. I suddenly enjoyed reading passages of text on a digital screen. The higher PPI (pixels per inch) pushed us closer to printed type. At this point, retina displays are standard on smartphones. The majority of tablets have these displays too, even bargain tablets like the Kindle Fire. But the change that is making a lot of companies finally take retina seriously is the emergence of retina screens on laptop and desktop computers.
Two years ago, when I chose a new MacBook Pro with Retina over a MacBook Air, retina displays on a computer were new… almost a novelty. Now, Apple is rumored to be putting the retina display on the Air and Lenovo, Samsung, Toshiba and Dell all have flagship laptops with retina displays. Then, late last year, Apple released a new Retina iMac. A 27” screen with 217 PPI, totaling a pixel count of 5120-by-2880. When I first saw one of these mammoth displays in person, I felt like Wayne Campbell staring at the white Fender Stratocaster through the music showroom window, “She will be mine. Oh yes, she will be mine.” And when she is mine, your website will look awful compared to the competition if you don’t take retina seriously.
For years now, many B2B companies have excused their sites’ retina-ineptitude because they don’t take their mobile traffic seriously. But now, retina displays have found their home on our laptop and desktop machines. Design-snob iPhone users aren’t the only ones taking note of what you look like on a good display.
screenshot showing an image that isn’t retina-ready (left) and one that is retina-ready (right).
So what can we do about it?
There’s a lot to consider, but I’m not going to go insider-baseball here. Lets rebuild your site some other day, then we can talk about rem units, pixel-ratio media queries and .SVG file types. For now, here are some simple steps and considerations you can take as content creators and editors.
- Do not use images for text. I understand the temptation to create a text-graphic in Photoshop. Don’t. Web typography has expanded exponentially over the last few years, look into the @fontface technique if using a special font is the issue.
- Do not use images when simple CSS will do. Drop shadows, rounded corners and gradients can all be handled by the user’s browser now.
- Use double-sized images. One way to accommodate retina displays is to create your images twice as big as they’re displayed on web. A 200px by 200px image displayed in-browser at 200px will be blurry on a retina screen, but if you start with a 400px by 400px image and display it in-browser at 200px you will get the crisp edges and details retina displays are built for. This has some drawbacks, as it forces browsers to resize the images and it means increased image sizes; more on that below.
- Incremental improvement. Finding the original hi-res versions of images taken years ago to repair every image on your site is a daunting task. But don’t let it prevent you from moving forward with retina capability. If you never get around to fixing every image you’ve ever posted, so what? Retina users don’t expect your 2010 blog posts to be pixel-perfect to 2015 standards. Incorporate changes as you add and edit content.
So what could be the issue with retina images?
In short: they will get big. Doubling every image will hurt your page load times. Here are some tips to trim your image sizes, most are things that you should already be familiar with, but because we’re doubling image sizes, their impact is magnified:
- Know when to use .PNG and when to use .JPG. Simply put, use PNGs for graphics (hundreds of colors) and use JPGs for photographs (thousands of colors) or graphics with a lot of gradients.
- Compress your images. The save for web feature in Photoshop is a must, and there are plenty of web-app alternatives. If you’re using JPG, drag that quality slider down as far as you can before you see major artifacts (you should rarely be over 85). If you’re using PNGs, see what your graphic looks like when you select PNG-8. How many colors do you really need? Do you need transparency? Use services like TinyPNG to compress PNGs with transparency.
- Retina.js. Retina.js is a script added to your site templates that will read your users’ screen resolution and only serve the double-sized images to the retina users. This means creating two images for every image that you use, but it means that non-retina users won’t need to download the double-sized images.
If your site design hasn’t been evaluated since 2010 or is built on tables and uses flash, you probably have bigger problems to address than retina-compatibility. But if you think your site deserves mass 2015 usership, blurry images will be an immediate turnoff. The list above is a good start to account for those users fortunate enough have a retina display. Hopefully, your site is also responding to their screen size too (your site is responsive right?).
At OffWhite, we take retina seriously in every new web project we work on. We also have gone back and retroactively addressed low-res images for sites built before standard retina compliance. Retina images are an easy way to give your site a bit of a refresh without investing in an entire rebuild. Some simple updates to your CSS and addition of webfonts can also serve as a low-cost, non-invasive “tune-up” to your site’s design. Want to talk about some more advanced retina-readiness techniques, or need help getting your site up to speed? Contact us today.
We’ll talk about triple-size images next time (thanks iPhone 6 Plus).
