How websites are adapting for the new iPad Retina display and other HiDPI screens
Following the launch of the new iPad there's been a lot of discussion about how, and where or even whether, websites should update to support the needs of HiDPI screens like Apple's Retina display. If users are going to be looking at websites on a Retina display iPad, and one day Retina display Macs, HiDPI Android and Windows displays, and other high density screens, having them look as good as possible is a definite concern.
Bjango's Marc Edwards previously wrote about why it might take a while for developers to upgrade their apps for Retina display graphics, and has written several posts and how to include Retina graphics in design workflows.
The web, unfortunately, is nowhere near as controlled environment as the App Store.
Apple, of course, updated their iPad page for Retina display right away. According to Jason Grigsby of Cloud Four Blog, they're doing it with image_replacer.js.
The downside of this approach is that it's expensive, especially if you're serving all images this way, and the images are big. Bandwidth costs money and making every image 4 times larger (or more) means paying higher server bills. Serving a regular image and then switching to Retina is even more expensive, because you're serving both images to Retina devices. (Granted there aren't many yet, but their share will only grow.)
Phil Webb of Mobify.com offers several good pieces of advice, including prioritizing which images really need to be Retina (like product heroes), that text should be served as text and not images (we're in the age of TypeKit, after all!), creating double-sized images that are constrained by CSS width and height attributes, and the use of mobify.js.
On Quora, Read it Later developer Steve Streza promotes the use of CSS background images, the background-size attribute, sprite sheets, and media queries.
Master your iPhone in minutes
iMore offers spot-on advice and guidance from our team of experts, with decades of Apple device experience to lean on. Learn more with iMore!
When it comes to photography on the web, Duncan Davidson, working with Streza, figured out that WebKit (the rendering engine behind Apple's Safari, Google's Chrome, webOS, BlackBerry's Torch, and other browsers) put limitations on image sizes that could conflict with serving Retina-calibur graphics. The workaround is to use progressive JPGs. But currently comes at a price.
So while it's early days and there are no clear standards for implementing cross-platform, cross-browser HiDPI graphics, there's a lot of experimentation being done. We consciously made the choice to use as much CSS as possible with our last iMore redesign, and I think that paid off. We've also replaced our previous, PNG background logo image with a 2x icon graphic and TypeKit text. We need to tweak it some more, but it already looks better on the new iPad. Likewise, we've used higher density Team iMore pictures in the sidebar for a while now, and are going to be rolling out more of them into the rest of the fairly static page elements.
If you're working on adding Retina/HiDPI support to your website, jump into our Iterate mobile design forum and let us know how you're doing it and how it's working.
Rene Ritchie is one of the most respected Apple analysts in the business, reaching a combined audience of over 40 million readers a month. His YouTube channel, Vector, has over 90 thousand subscribers and 14 million views and his podcasts, including Debug, have been downloaded over 20 million times. He also regularly co-hosts MacBreak Weekly for the TWiT network and co-hosted CES Live! and Talk Mobile. Based in Montreal, Rene is a former director of product marketing, web developer, and graphic designer. He's authored several books and appeared on numerous television and radio segments to discuss Apple and the technology industry. When not working, he likes to cook, grapple, and spend time with his friends and family.