Html code for picture

HTML Element

The HTML element allows you to display different pictures for different devices or screen sizes.

The HTML Element

The HTML element gives web developers more flexibility in specifying image resources.

The element contains one or more elements, each referring to different images through the srcset attribute. This way the browser can choose the image that best fits the current view and/or device.

Each element has a media attribute that defines when the image is the most suitable.

Example

Show different images for different screen sizes:

Note: Always specify an element as the last child element of the element. The element is used by browsers that do not support the element, or if none of the tags match.

When to use the Picture Element

There are two main purposes for the element:

1. Bandwidth

If you have a small screen or device, it is not necessary to load a large image file. The browser will use the first element with matching attribute values, and ignore any of the following elements.

2. Format Support

Some browsers or devices may not support all image formats. By using the element, you can add images of all formats, and the browser will use the first format it recognizes, and ignore any of the following elements.

Example

The browser will use the first image format it recognizes:

Note: The browser will use the first element with matching attribute values, and ignore any following elements.

HTML Image Tags

Tag	Description
	Defines an image
	Defines an image map
	Defines a clickable area inside an image map
	Defines a container for multiple image resources

For a complete list of all available HTML tags, visit our HTML Tag Reference.

Источник

: The Picture element

The browser will consider each child element and choose the best match among them. If no matches are found—or the browser doesn’t support the element—the URL of the element’s src attribute is selected. The selected image is then presented in the space occupied by the element.

Try it

To decide which URL to load, the user agent examines each ‘s srcset , media , and type attributes to select a compatible image that best matches the current layout and capabilities of the display device.

The element serves two purposes:

1. It describes the size and other attributes of the image and its presentation.
2. It provides a fallback in case none of the offered elements are able to provide a usable image.

• Art direction. Cropping or modifying images for different media conditions (for example, loading a simpler version of an image which has too many details, on smaller displays).
• Offering alternative image formats, for cases where certain formats are not supported.

Note: For example, newer formats like AVIF or WEBP have many advantages, but might not be supported by the browser. A list of supported image formats can be found in: Image file type and format guide.

If providing higher-density versions of an image for high-DPI (Retina) display, use srcset on the element instead. This lets browsers opt for lower-density versions in data-saving modes, and you don’t have to write explicit media conditions.

Content categories	Flow content, phrasing content, embedded content
Permitted content	Zero or more elements, followed by one element, optionally intermixed with script-supporting elements.
Tag omission	None, both the starting and ending tag are mandatory.
Permitted parents	Any element that allows embedded content.
Implicit ARIA role	No corresponding role
Permitted ARIA roles	No role permitted
DOM interface	HTMLPictureElement

Attributes

This element includes only global attributes.

Usage notes

You can use the object-position property to adjust the positioning of the image within the element’s frame, and the object-fit property to control how the image is resized to fit within the frame.

Note: Use these properties on the child element, not the element.

Examples

These examples demonstrate how different attributes of the element change the selection of the image inside .

The media attribute

The media attribute specifies a media condition (similar to a media query) that the user agent will evaluate for each element.

picture> source srcset="mdn-logo-wide.png" media="(min-width: 600px)" /> img src="mdn-logo-narrow.png" alt="MDN" /> picture> 

The srcset attribute

The srcset attribute is used to offer list of possible images based on size.

It is composed of a comma-separated list of image descriptors. Each image descriptor is composed of a URL of the image, and either:

• a width descriptor, followed by a w (such as 300w ); OR
• a pixel density descriptor, followed by an x (such as 2x ) to serve a high-res image for high-DPI screens.

picture> source srcset="logo-768.png, logo-768-1.5x.png 1.5x" /> img src="logo-320.png" alt="logo" /> picture> 

The type attribute

picture> source srcset="photo.avif" type="image/avif" /> source srcset="photo.webp" type="image/webp" /> img src="photo.jpg" alt="photo" /> picture> 

Specifications

Browser compatibility

BCD tables only load in the browser

See also

Found a content problem with this page?

This page was last modified on Apr 13, 2023 by MDN contributors.

Your blueprint for a better internet.

MDN

Support

Our communities

Developers

Visit Mozilla Corporation’s not-for-profit parent, the Mozilla Foundation.
Portions of this content are ©1998– 2023 by individual mozilla.org contributors. Content available under a Creative Commons license.

Источник