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

[Matthew Wilcox]

Please see responses inline:

On 24 January 2012 23:26, Ian Hickson <ian at hixie.ch> wrote:

> 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) }
>   }
>
>
This is of no use to content images - which are the real problem. CSS
supplied images are not an issue.


>
> 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.
>

Sorry, you couldn't be more wrong. Content images need to adapt because of
the performance problems with mobile. Huge effort has been expended in the
community to answer this problem - mobiles should not be delivered the same
sized images as desktop, even though the semantic value of the images are
the same. What we are talking here is device-appropriate re-scaled versions
of the same image. This saves bandwidth and allows phones with weak
hardware to perform acceptably. For more on the issue please read
http://adaptive-images.com,
http://24ways.org/2011/adaptive-images-for-responsive-designs,
http://www.brucelawson.co.uk/2011/notes-on-adaptive-images-yet-again/, or
http://filamentgroup.com/lab/responsive_images_experimenting_with_context_aware_image_sizing/to
name but a few recent in-depth articles on exactly this requirement.

Or to look at the extreme hoops we have to jump through for a client-side
solution read
http://24ways.org/2011/adaptive-images-for-responsive-designs-again - it is
not pretty.


> 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.
>

With retina displays, don't be surprised to see icons around this size very
soon.


>
>
> 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.
>

By re-requesting image resources after re-scale? That's not performant. But
I do agree that it'd be nicer to getreal-time resource re-requests, if only
the penalty didn't involve page layout jumps. The fact os, it's rare anyone
resizes the browser. The adaptive image agenda is mostly about supporting
massively differing viewport sizes and device configurations. Dynamic
rescaling is a side-agenda.


>
>
> 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.
>

Yes and no. It depends on how the image request happens. For example, AI
(linked above) cares only about the number of pixels on the screen. Why?
Because given HTML at the moment you can't re-request an image when you
grow the window - meaning if you start with a small viewport and AI only
went by the viewport size, you'd get a small image cached on your device.
As soon as you grew the window the imag ewould be too small and there's no
way to know the cached version is no longer fit for purpose & re-request.


>
> 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.   `._.-(,_..'--(,_..'`-.;.'
>