Implementing Responsive Images in 2023

Why Responsive Images Matter

With the diversity of devices and screen sizes today, serving the same image to all users is inefficient. Responsive images provide:

• Faster loading on mobile devices with smaller screens
• Better quality on high-DPI (Retina) displays
• Reduced bandwidth usage for all users
• Improved performance metrics (Core Web Vitals)

The srcset Attribute

The srcset attribute allows browsers to choose the most appropriate image source based on:

• Viewport width
• Device pixel ratio
• Network conditions (with the sizes attribute)

Basic srcset Example

<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 768w,
             large.jpg 1200w"
     alt="Responsive image example">

The sizes Attribute

The sizes attribute tells the browser how much space the image will occupy in the layout, allowing it to select the most appropriate source:

sizes Example

<img src="small.jpg"
     srcset="small.jpg 480w,
             medium.jpg 768w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 768px,
            1200px"
     alt="Responsive image with sizes">

The picture Element

The <picture> element provides more control, allowing different image sources based on media queries and format support:

picture Element Example

<picture>
    <source media="(min-width: 1200px)" 
            srcset="large.webp 1x,
                    large-2x.webp 2x"
            type="image/webp">
    <source media="(min-width: 1200px)"
            srcset="large.jpg 1x,
                    large-2x.jpg 2x">
    <source srcset="medium.webp 1x,
                   medium-2x.webp 2x"
            type="image/webp">
    <img src="medium.jpg" 
         srcset="medium-2x.jpg 2x"
         alt="Advanced responsive image">
</picture>

Art Direction

Art direction involves serving different cropped or composed images at different breakpoints:

Art Direction Example

<picture>
    <source media="(min-width: 768px)" 
            srcset="desktop-view.jpg">
    <img src="mobile-view.jpg" 
         alt="Different crops for different viewports">
</picture>

Modern Best Practices

1. Use WEBP with Fallbacks

Combine responsive images with modern formats:

<picture>
    <source srcset="image.webp" type="image/webp">
    <img src="image.jpg" alt="WEBP with JPG fallback">
</picture>

2. Implement Lazy Loading

Use native lazy loading for offscreen images:

<img src="image.jpg" loading="lazy" alt="Lazy loaded image">

3. Consider CDN Solutions

Many CDNs offer automatic responsive image generation:

• Cloudinary
• Imgix
• Akamai Image Manager
• Fastly Image Optimizer