[whatwg] Responsive images using http headers

Karl Dubost karld at opera.com
Tue Jun 26 06:01:31 PDT 2012

Le 25 juin 2012 à 13:34, Oscar Otero a écrit :
> For example, for an image 100% width in a div of 400px, the browser would send a header indicating it need a 400px width image. This solution is also valid for css images (backgrounds, for example) and even for video. The values to send could be the same of css values (width, min-width, max-width, height, min-height, max-height), for example:
> Content-Size: width:400px, min-height: 300px;

There has been a similar proposal for a long time but which has never really been implemented. It was called "Transparent Content Negotiation" [1] because it was explicitly listing the alternate available resources for a specific URI.

I was wondering about the possibility of negotiating that way too. [2]. 

Alternates: {"bigpussycat"  {size 1Mo} {dpi 300}},
            {"pussycat"  {size 100ko} {dpi 72}},
            {"tinypussycat" {size 10ko} {dpi 72}

or could be something else for keywords and relevant information. This solution doesn't really work with the following constraints. 

* The client (and owner of the client) knows best about its capabilities and its context. 
* The server knows about the available resources. 
* Avoid HTTP Round Trips to discover what are the available resources (HTTP HEAD, then GET)

You could imagine a system where the "parent" resource is the one containing the information about all alternate children. But that would make quite a lot of HTTP headers. No perfect solution.

[1]: http://tools.ietf.org/html/rfc2295
[2]: http://my.opera.com/karlcow/blog/2011/12/08/responsive-images-and-transparent-content-negotiation-in-http

Karl Dubost - http://dev.opera.com/
Developer Relations, Opera Software

More information about the whatwg mailing list