Blah blah

Reading List

Friday 16 August 2013

Responsive images

WebKit has (partially) implemented a new attribute to our ancient chum <img> called srcset that allows authors to send a high-res image only to browsers that have high-resolution displays. It looks like this:

<img alt=… src="normal-image.jpg" srcset="better-image.jpg 2x">

That “2x” thing after the file name means that if a browser has 2 or more physical pixels per CSS pixel (eg, high resolution), it is sent better-image.jpg. If it’s not high-res, or if it’s a browser that doesn’t support srcset, it gets normal-image.jpg. There’s no JavaScript required, and it doesn’t interfere with browsers’ pre-fetch algorithms because it’s right there in the markup.

You can extend it further if you want to:

<img alt=… src=… srcset="better-image.jpg 2x, super-image.jpg 3x">

This implementation doesn’t have the horrible “pretend Media Queries” syntax that sources close to Tim Berners-Lee* called “like, a total barfmare, man”, but this is potentially a great leap forward; it saves bandwidth for the servers, stops people downloading gigantic images that they don’t need, is easy to understand and has graceful fallback.

Graceful degradation of SVG images in unsupporting browsers

Microdata / RDFa / “semweb” shizzle/ SEO

In The Downward Spiral of Microdata, nice Mr Manu Sporny predicts the death of “HTML5” Microdata and the triumph of RDFa Lite now that both WebKit and Blink have dropped support for the Microdata API (which allowed JS access to Microdata).

5 Responses to “
Reading List ”

re srcset: “stops people downloading gigantic images that they don’t need” but doesn’t take into account connection, only capability to display…so as phones with higher and higher dpi come around, they’ll all want to use the 2x, 3x etc versions. the only devices that’ll get the 1x images will be old mobiles/tablets and non-retina/non-high-dpi desktops/laptops.

I’d imagine that browsers would have a user setting (similar to that in Opera) where you could tell it to grab the low quality image (eg, the src fallback or a specified 1x image in srcset) if on a slow connection, regardless of dpi

Isn’t the hope behind srcset that browers will one day be able to use the signals from the markup to make intelligent decisions on which image to download based on user preference, connectivity of the device etc.

Whether it ever will is another matter of course, but in the short term isn’t just a way of differentiating between hi and lo DPI devices vs techniques like compressive images that involve a higher memory / CPU footprint.

you can’t change the model of the img element – XHTML2 tried to make it a non-empty element (eg, give it a closing tag, so inside you can have a textual equivalent that can contain markup rather than only alt text in an attribute). But older browsers display the image *and* the text.

I work for Opera, but all opinions contained herein are mine (and are thus incontrovertibly
correct) and do not represent the opinions of my employers. (Comments are copyright their authors, not written by me, and
are therefore probably the ramblings of mad people.)