[whatwg] add html-attribute for "responsive images"

Markus Ernst derernst at gmx.ch
Thu Jan 26 01:21:24 PST 2012

Am 25.01.2012 16:39 schrieb Matthew Wilcox:
> It's also worth noting another use case for this being in mark-up and not
> just server-negotiated rescaling of a single image:
> Imagine a profile photo on an About page. At large sizes you want to use a
> full body shot, at smaller sizes you need to retain what's important but no
> longer clear at small scales: a recognisable face - so you substiture a
> head and shoulders shot.
> That's a strong use case where the semantic meaning of the content is the
> same but requires a different resource to be properly conveyed at differing
> scales.

This use case shows some kind of consistency issue: The printed version 
of a page might match a different media query, and thus use a different 
image. If the images have different contents, this can result in a 
confusing user experience.

In order to work around this, UAs might want to keep the first image 
loaded, when the content is used for a different type of media, such as 
print or PDF output. (That could also be the case for changes of window 

There was some more discussion on this type of use case:

Am 25.01.2012 14:42 schrieb David Goss:
 > On Tue, 24 Jan 2012 23:26, Ian Hickson wrote:
 >> What's the use case for doing it for images in<img>  elements? Typically
 >> <img>  elements are for content images, where you don't usually want to
 >> adapt anything.
 >> On Tue, 30 Aug 2011, Karl Dubost wrote:
 >>> And as I explained elsewhere it is not a question of 
 >>> only, but about interaction contexts. Different images for different
 >>> surface sizes.
 >>> Desktop: Show a full photo of Anne van Kesteren riding on a plane
 >> 1024*250 px
 >>> Tablet: Show the photo a closer shot of the plane (cowboy frame)
 >>   400*150 px
 >>> Mobile: Show a portrait of Anne with his leather pilot helmet 
100x100 px
 >> I don't understand the use case. For something like a user profile icon
 >> surely it would be rather bad UI to use a different icon on different
 >> devices. I presume you don't mean a profile icon though, since 
1024x250 is
 >> a bit excessive for an icon these days, and I'm not aware of any 
site that
 >> lets users pick different icons for different size contexts.
 > The use case is that you want to serve the same image (same content) 
to all
 > users, but you want to serve it in different resolutions depending on 
 > context to avoid wasting bandwidth and killing performance (especially on
 > mobile devices where performance is key - you don't want to download a
 > 1000px-wide image when you're scaling it down to 320px wide to 
display it).
 > Karl's example is on dangerous ground, IMO. The different sizes of the
 > image could be slightly cropped/zoomed as appropriate, but should still
 > clearly represent the same thing - in other words, the same alt text 
 > correctly describe all of them.

More information about the whatwg mailing list