In looking into this question myself, I've found that <picture> really is better for art direction, as it will adjust to the viewport/layout on the fly. Yeah, you can use srcset on <img> to load different image files on initial page-load, but when you adjust the screen size or orientation, it won't load or switch to your more appropriate image file (unless you refresh, maybe). <picture> on the other hand, will.
Now while I hate to answer a question with another question, I haven't tested whether <picture> loads all image files on page-load, or if it just loads them as needed, making another query after the page has already loaded, like an AJAX call. But somehow all of the image files are available for the <picture>, but for the <img> with srcset, only the file loaded on page-load is available.
My basic conclusion is that for general use, <img> with srcset is more ideal. When you really need to be specific and have higher control of art direction <picture> gives you the control that <img> + srcset doesn't.
For further actions, you may consider blocking this person and/or reporting abuse
We're a place where coders share, stay up-to-date and grow their careers.
In looking into this question myself, I've found that
<picture>really is better for art direction, as it will adjust to the viewport/layout on the fly. Yeah, you can usesrcseton<img>to load different image files on initial page-load, but when you adjust the screen size or orientation, it won't load or switch to your more appropriate image file (unless you refresh, maybe).<picture>on the other hand, will.Now while I hate to answer a question with another question, I haven't tested whether
<picture>loads all image files on page-load, or if it just loads them as needed, making another query after the page has already loaded, like an AJAX call. But somehow all of the image files are available for the<picture>, but for the<img>withsrcset, only the file loaded on page-load is available.This post demonstrates a good example of that (see fig. 3):
learnedia.com/responsive-images-sr...
Here's another really good article on it (even better, I'd say):
css-tricks.com/responsive-images-y...
If you only read one of these, read this one.
My basic conclusion is that for general use,
<img>withsrcsetis more ideal. When you really need to be specific and have higher control of art direction<picture>gives you the control that<img>+srcsetdoesn't.