Picture Fallback

A dashboard image uses picture and source for a wide layout while the nested img supplies the default source and alt text.

Program

The picture element lets the browser choose among sources. The nested img is still required because it provides the fallback image and text alternative.

picture_fallback.html

<picture>
  <source media="(min-width: 700px)" srcset="wide-dashboard.png">
  <img src="compact-dashboard.png" alt="Dashboard summary">
</picture>

source A source element describes a candidate image and the condition for using it.

fallback img The nested img supplies the fallback source and alt text.