Srcset Attribute: Implementation & Best Practices

The srcset attribute is an HTML property used to list multiple versions of an image file. It allows the browser to choose and display the most appropriate image based on the user's device, screen size, and resolution. Implementing this attribute is essential for optimizing page load speed and improving mobile SEO performance.

What is Srcset Attribute?

The srcset attribute (short for "source set") identifies one or more image candidate strings separated by commas. Each candidate string contains the URL of an image and an optional descriptor that tells the browser when to use that specific file. These descriptors usually define the image's intrinsic width or its pixel density.

Modern web development relies on this feature because it has been [available across browsers since July 2015] (MDN). It serves as a core part of responsive web design, ensuring the browser does not download a massive desktop-sized image for a small mobile screen.

Why Srcset Attribute matters

Using srcset directly impacts site performance and search engine visibility. It solves two primary challenges: resolution switching (sending smaller files to smaller screens) and art direction (changing image cropping for different layouts).

• Improved Page Speed: Smaller images result in faster load times. Browser [load speed is a direct ranking factor for mobile and desktop searches] (Ahrefs).
• Bandwidth Efficiency: Mobile users avoid wasting data on high-resolution images they cannot see. For example, [serving a 480px image instead of an 800px version can save 65KB per image] (MDN).
• Visual Quality: High-resolution displays (like Retina screens) receive sharper images without slowing down standard displays.
• Preloading Benefits: Browsers can identify which image to download before the main parser even looks at CSS or JavaScript, reducing the time to first meaningful paint.

How Srcset Attribute works

The browser follows a specific logic to choose an image from the srcset list. It evaluates the device's screen size, pixel density, zoom level, and network speed.

1. Read the Candidates: The browser looks at the comma-separated list of URLs and descriptors.
2. Evaluate Descriptors: It checks for width descriptors (e.g., 480w) or pixel density descriptors (e.g., 2x).
3. Check Media Conditions: If a sizes attribute is present, the browser determines which media condition is true.
4. Selection: The browser picks the first image that is bigger than the identified slot size and scales it down to fit.

Descriptors

• Width Descriptor (w): Specifies the image's real width in pixels (intrinsic size). An image that is 480 pixels wide is written as 480w.
• Pixel Density Descriptor (x): Specifies the ratio of device pixels to CSS pixels. For example, 2x is used for high-resolution screens.

Best practices

Include a fallback src attribute. Always provide a standard src attribute. Older browsers that do not support srcset will ignore it and load the fallback image instead.

Pair with the sizes attribute. When using width descriptors (w), you must include the sizes attribute. This tells the browser how much space the image will occupy on the screen before the page layout is fully calculated.

Order conditions carefully. The browser ignores everything after the first matching condition in a sizes list. Place specific media queries before general ones.

Use a graphics editor for cropping. For art direction, create distinct files that zoom in on important details. Crop a wide landscape image into a 480px wide portrait version for mobile devices.

Check PageSpeed Insights. Use Google's PageSpeed Insights tool to find recommendations for properly sizing images and saving specialized formats.

Common mistakes

Mistake: Using the px unit in a width descriptor. Fix: Use the w unit (e.g., 800w) instead of px inside the srcset list.

Mistake: Using percentages in the sizes attribute. Fix: Use viewport width (vw) or absolute pixel values (px). Percentages are not valid for the slot width in sizes.

Mistake: Including media conditions inside the sizes attribute for art direction. Fix: Use the <picture> element and <source> tags with the media attribute when you need to change the image content entirely.

Mistake: Omitting the <img> tag from inside a <picture> element. Fix: Always place the <img> tag right before the closing </picture> tag to ensure an image actually appears.

Examples

Resolution Switching (Width)

This implementation allows the browser to pick the best size based on the viewport width and the layout slots provided.

<img
  srcset="product-small.jpg 480w, product-large.jpg 800w"
  sizes="(max-width: 600px) 480px, 800px"
  src="product-large.jpg"
  alt="Detailed product view">

Resolution Switching (Pixel Density)

This version is useful when the image stays the same size on the screen but needs more detail for high-resolution displays.

<img
  srcset="logo-1x.png, logo-2x.png 2x"
  src="logo-1x.png"
  alt="Company logo">

Art Direction with Picture

Use this when you want to show a completely different image (like a crop) for mobile users.

<picture>
  <source media="(max-width: 799px)" srcset="person-portrait.jpg">
  <source media="(min-width: 800px)" srcset="person-landscape.jpg">
  <img src="person-landscape.jpg" alt="Team member photo">
</picture>

FAQ

What is the difference between srcset and the picture element? srcset on an <img> tag is primarily for resolution switching, where the browser chooses the best size of the same image. The <picture> element is for art direction, where you might want to show a different crop or a different image entirely based on the screen size.

Is srcset supported by all browsers? Most modern desktop and mobile browsers have supported srcset since mid 2015. Older browsers will simply ignore it and use the image defined in the src attribute, making it a safe, progressive enhancement.

Why can't I just use CSS or JavaScript to swap images? Browsers pre-load images before they even read CSS or JavaScript. If you use JavaScript to swap sources, the browser might have already downloaded the large desktop image, wasting bandwidth. srcset provides this information to the browser early.

Should I use srcset for logos or icons? Vectors (SVG) are generally better for simple logos and interface elements because they scale perfectly at any size. Use srcset for raster images like photos (JPEGs) where vector formats are too complex to create.

How do I test if srcset is working? You can use browser developer tools. Open the Network tab, clear the cache, and resize your browser window. Only the selected image version should download. Note that some browsers will not download a smaller version if a larger version is already in the cache.