Responsive Images – Pick a side

As we’ve previously mentioned Responsive Design is the next big thing in Web Design circles, it’s even reached the point where some of our more web savvy clients are starting to request their new website adopt this style of build.

But responsive design still has its faults; the biggest of there are images. Images, especially those on the web, are static and don’t easily fit into the workflow of a responsive design without workarounds, polyfills or experimental techniques. In responsive design it’s usually necessary to create an image at the largest size it will be seen to retain quality, even though for mobile devices that image will appear much smaller. The result is large file sizes which are bet avoided on mobile devices where download speeds and download caps require a more frugal approach.

To allow for images to be responsive and file sizes to be optimised a brand new solution is required. The discussion so far seemed to involve various experts posting their ideas on the best solution but behind the scenes it appears some in the community have really been pushing to create a real working solution.

The publication of a new A List Apart article has brought this discussion front and centre. A List Apart is an online magazine that mostly posts two articles monthly. Yesterday’s article is broken out of the normal publishing schedule seemingly due to its importance it guiding the future of the responsive images.

The article is entitled ‘Responsive Images and Web Standard at the Turning Point’ which explains the problems with images in responsive web design as well as detailing the history, benefits and problems of two of the leading solutions.

Though the article does all this it’s main aim is clearly to increase awareness and support for one of the two solutions. On one side there is the community lead solution from the Responsive Images Community Group (RICG) which involves the creation of a new HTML tag and some heavy lifting for browser manufacturers. The other led by the Web Hypertext Application Technology Working Group (WHATWG) which adds a new attribute to the current tag and seemingly is favoured by the browser manufacturers.

To find out all the details please read the article itself.

I have to agree with the author of the article that the solution created by the RICG appears to be the far better solution. Not only is it a far more powerful and flexible solution but it also reads much better. There has always been a strong movement in the web to make code more semantic and the WHATWG solution doesn’t seem to be concerned with semantics. This solution has the potential for and increased number of coding errors which in turn won’t be so easy to identify and also has a steep learning curve for beginners as it does not follow any conventions found throughout the rest of the HTML specifications.

Hopefully articles like ours and of course the original A List Apart article will increase community awareness and create a more united community voice that can influence a decision that we as web designers and developers will eventually have to implement; all before it is too late.