[whatwg] Responsive images using http headers
oom at oscarotero.com
Mon Jun 25 10:34:04 PDT 2012
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
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.
More information about the whatwg