blog

I came up with this title all by myself
The rest is stuff I got off the Internet

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

Comments

blog comments powered by Disqus

Who?!?!

  • I'm Yoav Weiss.
  • I'm a developer.
  • I have a thing for web performance.
  • I live on a hill.
  • I have 3 small kids.
  • I don't sleep much.