Skip to main content

HTML Guide

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

The picture element is used to provide multiple sources for an image depending on the viewport size or resolution of the device being used. It’s a container element that requires exactly one img child element, and zero or more source child elements inside.

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

To fix this issue, add an img element inside the picture element with a src attribute pointing to the default image file that you want to display.

Here’s an example:

<picture>
  <source srcset="example-large.jpg" media="(min-width: 800px)">
  <source srcset="example-medium.jpg" media="(min-width: 450px)">
  <img src="example-small.jpg" alt="Example">
</picture>

In this example, we’ve added a default image img with the src attribute set to “example-small.jpg”. If none of the source elements match the device’s viewport size or resolution, this image will be displayed.

Learn more:

Related W3C validator issues