What's the difference using <source> or <img>

[theressophie]

In many sources like http://scottjehl.github.io/picturefill/#api or https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/ for example they just use the img-Element to consider fluid images and the device-pixel-ratio. Example:

<img src="img/jpg/home-srplogo_1x.png"
    alt="Picture-Element"
    sizes="(min-width: 35.5em) 33.3vw, 100vw"
    srcset="/img/png/home-srplogo_4x.png 3840w,
        /img/png/home-srplogo_3x.png 2880w,
        /img/png/home-srplogo_2x.png 1920w,
        /img/png/home-srplogo_1.5x.png 1440w,
        /img/png/home-srplogo_1x.png 961w,
        /img/png/home-srplogo_0.5x.png 480w">

But why they don't use the source- and img-Tag in the picture-Element? Example:

<picture>
            <source sizes="(min-width: 35.5em) 33vw, 100vw"
                srcset="/img/png/home-srplogo_4x.png 3840w,
                    /img/png/home-srplogo_3x.png 2880w,
                    /img/png/home-srplogo_2x.png 1920w,
                    /img/png/home-srplogo_1.5x.png 1440w,
                    /img/png/home-srplogo_1x.png 961w,
                    /img/png/home-srplogo_0.5x.png 480w">
            <img src="img/jpg/home-srplogo_1x.png"
                alt="Picture-Element">
</picture>

Is there any difference between the two approaches?

Thank you in advance.

[jegtnes]

Hey @theressophie,

You generally want to use img with a srcset attribute when you have several otherwise identical images, just resized to different sizes so that different-sized screens don't need to download larger images than they require.

You'd want to use picture in scenarios where you have several images that could be cropped differently depending on, for example, your screen width and height, to better suit the screen. In responsive images, this is called art direction. This is a good example of it: http://responsiveimages.org/demos/art-direction/

The reason for the two different approaches is that an img with srcset only gives the browser hints to what image to display, and it could theoretically override it at its discretion, e.g., if the user is on a really poor connection, only download the lowest-quality image. No browsers currently do this, to my knowledge, but they may choose to do it in the future. picture is a stricter spec, and tells the browser to choose an image given an exact range of media query conditions, expressed by the media attribute in the source tag. Trying to use <picture> for things that srcset combined with sizes handles better gets very complicated very quickly, and this article eloquently explains why this is: https://ericportis.com/posts/2014/srcset-sizes/

So to summarise, use only when you need exact control over what image source is displayed, and <img srcset> when you don't, which, unless you're doing art direction, you typically never do. 95% of my responsive image use consists of <img srcset>.

Does that answer your question? 😊

[theressophie]

Yes, thank you very much for the great summary. Now I understand the difference. :) I have only one last question: Does it make a difference when there is a picture-Tag around the img-Tag?

Example:

<picture>
<img src="img/jpg/home-srplogo_1x.png"
    alt="Picture-Element"
    sizes="(min-width: 35.5em) 33.3vw, 100vw"
    srcset="/img/png/home-srplogo_4x.png 3840w,
        /img/png/home-srplogo_3x.png 2880w,
        /img/png/home-srplogo_2x.png 1920w,
        /img/png/home-srplogo_1.5x.png 1440w,
        /img/png/home-srplogo_1x.png 961w,
        /img/png/home-srplogo_0.5x.png 480w">
</picture>

Thanks in advance.

[jegtnes]

If the <picture> tag only contains an <img> element with the srcset attribute as in your example, it makes no difference and you should omit it :)

I mean, you can do it, and it's valid according to the spec, but there's no point and it will behave exactly like it would if there weren't a <picture> element there.

[theressophie]

Ok, thank you very much :)