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
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.
Let’s hope it turns up in Blink, Trident and Gecko soon.
* “sources close to” is UK newspaper code for “we just made it up”.
Graceful degradation of SVG images in unsupporting browsers
Very very clever: SVG and <image> tag tricks. (Yes, <image> which the HTML5 parser aliases to <img>.)
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).
Co-incidentally, Mr Sporny is an inventor of RDFa Lite. Personally, I don’t care which triumphs – now only Opera Presto supports the Microdata API, there is no technical reason to prefer one to the other (in fact, as Facebook supports RDFa and not microdata, so you could argue it has greater utility).