Proposed responsive images syntax
<img src="email@example.com" alt="" set="firstname.lastname@example.org 600w 200h 1x, email@example.com 600w 200h 2x, face-icon.png 200w 200h">
However, the W3C community group suggests this instead:
<picture alt="hello"> <source src="mobile.jpg" /> <source src="large.jpg" media="min-width: 600px" /> <source src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" /> <img src="mobile.jpg" /> </picture>
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.
<picture alt="hello" src="mobile.jpg" /> <media src="large.jpg" media="min-width: 600px" /> <media src="large_1.5x-res.jpg" media="min-width: 600px, min-device-pixel-ratio: 1.5" /> </picture>
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:
<picture alt="hello" src="mobile.jpg" /></picture>
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.