HTML Guide for picture

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.