HTML

Picture Element — Art Direction

admin by @admin ADMIN
1d ago
May 31, 2026
Public
0 0 up · 0 down Sign in to vote
`<picture>` lets you serve DIFFERENT images at different breakpoints — not just different sizes of the same crop. Perfect for a wide desktop banner that becomes a square mobile poster.
HTML
Raw
<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>
Tags

Save your own code snippets

Create a free account and build your private vault. Share publicly whenever you want.