Looks like a horrible solution which will add bloat and complexity to a webpage. I would rather see a solution implemented with CSS or even a meta tag. <meta

Looks like a horrible solution which will add bloat and complexity to a webpage. I would rather see a solution implemented with CSS or even a meta tag. <meta name="srcset" content="2x=HD; 100w=phone; 100w 2x=phone-HD" /> The above example is exactly the same information as in this link. However it is expressed in one place and thus is far simpler. The only reason to do this per image would be if you different naming conventions for individual images.. which would just be silly. You could then have a nosrcset attribute which you can add to images which do not have high-res versions. This would save an http request.