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.
I have written a follow-up post to expand on this idea, please have a read of that if you’ve got the time
Entry Information
- Posted:
- Sun, 13th May 2012 at 09:05 UTC
- Filed under:
- Tags:
Comments
skip to comment formHi there, I tried your method suggested above, and for some reason it still is not working properly to resize, it seem to just be falling back to…. "images[media] with photo’s in it too, it’s backward compatible"
I tried it on my android and still the same. Can you help me out with this if you have a moment. Thanks for you time, Tom
Hi Tom,
Sorry, this is not working code. It's just an idea that HTML may be able to implement in future to help the problem - you can't use this (yet?).
-Matt