HTML Picture Element

In this tutorial, you will learn to use <picture> tag or HTML Picture Element

The <picture> element in HTML is used to provide different images for different screen sizes, allowing you to optimize images for different devices. Here is a simple tutorial on how to use the <picture> element:

Start by creating an HTML document with the basic structure in place, including the <html>, <head>, and <body> elements.
Inside the <body> element, add a <picture> element. This element can have several <source> tags as a child element, each one with its media condition and the srcset attribute which lists different image options.
For each <source> tag, you can use the media attribute to specify a media query and the srcset attribute to specify the different image options. For example, the following code provides a large image for screens that are 600 pixels or wider, and a smaller image for screens that are 300 pixels or wider:

<picture>
  <source media="(min-width: 600px)" srcset="large.jpg">
  <source media="(min-width: 300px)" srcset="medium.jpg">
</picture>

The last child element of the <picture> element should be the `<img>