There are a lot of strong opinions on this issue. I guess that reflects the fact – as many have stated – that we’re in territory that the W3C and browser makers are not catering for. Until they do I believe it’s a question of picking the appropriate technique for the needs of the project at hand.
For my two cents, I favour the data attribute approach. That is, form your images as follows:
Then loop all the responsive-images really early using JavaScript to load the appropriate source. The advantages of this approach are:
* It’s clear from the markup what images are being used, and all have unique URLs
* It puts control of the display in the hands of the designer or content author. Alternatively the web application can generate static images at time of publishing (a definite improvement over on-the-fly)
* Images can be changed on resize in addition to page load. Many techniques miss this trick and for me it’s a biggie. I don’t know of another way to catch an orientation change – and that may well require a different image.
* There are many options for fallback: leave out the src attribute, default to low res src or even a noscript
I also suspect this approach is the closest in concept to an eventual browser-based solution. I did my own research on the subject recently which demonstrates the above technique. It needs some refinement though and some of the links above are a bit more mature.
Darren Miller
There are a lot of strong opinions on this issue. I guess that reflects the fact – as many have stated – that we’re in territory that the W3C and browser makers are not catering for. Until they do I believe it’s a question of picking the appropriate technique for the needs of the project at hand.
For my two cents, I favour the data attribute approach. That is, form your images as follows:
<img src=“default.jpg” data-med-src=“meduim.jpg” data-lrg-src=“large.jpg” alt=“image description” class=“repsonsive-image.jpg” />
Then loop all the responsive-images really early using JavaScript to load the appropriate source. The advantages of this approach are:
* It’s clear from the markup what images are being used, and all have unique URLs
* It puts control of the display in the hands of the designer or content author. Alternatively the web application can generate static images at time of publishing (a definite improvement over on-the-fly)
* Images can be changed on resize in addition to page load. Many techniques miss this trick and for me it’s a biggie. I don’t know of another way to catch an orientation change – and that may well require a different image.
* There are many options for fallback: leave out the src attribute, default to low res src or even a noscript
I also suspect this approach is the closest in concept to an eventual browser-based solution. I did my own research on the subject recently which demonstrates the above technique. It needs some refinement though and some of the links above are a bit more mature.