Images can be created with the <img> tag. Unlike most tags you have met, the <img> tag doesn't have a closing tag.

The src attribute is used to specify the file name (link to the file) of the image you add to the web page.

Here is a list of common image formats supported by all browsers: GIF, JPEG, PNG, SVG.

Picture element

Sometimes, you want to display different images for devices like desktops and mobile phones. The <picture> element allows us to select several sources for various screen sizes.

To do the above task, we will use the <source> tag along with media and srcset attributes.

As you can see, we use the <source> tag inside the picture tag. Then we use the media and srcset attribute to specify which image to be shown based on the device size. Usually, we use the screen size to separate different types of devices like mobile phones, tabs, and laptops.