Simpler responsive images proposal
TL;DR
Adding a media attribute that supports queries to the base tag is all that's required to have responsive images with no performance penalty.
The thread
After my last post Nicolas Gallagher pointed me towards a mail thread on html-public mailing list that discusses appropriate solutions to the responsive images problem.*There were a few suggested solutions there:
- Each image tag will have child source tags with a media attribute in each
- A new "image" format that will deliver the browser the real image URLs according to dimensions. The browser will then fetch the image it needs according to that info
- Web authors will use a progressive image format and browsers will terminate the connection once they have enough data to properly reconstruct a downsized image
- Allow media attribute on all elements
- Add HTTP headers that will allow content negotiation
In my opinion, only the two solutions that involve the media attribute can resolve the problem with a front-end only solution, where content stays in the HTML (leaving the CSS cacheable independently from content) without any performance problems. The downside of both is that they add a lot of repeating code to the HTML. Each resource will have to be defined several times while adding a media query to each resource. A lot of copy-pasting...
Eureka
That got me thinking of a "conditional comment"-like media query syntax inside the HTML that will enable to define a different base tag according to dimensions. Then I realized that we don't need the fancy new syntax I just made up. All we need is a media attribute in the base tag that supports queries.
A base tag with a media attribute will enable us to set the base for relative URLs according to dimensions, so we would be able to simply have small images in one directory and larger images in another one, without having to specify that on a per-image basis.
Also, adding media attribute only to the base tag will probably be simpler to implement than adding it to all resources.
While that solution won't provide maximal flexibility in determining the different resolution URLs, I believe it is good enough to resolve the responsive images problem in a clean, pure front-end manner.
Thoughts?
* I actually saw the initial suggestions there a couple of months ago, but missed the followup responses
5 comments
Jason Grigsby, ☁4 — Mon, 25 Jul 2011 20:42:25 GMT
One thing I’ve been looking for in a comprehensive solution is the support for an arbitrary number of image sizes.
Our current problem comes from the belief that one size of an image will work in any context. Increasing from one to two—small vs. large—seems likely as limited.
Your solution doesn’t necessitate that it is limited to two sizes, but it does have the idea of preset image sizes instead of dynamic sizes from the server. My gut says the latter is going to be an integral part of future web infrastructure.
Josh Fraser — Tue, 26 Jul 2011 07:06:22 GMT
At Torbit we're doing the detection server-side (using UserAgent) and are serving up unique URL's for each size of the image. That way we don't need to worry about proxies caching the wrong size or trying to change any specs. It has worked well so far.