@ou-imdt/css/docs/native/picture.md

The IMDT CSS library styles native elements with light, extendable CSS. It is developed for Interactive Media Developers at the Open University.

# picture

The picture element contains zero or more source elements and one img element to offer alternative versions of an image for different display/device scenarios.

To decide which URL to load, the user agent examines each source for srcset, media, and type to select an image that best matches the current layout and capabilities of the display device.

__Why use it?__

- Art direction: Cropping or modifying images for different conditions (for example, load a simpler image on smaller displays).
- Offering alternative formats: for cases where certain formats are not supported.
- Saving bandwidth and speeding page load times by loading the most appropriate image for the viewer's display.

For higher density images (high DPI/Retina-Ready) it's recommended img with srcset is used as this will allow user agents to opt for lower density images when data-saving and doesn't require media queries.


Most of the above is directly from the [MDN Picture Element](https://developer.mozilla.org/en-US/docs/Web/HTML/Element/picture) page.

When rendering an image an img tag will almost always be used (except when an inline svg is used), but a picture tag can be optionally wrapped around it based in requirements and conditions.

## Example

<div class="card">
  <picture>
    <source srcset="https://picsum.photos/id/666/200" media="(min-width: 600px)">
    <source srcset="https://picsum.photos/id/237/500" media="(min-width: 800px)">
    <img src="https://picsum.photos/id/237/800" alt="A black labrador puppy." />
  </picture>
  <strong>Resize the viewport to see the different images load.</strong>
</div>

<details class="compact">
  <summary>HTML</summary>

```html
  <picture>
    <source srcset="https://picsum.photos/id/666/200" media="(min-width: 600px)">
    <source srcset="https://picsum.photos/id/237/500" media="(min-width: 800px)">
    <img src="https://picsum.photos/id/237/800" alt="A black labrador puppy." />
  </picture>
  <strong>Resize the viewport to see the different images load.</strong>
```

</details>