The Picture Element

The Picture Element

Different screen sizes need different images. A large desktop hero image is too heavy for mobile, and a square mobile crop looks wrong on desktop. The HTML <picture> element solves this by letting you serve different images for different conditions.

The Problem with Regular <img>

<!-- This loads a 1920px wide image even on a 320px phone -->
<img src="img/hero-desktop.jpg" alt="Hero">

• Wasted bandwidth — mobile users download huge images they don't need
• Slow page load — large images take longer to load on cellular networks
• Wrong crop — a landscape desktop image may not work in portrait on mobile

The <picture> Element Syntax

<picture>
    <source media="(max-width: 480px)" srcset="img/hero-mobile.jpg">
    <source media="(max-width: 768px)" srcset="img/hero-tablet.jpg">
    <img src="img/hero-desktop.jpg" alt="Beautiful hero image">
</picture>

How It Works

1. The browser reads the <source> elements top to bottom
2. It finds the first one whose media condition matches the current screen
3. It loads that source's srcset image
4. If no source matches, it falls back to the <img> element (the default)
5. The <img> is required — it serves as the fallback and provides the alt text

Using picture in Our Hero Section

Replace the CSS background image with an HTML <picture> for better responsive control:

<section id="hero">
    <picture class="hero-bg">
        <source media="(max-width: 480px)" 
                srcset="img/hero-mobile.jpg">
        <source media="(max-width: 768px)" 
                srcset="img/hero-tablet.jpg">
        <img src="img/hero-desktop.jpg" 
             alt="Hero background">
    </picture>
    <div class="container">
        <div class="hero-content">
            <h1>Welcome to Our Website</h1>
            <p class="hero-text">We create beautiful, responsive 
               websites that work perfectly on every device.</p>
            <a href="#services" class="btn hero-btn">Our Services</a>
        </div>
    </div>
</section>

CSS for Picture as Background

#hero {
    position: relative;
    min-height: 500px;
    display: flex;
    align-items: center;
    color: #fff;
    overflow: hidden;
}

.hero-bg {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
}

.hero-bg img {
    width: 100%;
    height: 100%;
    object-fit: cover;
}

/* Keep the dark overlay */
#hero::before {
    content: '';
    position: absolute;
    top: 0; left: 0;
    width: 100%; height: 100%;
    background: rgba(0, 0, 0, 0.5);
    z-index: 1;
}

.hero-content {
    position: relative;
    z-index: 2;
}

Art Direction with <picture>

Art direction means showing a differently-cropped version of an image at different sizes:

Screen	Image	Ratio
Desktop	Wide landscape panorama	16:9
Tablet	Slightly tighter crop	4:3
Mobile	Tight portrait crop, person centered	3:4 or 1:1

This is the main advantage of <picture> over CSS-only solutions — you can serve completely different images, not just the same image resized.

Serving Different Formats

The <picture> element can also serve modern image formats with fallbacks:

<picture>
    <source type="image/avif" srcset="img/hero.avif">
    <source type="image/webp" srcset="img/hero.webp">
    <img src="img/hero.jpg" alt="Hero image">
</picture>

• Browsers that support AVIF load the smallest, most efficient file
• Browsers that support WebP get the next best option
• Older browsers fall back to JPEG

Combining Media and Format

<picture>
    <!-- Mobile: WebP with JPEG fallback -->
    <source media="(max-width: 480px)" 
            type="image/webp" 
            srcset="img/hero-mobile.webp">
    <source media="(max-width: 480px)" 
            srcset="img/hero-mobile.jpg">

    <!-- Desktop: WebP with JPEG fallback -->
    <source type="image/webp" 
            srcset="img/hero-desktop.webp">
    <img src="img/hero-desktop.jpg" 
         alt="Hero image">
</picture>

srcset and sizes for Responsive Images

For content images (not art-directed), you can use srcset and sizes on a regular <img>:

<img src="img/photo-800.jpg"
     srcset="img/photo-400.jpg 400w,
             img/photo-800.jpg 800w,
             img/photo-1200.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 768px) 50vw,
            33vw"
     alt="Responsive photo">

• srcset — lists available image files and their widths (in w units)
• sizes — tells the browser how wide the image will be displayed at each breakpoint
• The browser picks the best image automatically based on screen size and pixel density

picture vs srcset — When to Use Which

Use <picture>	Use srcset + sizes
Different crops at different sizes (art direction)	Same image at different resolutions
Different file formats (WebP, AVIF)	Just optimizing for screen size
Completely different images per breakpoint	The same image, just bigger/smaller

Key Takeaways

• The <picture> element serves different images for different screen sizes and formats
• Use it for art direction — different crops for desktop vs mobile
• Use it for format switching — AVIF / WebP with JPEG fallback
• The <img> inside <picture> is required as a fallback
• For same-image-different-sizes, use srcset and sizes on a regular <img>
• Responsive images save bandwidth and improve mobile performance