Jump to content
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:
* 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.