HTML <picture> tag

The tag gives web developers more flexibility in specifying image resources.
The most common use of the element will be for art direction in responsive designs.
The element contains two tags:
one or more tags
one tag.
The tag is useful for showing the right image on different devices, making websites faster and more user-friendly.
The tag is a container that contains one or more elements and one element. The browser checks each and displays the first matching image. If none of the conditions match, it displays the image inside the tag.

The <picture> tag itself does not have many attributes. Most attributes are used with the <source> and <img> elements inside it.

1. srcset

Specifies the image file to display.
Used inside the <source> tag.

1. media

Defines the screen size or device condition.
The browser displays the image only if the condition is true.

1. type

Specifies the image format, such as WebP or PNG.
Helps the browser choose a supported image formala.

1. src

Specifies the default image.
Used inside the <img> tag.

1. alt

Provides alternative text if the image cannot be displayed.
Improves accessibility.

Summary Table

Attribute - Description

srcset - Specifies the image file to display.

media - Sets the screen size condition.

type - Specifies the image format.

src - Specifies the default image.

alt - Provides alternative text for the image.