DEV Community

Discussion on: Explain HTML's img srcset vs picture tag Like I'm Five

Collapse
 
ben profile image
Ben Halpern

srcset is for "resolution switching" and <picture> is for "art direction".

Basically srcset is where you give the browser several different versions of the image to avoid loading big pictures on small screens and vice versa. <picture> is where you want fine-grained manipulation of which image shows up given some media queries. Maybe you want a specifically cropped tall splash screen on mobile and a wide one on desktop. They're essentially different pictures and you don't want to leave the details to chance.

srcset sort of builds on src but gives the browser a chance to render the best version for the scenario and <picture> is useful if you want explicit control over how things are displayed, which is typically not necessary compared with srcset.

I'll note that the last time I tried to use srcset I couldn't get around a frustrating Safari bug. I've never used <picture> so can't say if that works as expected.

Collapse
 
jessefulton profile image
Jesse Fulton

<picture> is useful if you want explicit control over how things are displayed, which is typically not necessary compared with srcset

But can't you do the same thing with each of them? I guess, I'm not seeing any functional difference between the two - they seem to only vary in the implementation. They both allow you to bias the browser into downloading an "optimized" version of an image based upon media queries, just in slightly different syntaxes. Does that sound correct?

Although, if one doesn't work on Safari (thanks for the tip!) that's reason enough for me to use one over the other (IE support is another issue though...)

Collapse
 
ben profile image
Ben Halpern

With srcset the browser does the math on retina displays and other scenarios where pixels for you might not be pixels for the user. With <picture> you'd have to do this all yourself.