Srcset

What is srcset?

The srcset attribute is an HTML feature that allows you to specify multiple image sources for a single <img> element. It gives browsers the ability to choose the most appropriate image based on factors like screen size, resolution, and network conditions. Instead of loading one-size-fits-all images that might be too large for mobile devices or too small for high-resolution displays, srcset enables responsive images that adapt to the user's viewing environment.

How does srcset work with different screen resolutions?

When a browser encounters an image with the srcset attribute, it evaluates the available options against the current viewing conditions. The browser considers the device's pixel density (often expressed as a device pixel ratio or DPR) and the viewport width to select the optimal image. For high-resolution displays like Retina screens, the browser can choose a higher-resolution version of the image, while standard-resolution devices receive appropriately sized images. This selection process happens automatically, with the browser making decisions based on its own algorithms for balancing quality and performance.

Why is srcset important for website performance?

Srcset significantly improves website performance by delivering appropriately sized images to each device. Without srcset, you'd typically serve a single large image to ensure quality on high-resolution screens, forcing mobile users to download unnecessarily large files. This wastes bandwidth, increases load times, and drains battery life on mobile devices. By implementing srcset, you can reduce page weight by up to 70% for users on smaller screens or lower-resolution devices. This optimization directly improves Core Web Vitals metrics like Largest Contentful Paint (LCP), enhancing both user experience and search engine rankings.

What's the difference between srcset and sizes attributes?

While srcset provides the browser with multiple image options, the sizes attribute tells the browser how large the image will appear in the layout at various viewport widths. Srcset alone lets browsers choose based on device resolution, but without sizes, it doesn't account for how your CSS might display that image. The sizes attribute provides this crucial layout information, helping browsers make even smarter decisions about which image to download. Think of srcset as providing the menu of image options, while sizes explains how much space is available on the plate.

How do you implement srcset in your HTML?

Implementing srcset involves adding the attribute to your image tags along with width descriptors for each source. Here's a basic implementation:

<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: 1200px) 800px,
         1200px"
  alt="Responsive image example">

In this example, we provide three image versions (400, 800, and 1200 pixels wide). The "w" unit tells the browser the width of each image. The sizes attribute then indicates how much space the image will occupy at different viewport widths. For best results, create image versions at common breakpoints in your design, and always include a fallback src attribute for browsers that don't support srcset.