How websites are adapting for the 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.

What they’ve chose to do is load the regular images for the site and then if the device requesting the page is a new iPad with the retina display, they use javascript to replace the image with a high-res version of it.

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.

Mobify can detect extra-high resolution displays, like the iPad 3 Retina and iPhone 4 and iPhone 4s with Retina, and serve them higher quality images.

And unlike many other techniques, like the approach Apple has taken to delivering Retina-quality images by just double-serving images, it lets you just serve the right image to the right device. So page performance is always as fast and snappy as possible.

On Quora, Read it Later developer Steve Streza promotes the use of CSS background images, the background-size attribute, sprite sheets, and media queries.

The big advantage here is that you can target specific screen scale factors with CSS, using a trick known as CSS media queries. This lets you specify entire CSS files, or parts of CSS files, to load for devices at 1x scale, at 2x scale, and other scales (as well as ranges of scales). This means that 1x scale devices are only loading 1x assets, and 2x scale devices are only loading 2x scale assets.

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.

Now, before you go reprocessing all your photos—and keep in mind that you can’t export progressive JPEG out of Lightroom or Aperture, so this isn’t an easy undertaking—please understand that this is just sorting out how to push a high DPI image to an iPad Retina display. Doing this well for more than a one-off example is going to take a lot more work, not the least of which is sorting out how to decide when to push a progressive JPEG at what size for the right client and bandwidth combinations.

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.

This post may contain affiliate links. See our disclosure policy for more details.

Latest And Best Prime Day Deals

The Ring Alarm security system is reaching new low prices for Prime Day
Ring Alarm home security systems

Various configurations of the Ring Alarm are discounted to their best prices yet exclusively for Prime members at Amazon through Tuesday night to help keep your home secure.

The Sonos Beam Prime Day deal includes a $40 discount and 2 $50 Amazon gift cards
The Sonos Beam Prime Day deal includes a $40 discount and $100 in Amazon gift cards
$359.00 $499.00 Save $140

That's just so much savings in one deal. You'll have to wait for the physical gift cards, but that's basically $100 to spend however you want.

Prime Day dropped this PlayStation 4 console bundle to just $250
PlayStation 4 Slim 1TB console with Marvel's Spider-Man and Horizon Zero Dawn
$249.99 $359.98 Save $110

This deal on the PlayStation 4 Slim console saves you $50 off its regular price while also including Marvel's Spider-Man and Horizon Zero Dawn Complete Edition for free. You'll just need an Amazon Prime membership to snag it.

The newest device in the Echo family, the Show 5, is now down to just $50
Echo Show 5
$49.99 $89.99 Save $40

It's only been on the market since May, but it hasn't escaped the Prime Day price cuts.

Amp up your home security with these huge Prime Day discount on nearly all Ring products
Save on Ring products today only

Whether you need a video doorbell, whole home alarm system, or some lights to brighten a dark area, Amazon has it all marked down today!

These huge price drops on the entire Galaxy S10 lineup might be one of the best Prime Day phone deals we'll see
Samsung Galaxy S10 128GB unlocked Prism Black Android smartphone
$599.99 $900.00 Save $300

We love the Galaxy S10, and we love deals. This combines two of our true loves in one!

Scour Amazon Warehouse's deals to save an extra 20% on tech and more through Prime Day
Extra 20% off Amazon Warehouse

Amazon Warehouse sells a myriad of items in varying conditions, from refurbished to open-box, used, warehouse-damaged, and more. It's a great place to snag a deal, and now Prime members can save an extra 20% off select items at checkout.

There's never been a better deal on the Ring Video Doorbell 2 than this pre-Prime Day offer
Ring Video Doorbell 2 (Certified Refurbished)
$89.99 $169.99 Save $80

Amazon is taking $80 off the certified refurbished Ring Video Doorbell 2, which lets you see and speak with visitors at your front door no matter where you are in the world.

More Prime Day Deals