WebKit, the Apple-supported open source project behind Safari, is the first browser layout engine to support a new Web standard that makes it easier for developers to take advantage of high-resolution displays, like the Retina panels found in the iPhone, iPad and MacBook Pro.
The new standard, an addition to the HTML5 specification called "srcset," provides developers with an easy way to serve users different image versions based on the resolution of their device. For example, a website may serve larger, higher quality images to visitors browsing on a Retina MacBook Pro while sending smaller, lower quality images to visitors on a MacBook Air.
Websites and Web-based applications have been slow to provide support for Retina displays since the screens first appeared on the iPhone 4 in 2010. Current methods for implementation are suboptimal - they can be cumbersome for developers, degrade the user experience, or lack cross-browser support.
Using srcset, developers can specify multiple variations of an image with a single declaration, and it is designed for compatibility with older systems. Browsers that do not support srcset will simply ignore it without any adverse affect on the user.
The syntax is similar to Apple's iOS conventions for Retina-ready graphics: developers simply provide an alternate filename and a resolution multiplier, e.g. 1x, 2x, or 4x. The "resolution multiplier" is a measure of how many physical pixels make up one display pixel; for example, the iPhone 5 has a physical resolution of 1,136-by-640 pixels, but a display resolution of 568-by-320 pixels. This means there are 4 physical pixels for each display pixel, or a 4x multiplier.
The World Wide Web Consortium, or W3C, the international organization that defines and administers the open standards that underpin the Web, added srcset to the HTML5 specification in May 2012.
A similar feature, called "-webkit-image-set," was added to WebKit and shipped with Safari 6 and Google's Chrome 21 in October of the same year. The asset never achieved widespread adoption, however, as it was not implemented in Microsoft's Internet Explorer and Mozilla's Firefox, which together commanded more than 50% of the international browser market at the time.
WebKit is the first browser engine to announce support for srcset, and the feature is likely to ship in Safari 7 with OS X Mavericks.