8

I'm doing the MDN HTML tutorial, in the responsive images section, I came across this:

    <img srcset="elva-fairy-320w.jpg 320w,
             elva-fairy-480w.jpg 480w,
             elva-fairy-800w.jpg 800w"
     sizes="(max-width: 320px) 280px,
            (max-width: 480px) 440px,
            800px"
     src="elva-fairy-800w.jpg" alt="Elva dressed as a fairy">

And this

<picture>
  <source media="(max-width: 799px)" srcset="elva-480w-close-portrait.jpg">
  <source media="(min-width: 800px)" srcset="elva-800w.jpg">
  <img src="elva-800w.jpg" alt="Chris standing up holding his daughter Elva">
</picture>

What's the difference between the two? They both pick the image based on device width, right? The MDN page says the second one should be used for art direction problems only, I don't know what that means.

When do you use the <img> tag along with srcset and sizes and when do you use <picture> along with <media>?

MichaelX
  • 99
  • 1
  • 5
  • I thought there was already a thread here on SO covering that topic, but I can't find it and I currently don't have time to write an answer for that, but here is an external article you could read [Don’t use (most of the time)](https://cloudfour.com/thinks/dont-use-picture-most-of-the-time/). Feel free to create an answer out of it. – t.niese Feb 15 '18 at 13:36
  • @Pete can you link the duplicate? – MichaelX Feb 15 '18 at 13:45
  • Look at the top of the question, there's a massive box with a link in it – Pete Feb 15 '18 at 13:46
  • Oh yes, there it is. It wasn't linked immediately. – MichaelX Feb 15 '18 at 13:48

0 Answers0