[whatwg] Responsive images using http headers

Hello

I'm Oscar Otero and I have been following very closely the progress of 
responsive layouts image solutions (<picture>, srcset, etc). These 
solutions are html-based, so they can be easily managed by any 
designer/frontend developer, but the main problem is the html code is 
not reusable and hard to manage by content people or CMS systems.

I think the responsiveness, when we are talking about images, is not a 
problem of content but a problem of the bandwidth and performance, so 
this problem might be solved when the image is requested by using http 
headers.

We can manage the way the page is cached using http headers such 
Cache-Control, Last-Modified, etc. We do this to prevent too many 
requests, save bandwidth and improve navigation speed. The image size is 
the same issue. Then, if we the browser could send a header indicating 
the size which the image will be displayed in the current page layout 
(also the connection speed and other useful data) the server can send 
the most appropiate image (maybe preprocessing it). This is a clean 
solution, ease to manage and the content staff will not have to worry 
about image sizes.

This solution does not have to replace other solutions (srcset, picture, 
etc) but improve them.

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;

The image could have a property to indicate the position of the anchor 
point to crop the image maintaining the most interesting areas visible 
(centered by default). The syntax for this property could be the same 
than the background-position css property.

Thanks for reading this message.
Best regards.
Oscar Otero.

Received on Monday, 25 June 2012 17:34:44 UTC