Picture Element — Art Direction

<picture>
    <!-- Vertical crop for narrow screens -->
    <source media="(max-width: 600px)"
            srcset="/banner-mobile.jpg 1x, /banner-mobile-2x.jpg 2x">

    <!-- Wide crop for desktop -->
    <source media="(min-width: 601px)"
            srcset="/banner-desktop.jpg 1x, /banner-desktop-2x.jpg 2x">

    <!-- Fallback for very old browsers -->
    <img src="/banner-desktop.jpg"
         alt="Team standing in front of a whiteboard."
         width="1600" height="800">
</picture>

<!-- Modern format fallback chain: AVIF → WebP → JPG -->
<picture>
    <source type="image/avif" srcset="/photo.avif">
    <source type="image/webp" srcset="/photo.webp">
    <img src="/photo.jpg" alt="A descriptive alt text." width="800" height="600">
</picture>