Tables and Media Details

Picture Fallback

Choose an Image Source

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
Visuals: captured from real browser rendering
<picture>
  <source media="(min-width: 700px)" srcset="wide-dashboard.png">
  <img src="compact-dashboard.png" alt="Dashboard summary">
</picture>

  1. Create a picture container.

    An empty responsive image slot appears.
    The picture element groups candidate image sources.

  2. Add a candidate source.

    The picture has a wide-dashboard candidate but no fallback image yet.
    Source elements describe options; they do not replace the required img.

  3. Limit the candidate to wide viewports.

    The wide image candidate is tied to large viewports.
    The media attribute tells the browser when that candidate applies.

  4. Add the fallback image.

    A compact dashboard image appears in the picture slot.
    The img element supplies the default image when no source condition wins.

  5. Describe the dashboard image.

    The same dashboard image remains visible with alt text in the document state.
    The fallback img also carries the text alternative for the chosen image.
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.