<picture> element allows specifying multiple image sources to be displayed under different conditions. It ensures that the most appropriate image is served based on the user's device or the browser's viewport.
Specifically, the element can enclose one or multiple optional
<source> elements and an
<img> element. Browsers evaluate the
<source> elements in a sequence, choosing the first suitable image. If none match or the browser lacks
<picture> support, the image from the
<img> tag is displayed as a fallback.
Examples and Usage
To understand the element's versatility and use cases, we'll observe a series of illustrative examples. These scenarios encompass responsive design considerations, format preferences, and adjustments for varying screen resolutions.
Providing Different Image Formats
Modern web development often requires the integration of various image formats, especially when aiming for optimal quality and compression.
<picture> <source srcset="example-image.avif" type="image/avif"> <source srcset="example-image.webp" type="image/webp"> <img src="fallback-image.jpg" alt="A descriptive alt text."> </picture>
In the example above, the
srcset attribute in the
<source> element specifies the image's URL, while the
type attribute states the image format. The
src attribute in the
<img> tag provides the default image if none of the sources match or if the browser doesn't support the newer formats. AVIF and WebP are modern formats that sometimes offer superior characteristics compared to traditional ones like JPEG. Not all browsers support these, hence the fallback in the
<img> tag addresses compatibility.
Adapting to Different Viewport Sizes
<picture> element can also aid in responsiveness. Let's go over the specifics shown in the example below.
<picture> <source srcset="landscape-image.png" media="(min-width: 600px)"> <img src="portrait-image.png" alt="A scenic view."> </picture>
media attribute contains a condition, much like a media query. If the browser's viewport width is 600 pixels or more, it will display the landscape image. Otherwise, it defaults to the portrait image, which is more suited for narrower screens.
Addressing Different Pixel Densities
With high-resolution screens becoming common, the
<picture> element can serve images based on device pixel density.
<picture> <source srcset="image-standard.png 1x, image-hd.png 2x" /> <img src="image-default.png" alt="A descriptive alt text."> </picture>
x descriptor (like
2x) in the
srcset attribute indicates pixel density. A
2x descriptor, for instance, would be suitable for displays with higher pixel density, like Retina screens.
It's worth noting that the above examples are illustrative and can be structured in various ways based on the specific needs of a website. Developers have the flexibility to use values other than
px for the media attribute, such as
em. Additionally, attributes like
decoding can be added to the
<img> tag to further optimize image delivery. Elements within
<picture> can also be nested differently depending on the use case.
<picture> element doesn't have any specific attributes; it uses the global attributes applicable to all HTML elements.
Note: The attributes we discussed earlier are used within the elements nested inside the
<picture> tag. They are not directly associated with the
<picture> element itself.
When using the
<picture> element, it's crucial to be aware of certain accessibility considerations:
<picture>element does not have a direct corresponding role in accessibility APIs.
You can set the
aria-hiddenattribute on the
<picture>element. This attribute indicates that the element and all of its descendants should be treated as a single, invisible, entity by assistive technologies.
Always include an
<img>element nested inside the
<picture>element, with a relevant
altattribute. This attribute provides a text description of the image, aiding screen readers and other assistive tools.
<picture>element is not just a direct extension of the
srcsetoffers varied sizes of the same image, the
<picture>element can provide entirely different images, offering more nuanced control over the image displayed.
Responsive designs may sometimes necessitate image cropping rather than just resizing. Different devices or orientations might benefit from differently cropped images to maintain aesthetic appeal. Make sure the
altattribute accurately describes the image, even if cropped versions are used.
sizesattributes on the
imgelement cater to many responsive design needs, the
<picture>element steps in when a more granular approach is required. It enables developers to dictate exact conditions for image display.
For more control over image positioning within its container, utilize the
object-fitproperties on the nested
<img>element, not on the
<picture>element itself. These properties adjust the image's position and resizing behavior within its frame.
For a detailed breakdown of specific browser nuances and older version support refer to the first link in the Useful Resources below.