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

[Ian Hickson]

On Wed, 24 Aug 2011, Anselm Hannemann - Novolo Designagentur wrote:
> 
> As we now have the possibility of creating fluid and responsive layouts 
> in several ways we have a problem with images.
>
> There's currently no good feature to implement something like responsive 
> images which adapt to the different device-resolutions. We only can 
> implement one image with one resolution scaling-up and down.

You can do adaptive sites using media queries.

   <!-- HTML -->
   <h1>My Site</h1>

   // CSS
   @media (min-width: 320px and max-width: 640px) {
     h1::before { content: url(http://cdn.url.com/img/myimage_xs.jpg) }
   }
   @media (min-width: 640px and max-width: 1024px) {
     h1::before { content: url(http://cdn.url.com/img/myimage_m.jpg) }
   }
   @media (min-width: 1024px) {
     h1::before { content: url(http://cdn.url.com/img/myimage_xsl.jpg) }
   }


On Tue, 30 Aug 2011, Karl Dubost wrote:
> 
> It is easy to do right now with background images, but not at all for 
> images in <img/> element.

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 high/low-resolution 
> 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.


On Wed, 31 Aug 2011, Bjartur Thorlacius wrote:
>
> Bottom (top?) line: User agents should negotiate an appropriate 
> message-body size using HTTP. Sending an accept-size (or some such) 
> could solve both the problem of high resolution photography and lengthy 
> documents. The amount of split articles ("Click here to go to the next 
> page / page 4") and long search results show clear demand.

I don't think that really works. You wouldn't want to get different 
results if I started with a small window vs starting with a big window and 
narrowing it. It should adapt in realtime.


On Tue, 6 Sep 2011, Ashley Sheridan wrote:
> 
> Yes, but the point is, the alternative images you may want to display 
> for visitors on a smaller screen/resolution could be completely 
> different from the original image (cropped shot not showing all the 
> detail, etc).

Note that "resolution" and "number of pixels on the screen" are orthogonal 
issues. Also, note that the number of pixels on the screen is irrelevant, 
it's the number of pixels on the viewport that matters.

My phone has a far higher resolution than my TV, but has the same number 
of pixels. My phone also has a higher resolution than my desktop, but 
windows on my desktop typically have far more pixels.


> Ergo, you lose the accessibility because you now can't textually 
> represent it in the alt tag.

I don't really understand the use case here. Could you elaborate, ideally 
with an example showing the alternative text you had in mind?

-- 
Ian Hickson               U+1047E                )\._.,--....,'``.    fL
http://ln.hixie.ch/       U+263A                /,   _.. \   _\  ;`._ ,.
Things that are impossible just take longer.   `._.-(,_..'--(,_..'`-.;.'