Optimagio

Master Responsive Images: A Practical Guide to srcset & sizes Attributes

Learn how to use srcset and sizes attributes to serve perfectly sized images for every device, reducing bandwidth and improving performance.

Optimagio Team 4 min read
Master Responsive Images: A Practical Guide to srcset & sizes Attributes

Why Responsive Images Matter More Than Ever

In today's multi-device world, serving the same massive image to a smartphone and a 4K desktop display is both wasteful and performance-killing. Oversized images consume unnecessary bandwidth, slow down page loading, and hurt user experience—especially on mobile networks. The srcset and sizes attributes provide native HTML solutions that let browsers intelligently select the most appropriate image source based on the user's device capabilities and viewport size.

Understanding srcset: The Foundation of Responsive Images

The srcset attribute allows you to provide multiple image sources with metadata that helps the browser choose the best one. There are two primary approaches: pixel density switching (using 'x' descriptors) and viewport-based selection (using 'w' descriptors). 

<!-- Pixel density switching -->
<img src="image.jpg"
     srcset="image.jpg 1x, [email protected] 2x, [email protected] 3x"
     alt="Example image">

<!-- Viewport-based selection -->
<img src="image-800.jpg"
     srcset="image-400.jpg 400w, image-800.jpg 800w, image-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw, 50vw"
     alt="Responsive example">

Mastering the sizes Attribute for Layout-Aware Selection

The sizes attribute is crucial when using 'w' descriptors in srcset. It tells the browser how much space the image will occupy in the layout at different breakpoints. This information, combined with the viewport width and device pixel ratio, enables the browser to calculate which image source will be most appropriate.

  1. 1Analyze your layoutDetermine how image widths change at different breakpoints in your responsive design
  2. 2Define media conditionsSpecify viewport conditions using media queries like (max-width: 600px)
  3. 3Set width valuesDefine how much viewport width the image occupies under each condition (e.g., 100vw, 50vw)
  4. 4Include default valueAlways provide a default width value that applies when no media conditions match

Practical Implementation: Building Your Responsive Image Stack

Implementing responsive images requires careful planning of your image sizes and breakpoints. Start by identifying your layout's maximum image width and create a set of optimized images that cover your design's range.

Common Pitfalls and Best Practices

Even experienced developers can stumble with responsive images. Understanding these common mistakes will help you avoid them and implement robust responsive image solutions.

Do
  • Test across devicesVerify image selection works correctly on various screen sizes and resolutions
  • Use modern formatsServe WebP or AVIF to supported browsers for additional compression benefits
  • Include fallback srcAlways provide a default src attribute for browsers that don't support srcset
Don't
  • Overcomplicate sizesAvoid overly complex media queries that are hard to maintain and debug
  • Skip testingDon't assume browser selection works perfectly—test with different network conditions
  • Forget alt textAccessibility matters—always include meaningful alt attributes

Advanced Techniques: Combining with Modern Image Formats

Responsive images work exceptionally well when combined with modern formats like WebP and AVIF. Using the picture element with source elements allows you to serve format-appropriate images while maintaining responsive sizing. 

<picture>
  <source 
    type="image/avif"
    srcset="image-400.avif 400w, image-800.avif 800w"
    sizes="(max-width: 600px) 100vw, 50vw">
  <source 
    type="image/webp"
    srcset="image-400.webp 400w, image-800.webp 800w"
    sizes="(max-width: 600px) 100vw, 50vw">
  <img 
    src="image-800.jpg"
    srcset="image-400.jpg 400w, image-800.jpg 800w"
    sizes="(max-width: 600px) 100vw, 50vw"
    alt="Advanced responsive example">
</picture>

Automate image optimization with Optimagio

Doing this by hand for every image does not scale. Optimagio optimizes and converts your images (WebP and AVIF) automatically across your API, web app, and CMS — so every page ships the smallest possible files without manual work. See plans and pricing →

#frontend#html#optimization#performance#responsive-images#web-development
FAQ

Frequently asked questions

What's the difference between srcset with 'w' and 'x' descriptors?

The 'w' descriptor (width) is used for viewport-based responsive images, while the 'x' descriptor is for pixel density switching. Use 'w' when you have multiple image sizes for different screen widths, and 'x' when you have standard and high-resolution versions of the same image.

Do I need both srcset and sizes attributes?

Yes, when using 'w' descriptors in srcset, you must include the sizes attribute. The sizes attribute tells the browser how much space the image will occupy in the layout, which is essential for selecting the appropriate source from the srcset.

How do I calculate the optimal image sizes for my srcset?

Calculate image sizes based on your breakpoints and maximum layout width. Typically include 3-5 sizes covering your design's range, with the largest being 1.5-2× your maximum layout width to account for high-DPI displays.

What happens if a browser doesn't support srcset?

Browsers that don't support srcset will fall back to the default src attribute. This ensures backward compatibility while modern browsers get the benefits of responsive image loading.

Can I use srcset with the picture element?

Yes, srcset can be used within source elements inside a picture element for art direction (different crops or images at breakpoints) combined with responsive sizing for each source.