[whatwg] Features for responsive Web design

[Fred Andrews]

If it is really necessary to support this case then perhaps both the image width and the
the native pixel breakpoints could be specified in the srcset.

Then srcset="low.jpg 10w 20w, hi.jpg 20w 40w, huge.jpg 30w" would mean:

low.jpg is 10 pixels wide and use it if the native pixel width of the image box is less than or equal to 20,

hi.jpg is 20 pixels wide and use it if the native pixel width of the image box is less than or equal to 40,

huge.jpg is 30 pixels wide and use it if the native pixel width of the image box is less than greater than 40 pixles

The default break points could be the image sizes, and would typically not be needed.

The first image could be the 1x density image, allowing the browser to determine the
image box size if not otherwise specified and this could be done before loading the image.

This approach may be more natural for a fluid design.

cheers
Fred

> Date: Thu, 18 Oct 2012 08:31:57 +0200
> From: info at anselm-hannemann.com
> To: fredandw at live.com
> CC: whatwg at lists.whatwg.org; odinho at opera.com
> Subject: Re: [whatwg] Features for responsive Web design
> 
> Am Donnerstag, 18. Oktober 2012 um 04:05 schrieb Fred Andrews:
> > This is good point. Could I just clarify my understanding with an example:
> >  
> > Given a thumbnail image with srcset:
> > srcset="low.jpg 20w, hi.jpg 40w, huge.jpg 80w"
> >  
> > The webpage may want to have the browser scale the 20w image to say 50px
> > without the browser deciding that the 40w image is more appropriate?
> >  
> > Perhaps it would be realistic for this case to simply not be supported.
> srcset cannot support this case. This is one case (of many) why we suggested picture-element.
> > Authors have the alternative option of using an encoding with a lower quality
> > to reduce the image file size, rather than supplying a low resolution image that
> > the browser scales up.
> >  
> > Perhaps when the file size is far more important than image quality a single image
> > would suffice anyway.
> >  
> >  
> 
> I don't think that is an answer for such a problem. It is how you would solve it today. Not how you want to solve it.
> 
> Cheers
> -Anselm
> >  
> > cheers
> > Fred
> >  
> > > To: whatwg at lists.whatwg.org (mailto:whatwg at lists.whatwg.org)
> > > Date: Mon, 15 Oct 2012 18:40:21 +0200
> > > From: odinho at opera.com (mailto:odinho at opera.com)
> > > Subject: Re: [whatwg] Features for responsive Web design
> > >  
> > > On Thu, 11 Oct 2012 20:07:04 +0200, Markus Ernst <derernst at gmx.ch (mailto:derernst at gmx.ch)> wrote:
> > >  
> > > > This is why I'd humbly suggest to put information on the image in  
> > > > @srcset rather than info on the device and media. Such as:
> > > > srcset="low.jpg 200w, hi.jpg 400w, huge.jpg 800w"
> > > >  
> > >  
> > >  
> > > What about an image gallery, when you have 25 thumbnails on one page? I'm  
> > > not sure how this will work in cases where you don't want the image to be  
> > > the "max size" your screen can handle.
> > >  
> > > Even the common case of having an article picture that is not 100% of the  
> > > screen width will be hard to do in a responsive non-fluid way with  
> > > predefined breakpoints.
> > >  
> > > --  
> > > Odin Hørthe Omdal (Velmont/odinho) · Core, Opera Software, http://opera.com
> > >  
> >  
> >  
> >  
> >  
> 
>