Jump to main navigation, main content

Archived entry | Matt Wilcox .net

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:

  <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' />

  <img src='file-name[media].jpg' alt='' />

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:

  <meta name="media" data="/small" media="min-width:350px" />
  <meta name="media" data="/large" media="min-width:1000px" />

  <img src="/content/images[media]/photo.jpg" alt="" />

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 smiley icon: smile 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 smiley icon: smile


skip to comment form
  1. Tom Simpson posted 110 days, 10hrs, 38mins after the entry and said:

    Hi 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

  2. Matt Wilcox posted 113 days, 1hrs, 34mins after the entry and said:

    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?).


From the archives

Other enteries filed under:

Web Development

Site information

Built with valid XHTML and CSS, designed with web standards and accessibility in mind. Best viewed in a modern browser [Firefox, Safari, Opera]

This domain and all content is a copy of my old website, for historical purposes only.