5 Best Practices for Using Responsive Images on Websites
July 27, 2024

5 Best Practices for Using Responsive Images on Websites

Why Responsive Images are Non-Negotiable

In today's multi-device world, users access websites on everything from tiny smartphones to massive desktop monitors. Serving the same large image to all devices is incredibly inefficient, wasting bandwidth and slowing down page loads, especially on mobile connections. Responsive images solve this by allowing the browser to load the most appropriate image source based on the user's screen size, resolution, and browser capabilities.

Implementing responsive images correctly is crucial for performance and user experience. Here are five essential best practices:

1. Use srcset for Resolution Switching

The srcset attribute on the <img> tag is the cornerstone of responsive images. It allows you to provide a list of different-sized versions of the same image, letting the browser choose the best fit.

  • How it works: You provide image URLs followed by a width descriptor (w). The browser uses this information, along with the sizes attribute (see next point), to calculate which image source is closest to the required display size without downloading an unnecessarily large file.
<img 
  srcset="image-small.jpg 480w, 
           image-medium.jpg 800w, 
           image-large.jpg 1200w"
  src="image-medium.jpg" 
  alt="Descriptive alt text">
  • Best Practice: Provide several image sources covering the range of potential display sizes on your site. Common breakpoints might include sizes like 480w, 800w, 1200w, 1600w, etc., depending on your design.

2. Define Image Layout Dimensions with the sizes Attribute

While srcset provides the image options, the sizes attribute tells the browser how much space the image is intended to occupy within your page layout at different viewport widths. This information is crucial for the browser to accurately select the best source from srcset.

  • How it works: sizes uses a comma-separated list of media conditions (like (max-width: 600px)) followed by the width the image will take up under that condition (e.g., 100vw, 50vw, 300px). The last item without a media condition acts as the default.
<img 
  srcset="image-small.jpg 480w, 
           image-medium.jpg 800w, 
           image-large.jpg 1200w"
  sizes="(max-width: 600px) 100vw, 
         (max-width: 900px) 50vw, 
         33vw" 
  src="image-medium.jpg" 
  alt="Descriptive alt text">
  • Best Practice: Be precise with sizes. Inspect your CSS to determine how wide the image slot is at various viewport breakpoints. Incorrect sizes values can lead the browser to download the wrong image source.

3. Employ <picture> for Art Direction and Format Switching

Sometimes, simply scaling an image isn't enough. You might want to show a different crop or even a completely different image on smaller screens (art direction). You also might want to serve modern formats like WebP or AVIF with fallbacks.

  • How it works: The <picture> element acts as a wrapper containing multiple <source> elements and a final <img> tag. The browser evaluates the <source> elements (which can have media attributes for art direction or type attributes for format switching) and picks the first matching one. The <img> acts as the default fallback.
<!-- Art Direction Example -->
<picture>
  <source media="(max-width: 799px)" srcset="image-portrait.jpg">
  <source media="(min-width: 800px)" srcset="image-landscape.jpg">
  <img src="image-landscape.jpg" alt="Descriptive alt text">
</picture>

<!-- Format Switching Example -->
<picture>
  <source srcset="image.avif" type="image/avif">
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.jpg" type="image/jpeg">
  <img src="image.jpg" alt="Descriptive alt text">
</picture>
  • Best Practice: Use <picture> when you need different crops, aspect ratios, or want to serve modern formats with reliable fallbacks. Remember you can combine srcset and sizes within a <source> element too!

4. Combine Responsive Images with Lazy Loading

Responsive images ensure the right image is downloaded, but lazy loading ensures it's downloaded only when needed. Deferring the loading of images that are initially off-screen significantly improves initial page load time.

  • How it works: Add the loading="lazy" attribute to your <img> tag (or the <img> inside <picture>).
<img 
  srcset="..." 
  sizes="..." 
  src="..." 
  loading="lazy" 
  alt="...">
  • Best Practice: Apply loading="lazy" to most images, especially those below the initial viewport (below the fold). Avoid lazy-loading critical above-the-fold images (like logos or hero images) as it can slightly delay their appearance.

5. Always Optimize Your Image Sources

Responsive image techniques are only effective if the source images themselves are optimized. Providing multiple large, uncompressed files defeats the purpose.

  • How it works: Before creating different sizes for srcset or <picture>, ensure your original image is saved in the most appropriate format (WebP, AVIF, JPEG, PNG - see our format comparison) and compressed effectively (see our optimization techniques).
  • Best Practice: Integrate image optimization into your workflow. Resize images appropriately for each breakpoint/source you define and apply suitable compression to minimize file size without unacceptable quality loss.

Conclusion

Implementing responsive images using srcset, sizes, and the <picture> element, combined with lazy loading and proper source optimization, is essential for modern web development. By following these best practices, you can ensure your website delivers images efficiently, leading to faster load times, reduced bandwidth usage, better SEO, and a much-improved experience for all your users, regardless of their device.