Implement Responsive Images for Better Performance

Implement responsive images using modern HTML techniques:

Step 1: Use srcset for Different Resolutions

<!-- Basic responsive image -->
<img 
    src="image-800w.jpg" 
    srcset="image-400w.jpg 400w,
            image-800w.jpg 800w,
            image-1200w.jpg 1200w"
    sizes="(max-width: 600px) 400px,
           (max-width: 900px) 800px,
           1200px"
    alt="Responsive image example"
    loading="lazy"
/>

Step 2: Use Picture Element for Art Direction

<!-- Different crops for different screen sizes -->
<picture>
    <!-- Mobile: square crop -->
    <source 
        media="(max-width: 600px)" 
        srcset="hero-mobile-400w.jpg 400w,
                hero-mobile-800w.jpg 800w"
        sizes="100vw"
    />

    <!-- Tablet: 16:9 crop -->
    <source 
        media="(max-width: 1200px)" 
        srcset="hero-tablet-800w.jpg 800w,
                hero-tablet-1600w.jpg 1600w"
        sizes="100vw"
    />

    <!-- Desktop: wide crop -->
    <source 
        srcset="hero-desktop-1200w.jpg 1200w,
                hero-desktop-2400w.jpg 2400w"
        sizes="100vw"
    />

    <!-- Fallback -->
    <img 
        src="hero-desktop-1200w.jpg" 
        alt="Hero image"
        loading="lazy"
    />
</picture>

Step 3: Modern Format Support

<!-- Progressive enhancement with modern formats -->
<picture>
    <!-- AVIF for supported browsers -->
    <source 
        type="image/avif"
        srcset="image-400w.avif 400w,
                image-800w.avif 800w,
                image-1200w.avif 1200w"
        sizes="(max-width: 600px) 400px,
               (max-width: 900px) 800px,
               1200px"
    />

    <!-- WebP for supported browsers -->
    <source 
        type="image/webp"
        srcset="image-400w.webp 400w,
                image-800w.webp 800w,
                image-1200w.webp 1200w"
        sizes="(max-width: 600px) 400px,
               (max-width: 900px) 800px,
               1200px"
    />

    <!-- JPEG fallback -->
    <img 
        src="image-800w.jpg"
        srcset="image-400w.jpg 400w,
                image-800w.jpg 800w,
                image-1200w.jpg 1200w"
        sizes="(max-width: 600px) 400px,
               (max-width: 900px) 800px,
               1200px"
        alt="Optimized responsive image"
        loading="lazy"
    />
</picture>

Step 4: CSS for Responsive Images

/* Ensure images don't overflow containers */
img {
    max-width: 100%;
    height: auto;
}

/* Object-fit for maintaining aspect ratios */
.hero-image {
    width: 100%;
    height: 400px;
    object-fit: cover;
    object-position: center;
}

/* Responsive containers */
.image-container {
    width: 100%;
    max-width: 1200px;
    margin: 0 auto;
}

@media (max-width: 768px) {
    .hero-image {
        height: 250px;
    }
}