Michael Gunner

Michael Gunner

© 2014 Michael Gunner. All rights reserved.

Proposed responsive images syntax

Here’s the current proposal:

However, the W3C community group suggests this instead:

My initial thoughts are this. The first proposal is much shorter, it would also be easy to update existing sites without adding syntax. However, myself and others in the comments section find the “set” tag is quite confusing, as is the markup for adding the responsive images.

The second suggestion seems to be garnering greater support from stalwarts such as Chris Coyier. However, I also have reservations regarding this.

The first is that it’s a complete replacement of the img tag. This is going to make updating existing websites a bit of a chore, to the point you may not bother. The second is that it’s a fair amount of code. I can see what were previously simple image galleries becoming incredibly bloated with code. This brings about the question, how badly will the extra code bloat counter-effect the file size savings of serving responsive images? I suspect not much, but it’s still a point to be considered. I also dislike the source tag, it basically means the syntax reads out as “source source”. Way too saucy for my liking.

Now, here’s my suggestion, were it to be my decision.

Why is this better? For a start, it would make updating old code a breeze as all you’d have to do is a find and replace on your img tags, replacing them with “picture”. The src attribute inside the picture tag would be the default image to display. This means your initial code, and non-responsive code, could be like this:

You then just add in your extra responsive images as you wish. I also replaced “source” with “media”. To me, “media source” makes a hell of a lot more sense than “source source”. This code also works better because the picture tag isn’t just serving as a wrapper. We should be moving away from adding extra tags to “wrap”, by giving the picture tag default functionality it becomes more useful, easier to replace your img tags, and the code is less bloated.

There is probably some gaping obvious reason why my idea is nonsense and couldn’t work, but it’s just a thought.

Leave a Reply

Your email address will not be published. Required fields are marked *

You may use these HTML tags and attributes: <a href="" title=""> <abbr title=""> <acronym title=""> <b> <blockquote cite=""> <cite> <code class="" title="" data-url=""> <del datetime=""> <em> <i> <q cite=""> <strike> <strong> <pre class="" title="" data-url=""> <span class="" title="" data-url="">