Art Direction | Notion

Sometimes we need to show a zoomed in or a cropped version of an image for certain viewport sizes. This is the art direction problem. To handle this, we use the picture element with multiple sources. Each source should contain a media condition and a srcset. The browser will pick the first source whose media condition matches.

Ex:

<body>
  <picture>

    <!-- Display cropped image on mobile device -->
    <source media="(max-width: 500px)" srcset="/images/meal-cropped.jpg" />
    <!-- Display full image on larger screen -->

    <source media="(min-width: 501px)" srcset="/images/meal.jpg" />
    <!-- Backup image -->

    <img src="/images/meal.jpg" alt="A bowl of salmon and curry" />
  </picture>
</body>