At long last, browser makers adapt to Retina-quality images

Fiddling with one part of the HTML standard could ensure that bandwidth isn't wasted delivering big images to small screens and that pictures look good on Retina displays.

Five browser logos

The days when a Web developer could count on a big screen with 72 to 96 pixels per inch are long over. Retina displays on laptops and tiny mobile phone screens for years have been complicated the job of delivering images best suited for different browsers.

But after years of sometimes contentious wrangling, it seems browser makers have settled on a solution: a tweak to the Web page programming that goes by the ungainly name of "srcset."

If it works out as planned, people using the Web should see high-resolution photos on Retina displays but not have to suffer delays when downloading needlessly bulky images to a phone's browser. And they'd be more likely to get the right images in the first place, because Web developers wouldn't have to spend so much time creating variations of Web pages for different devices.

The first concrete step began in August, when WebKit, the open-source project behind Apple's Safari browser, adopted the srcset attribute. Chrome, whose Blink browser engine is a WebKit offshoot, followed by adding support in September. And Thursday, Mozilla's Marcos Caceres said it plans to add srcset support "hopefully before the end of the year."

"It seems pretty clear that srcset will happen," said Guy Podjarny, a Web performance researcher for Akamai who attended a September 10 meeting of the Responsive Images Community Group (RICG) that's tackling the issue.

Srcset is vying with with another approach, the picture element. Where srcset modified the image element, an existing part of the HTML standard that governs how images are shown on Web pages, the picture element would have introduced an entirely new element to Hypertext Markup Language. Web developer and community group chair Mat Marquis endorsed the picture element in 2012, but "the picture element was practically sneered at" by browser makers, Podjarny said.

Ilya Grigorik, a Chrome developer at Google, believes "srcset is not perfect, and it may not address every single wishlist item from the RICG group, but it's good enough."

Because Opera shares the same code base as Chrome, the only major browser maker not on board is Microsoft, which in recent years has made major headway catching up to other browsers' support for newer Web standards. Microsoft declined to comment on its plans in the area.

Israel Hilerio, the principal program manager for Internet Explorer, showed "a strong and obvious interest" in the issue, according to an account by Web developer Flo Preynat, but apparently didn't commit to any changes.

Grigorik said he is optimistic that Microsoft will come in on the side of srcset. In any event, the company told meeting members that it's evaluating the issue now.

"Microsoft does not have any official plans, but indicated that they're currently planning their roadmap, and hence their presence at the meetup to figure out where everyone is headed," Grigorik said in his own account.

Srcset support likely will start with one facet of srcset, a feature that deals with the issue of device pixel ratios (DPR) that helps software cope with the differences between physical pixels on a device and the grid of vitual pixels used for layout purposes. In the old days, physical pixels were the only sort, but that's no longer true in the "HiDPI" era -- where for example Apple's Retina displays use four physical pixels to each virtual one.

Grigorik believes it'll srcset will spread from there to address more challenges of optimizing imagery on the Web.

"At this point DPR-switching is the non-controversial subset of the larger 'responsive images' discussion and srcset has the critical momentum to address it," Grigorik said. "I would go as far as to say that all the vendors are aligned, and it's just matter of writing the necessary code.

Update, September 27 at 12:50 p.m. PT: Adds Microsoft's response.

 

Join the discussion

Conversation powered by Livefyre

Don't Miss
Hot Products
Trending on CNET

HOT ON CNET

Last minute back to school shopping?

Whether you're looking for headphones to study with or music-streaming gear, CNET rounds up a shopping guide just for you.