Stuff in my head

One thing that cropped up during a discussion on how better to handle responsive images at the responsive summit last week was an idea I put forwards for a (very) hypothetical solution based on a similar idea to how icon files work (specifically mac OS .icns files)

ICNS files are essentially a package or bundle of multiple image variants designed to suit a multitude of uses - all the way from 16x16 favicon sizes right through to 1024x1024 monsters for Lion. Dependant on where the icon is used the correct (or closest fit) version of the icon gets used. Sounds eerily familiar right?

So what if we could have something similar for images on the web?

Partnered with some intelligent detection on the client side, we could render the appropriate size to the screen no matter which context it was used - all from a single tag, which feels semantically more appropriate than multiple references in the HTML.

eg: <img src=”myresponsiveimage.img” />

Then by exposing an index in metadata for the image in the form of an array you could also access a specific key of a variant directly - like if you had thumbnails leading to a larger modal view of that image for example… And because the image was already loaded it would be instant too - neat huh?

eg: <img src=”myresponsiveimage.img”  size=”2” />

An added benefit would also be that each version inside the .img file needn’t be the same image. So dependent on how your layout worked, you could have different aspect ratios, for landscape/portrait, or a different crop, or even a completely different image if that was useful.

Some issues

Ok, so a new image format is a little out there. But as Elliot pointed out, the WOFF font format was created and embraced pretty quickly so it’s not beyond the realms of possibility. WOIF? Looks a bit like wolf too which is pretty rad eh? ;)

Secondly, you might think that wrapping 5 versions of a file and loading it could be a little heavy. That’s possible for sure but take a look at this typical ICNS file. The component parts are huge but as a package the whole things weighs just 225kb which includes a 671kb 1024x1024 image too. There’s also potential for a kind of multipart download of parts of the file if required… 

Of course we’d need to develop plugins or dedicated tools to wrap the files up, but really that’s pretty trivial - even on the server side if you needed to build creation of these files into a CMS.

So what next?

I literally have no clue. I’d like to punt the idea around a bit and see if it’s got any legs at all - so please feel free to spread the word and hopefully we can get the idea in front of some people who can either help it move forwards or help prove it’s not the right way to go. Also would love to hear your thoughts in the comments below.