HTML Guides for picture

A srcset value that begins with a comma has an empty first image candidate, which usually means the URL that should come before that comma was never filled in.

srcset holds a comma-separated list of image candidate strings. Each one is a URL, optionally followed by a width descriptor such as 800w or a pixel density descriptor such as 2x. When the value starts with a comma, or with spaces and then a comma, nothing comes before the first separator, and the validator reports an empty candidate at the start of the list.

The usual source is a template that writes srcset="{{ image }}, {{ image_2x }} 2x" and prints the attribute even when the image fields are empty. With only the first field missing, the value becomes , hero-2x.webp 2x. With both missing, it becomes , 2x. Browsers skip the leading comma, so in that second case they read 2x as the image URL. Inside <picture>, the browser picks that <source> and requests a file called 2x instead of using the <img> fallback, and the image fails to load.

Fill in the missing URL, or leave the <source> out when there is no image for it. The <img> inside <picture> still provides the fallback.

Invalid example

<picture>

<source srcset=", hero-2x.webp 2x" type="image/webp">

<img src="hero.jpg" alt="A mountain lake at sunrise">

</picture>

Valid example

<picture>

<source srcset="hero.webp, hero-2x.webp 2x" type="image/webp">

<img src="hero.jpg" alt="A mountain lake at sunrise">

</picture>

When no WebP version exists, drop the <source>:

<picture>

<img src="hero.jpg" alt="A mountain lake at sunrise">

</picture>

The <picture> element is a container that lets you provide multiple image sources for different viewport sizes, resolutions, or format support. It works together with zero or more <source> elements and exactly one <img> element. The browser evaluates each <source> in order, selects the best match based on its media, type, or srcset attributes, and then displays the chosen image in the space occupied by the <img> element. If no <source> matches—or if the browser doesn't support the <picture> element at all—the <img> element's src attribute is used as the final fallback.

The <img> element isn't optional; it's structurally required by the HTML specification. Without it, the <picture> element is incomplete and invalid. This matters for several reasons:

• Rendering: Browsers rely on the <img> element to actually display the image. A <picture> element with only <source> children will render nothing in most browsers.
• Accessibility: The <img> element carries the alt attribute, which provides a text alternative for screen readers and other assistive technologies. Without it, there's no accessible description of the image.
• Fallback support: Older browsers that don't understand <picture> or <source> will ignore those elements entirely and fall back to the <img>. Without it, those users see nothing.
• Standards compliance: The WHATWG HTML specification explicitly states that the <picture> element's content model requires one <img> element, optionally preceded by <source> elements and inter-element whitespace.

The <img> element should always be the last child inside <picture>, placed after all <source> elements.

Examples

Invalid: <picture> without an <img> element

This markup triggers the validation error because the required <img> child is missing:

<picture>

<source srcset="hero-large.webp" type="image/webp">

<source srcset="hero-large.jpg" type="image/jpeg">

</picture>

Fixed: Adding the required <img> element

Add an <img> as the last child with a src pointing to the default image and a descriptive alt attribute:

<picture>

<source srcset="hero-large.webp" type="image/webp">

<source srcset="hero-large.jpg" type="image/jpeg">

<img src="hero-large.jpg" alt="A panoramic view of the mountain landscape">

</picture>

Using <picture> for responsive images with media queries

When serving different image sizes based on viewport width, the <img> element provides the default (typically the smallest) image:

<picture>

<source srcset="banner-wide.jpg" media="(min-width: 1200px)">

<source srcset="banner-medium.jpg" media="(min-width: 600px)">

<img src="banner-small.jpg" alt="Promotional banner for summer sale">

</picture>

The browser checks each <source> in order. If the viewport is 1200 pixels or wider, banner-wide.jpg is used. If it's between 600 and 1199 pixels, banner-medium.jpg is used. Otherwise, the <img> element's src value of banner-small.jpg is displayed.

Using <picture> for format selection

You can also use <picture> to offer modern image formats with a fallback for browsers that don't support them:

<picture>

<source srcset="photo.avif" type="image/avif">

<source srcset="photo.webp" type="image/webp">

<img src="photo.jpg" alt="Close-up of a sunflower in bloom">

</picture>

Browsers that support AVIF will use the first source, those that support WebP will use the second, and all others will fall back to the JPEG specified in the <img> element. In every case, the <img> element is what makes the <picture> element valid and functional.