Photo of Jamie & Lion

The personal site of Jamie Knight, an autistic web developer, speaker and mountain biker who is never seen far from his plush sidekick Lion. View the Archive

Topics: Autism Development

HTML Responsive Images Suggestion.

Update: Thanks to bruce lawson for linking me to a wonderful little article discussing why we cannot have a block image tag!

I have been thinking about responsive images recently after loosely following various dicussions around the web. While i was thinking about it i had an idea for a very simple (probably too simple) syntax which allows for describing variations of an image asset.

The suggested markup is still an image tag, however it is now a container tag and it can contain <vary> elements. The <vary> element defines the structure of the variations. I have not thought about how these variations are requested from the server yet (different URLs? Naming conventions? headers? dunno!). Effectively the suggested tag just informs the browser of which variations are avaliable and then the browser picks the best fit. For example, it could go for the closest to the size it needs, or to the smallest etc.

In order to seperate content and presentation, the new image tag only describes the content (and the variations which are avalible), and CSS would still define its rendered size.

So for example:

 <img src="lion.png" alt="a photo of lion">
 	<vary on="size"  options="244px, 500px, 800px, 1000px" />

This tells the browser there is an image, source is lion.png. There are 4 sizes avaliable (244, 500, 800, 1000 pixels in width).

This could work stand alone (eg, pixel double screen use it to find the best quality for the display in use) or combined with CSS can be used for responsiveness.

For example, if the css was simply:

 img { width: 100%; }

Then the browser would request the closest image size at page load and then as the image changes size it would request other images if required to keep quality constant etc.

The vary tag could also be used to describe other variations (sensors) such as bandwidth, connection type or content. For example:

<img src="lion.png"alt="a photo of lion">
 	<vary on="size"  options="244px, 500px, 800px, 1000px" />
 	<vary on="connection-speed"  options="100kbs, 150kbs" />

Here, each variation of size also has a highly compressed versions suitible for connections of less than 100kb/s and a less compressed version for faster connections.

I am not entirely sure “on” is the best name for the attribute, target or group may be better but i liked on as it read like a sentence which makes remembering the syntax easy. “Vary on size, options 250, 300, 450” is just the sort of thing i think as i am coding.

I hope this suggestion is of some use, i am sure i have missed some obvious stuff but thought thinking simple might generate some interesting discussion.

Published: 22 May 2012 Permalink

Commenting is closed for this article.