A better method than <picture> and srcset?
I shall assume you already know about responsive images in general, and <picture> specifically. I’ll also assume you’re familiar with the problems with picture - verbosity and endless repetition of tests. You may be familiar with my proposed solution to help fix some of that repetition.
Denis LeBlanc has a much more concise method of solving the responsive images problem than any I’ve seen, which is backward compatible, and has the flexibility and power of using <picture> media query support. It’s this:
<head> <meta name='media' data='large' media='min-width: 600px' /> <meta name='media' data='large-hr' media='min-width: 600px and min-device-pixel-ratio: 1.5' /> </head> <body> <img src='file-name[media].jpg' alt='' /> </body>
The smart thing here is he’s using the meta variables directly in the image path, rather than my solution which was baked into a picture element. This makes the code far more terse and realistic. It also makes it much easier to implement because backwards compatibility is already there - no need for a seperate <img /> fall-back. You could also use it this way:
<head> <meta name="media" data="/small" media="min-width:350px" /> <meta name="media" data="/large" media="min-width:1000px" /> </head> <body> <img src="/content/images[media]/photo.jpg" alt="" /> </body>
And, as long as you have a folder called images[media] with photo’s in it too, it’s backward compatible. Heck you wouldn’t even need the folder, just alias it in the server config.
Additionally, this method (and my proposed one) both deal with browsers over-eagerness to pre-fetch images. Because the tests are in the head, it’s guaranteed the browser has been able to parse those tests before it comes across an img element; meaning it will know it needs to apply them before fetching an image. Unlike today’s JS solutions, which don’t run in time and fall foul of the pre-fetch behaviour.
I really want to see this method fly as it blends the benefits of srcset (terseness), picture (flexibility to adapt to any constraints a media query can detect), and my centralisation of MQ tests.
Please give your feedback on this It might be better to do that on the Community Group as well as here.