Chrome, Safari add experimental Retina support

The latest versions of Safari and Chrome include support for a proposed specification that makes it easier for sites to support high-resolution displays.

The “image-set()” function was proposed in February by Safari engineer Edward O’Connor, and although it remains unofficial it is supported by the latest releases of both browsers.

The issue of how best to support the growing range of pixel densities on the market was brought to a head with the introduction of the Retina display on Apple’s MacBook Pro range in June.

Apple still treats the web as a second-class citizen on iOS and Mac OS X

Mozilla developer Robert Accettura complained after the launch of the Retina devices that Apple “still treats the web as a second-class citizen on iOS and Mac OS X”.

Unless you build a native app, it’s difficult to make proper use of Apple’s new displays, he argued. “Why wasn’t a solution for web authors included when the iPad 3 shipped? It seems silly that there’s no API to properly interface with one of the most touted features of the new device.”

Support for Retina displays has been slow to come from some of the largest developers. Adobe showed off a Retina-optimised unreleased build of Photoshop at Apple’s launch, but release isn’t expected until “later this year”. Microsoft has said Outlook 2011 for Mac supports Retina displays, but no plans have been announced for Word, Excel or PowerPoint, and any Office 2013 release for Mac will likely be several months after the PC launch.

Retina on the web

On the web, Apple’s Safari Web Content Guide recommends using CSS3 media queries to target high-density devices. The pixel density ratio is detected, and either the low- or high-resolution assets are loaded for the best results.

Now both Safari 6 and Chrome 21 have shipped with experimental support for a new image-set specification proposed for CSS4, rumoured to be coming in iOS6. Here, instead of telling the browser what asset to load on a particular device, the developer provides the options and lets the browser decide which is most appropriate in the circumstances:

selector {
background: image-set(url(foo-lowres.png) 1x,
url(foo-highres.png) 2x) center;
}

In the above example, “the author is saying that foo-highres.png is
twice the resolution of foo-lowres.png,” explained Edward O’Connor. Browsers which support image-set() “could then use the 2x image on a high-resolution display, and the 1x image on a low-resolution display”. The assets don’t have to be fetched to determine which is best, so less bandwidth is used.

Low-res support

Those options could extend beyond simple resolution checks, said Jason Grigsby of mobile web developers Cloud Four.

“In the future, I hope that someone using a high-density device on a slow connection might be able to tell the browser that they only want low-resolution images,” he said. “It would be even better if the browser could be smart about what image to use based on the current network speed.”

The image-set specification is not yet official, and Grigsby warned against using it on live sites, as it may change in the future. “So if you have a way to change it easily in the future, then it may make sense to throw caution to the wind and start using it,” he explained. “Otherwise, consider using it in less critical places where you can experiment with new technology.”