Component

Hi there, Well done on completing the challenge 🙌🏻.

Regarding the <picture> element its used to basically set images for various screen sizes. You can add <source> elements inside it, which can specify various images URLs using srcset attribute, and using media attribute you can set the media query conditions for when each <source> should be used.

Let's take an example 🎯:

<picture>
<source srcset="image-large.jpg" media="(min-width: 1200px)">
<source srcset="image-medium.jpg" media="(min-width: 900px)">
<img src="image-small.jpg" alt="">
</picture>

• Here in the above code snippet inside the <picture> element im using 2 <source> elements .
• Each of these <source> element specifies a different image using the srcset attribute.
• The media attribute is used to set the conditions for when these <source> should be used (i.e min-width:900px and min-width:1200px).
• Initially, if the device is on a small-screen, the <img> tag will be used, showing the small image.
• As the device width increases and reaches 900px mark, the "image-medium.jpg" will be displayed.
• Further increasing the width and hitting the 1200px mark will switch to showing "image-large.jpg".

In the example im using only 2 <source> elements but you can use more or just 1 too. I'm using min-width for the media attribute, but you can try out other resolutions as well.

Overall, <picture> element is a great tool for responsiveness!

Here's the link if you wanna learn more about it~~ <picture> Element 💻

I hope this clarifies the usage of the <picture> element for you 😊