Difference between <picture> and <img>

Hi, this is my first post in this forum. I hope I´m doing it well.
Mi question is about responsive images, I don´t understand well the difference between:

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

and the label picture with its attributes.
I mean, when I use one or the other? the effect they produce looks the same to me.
Thanks in advance! :smile:

Hi @PabloS9 and welcome to the community :wave:

Generally speaking you will use <img> if you use different sizes of the same image and <picture> if you use different images like a portrait of a house on small screens and a landscape image of the same house on bigger screens.

I think the reason for this distinction is that the rules in <img> are more like hints for the browser (It can decide to not follow it because of other circumstances.) while the rules in <picture> are followed stricter.

I hope that helps :slightly_smiling_face:

Have a nice day,
Michael

3 Likes

Thank you so much @mikoMK!
Now I understand.
Best regards :grin:

1 Like