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:
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.