# Element “picture” is missing a required instance of child element “img”.

> Canonical HTML version: https://rocketvalidator.com/html-validation/element-picture-is-missing-a-required-instance-of-child-element-img
> Attribution: Rocket Validator (https://rocketvalidator.com)
> License: CC BY 4.0 (https://creativecommons.org/licenses/by/4.0/)

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:

```html
<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:

```html
<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:

```html
<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:

```html
<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.