Responsive Images: Selecting by Viewport Size

 Responsive Images: Selecting by Viewport Size

In the previous session, we explored how the srcset attribute and the <img> element work together to deliver the right image based on device pixel density. Browsers could intelligently load higher-resolution images for Retina displays and standard-resolution images for regular screens. However, that approach assumed the image would always display at a fixed size on the screen.

What happens when you need more control? What if the same image needs to be displayed at different dimensions depending on whether a user is viewing your site on a mobile phone, tablet, or desktop computer? This is where viewport-aware responsive images come into play, enabling the browser to make decisions based on both the screen's pixel density and the available display space.

Responsive images adapt to different viewport sizes and pixel densities across devices

The Problem with Fixed Density Descriptors

Let's say you're designing a blog layout. On mobile devices, your main image spans the full width of the viewport. On tablets, it occupies about 50% of the width. On desktops, it takes up just one-third of the screen. Using only density descriptors (the 1x, 2x, 3x approach) won't solve this problem because they don't account for viewport width changes.^[1]

Consider this simple example:

<img src="nature-400.jpg"
     srcset="nature-800.jpg 2x"
     alt="Mountain landscape">

This approach works fine if the image always displays at the same size. But if your CSS makes the image scale based on the viewport, you're still wasting bandwidth. A user on a narrow mobile screen with a 2x display might receive an unnecessarily large image.

Introducing Width Descriptors and the Sizes Attribute

The solution involves combining two key features: the width descriptor in srcset and the sizes attribute on the image element. These work together to give the browser the information it needs to choose the optimal image file based on the actual display circumstances.^[2]

The width descriptor tells the browser the actual resolution of each image file you provide. Instead of specifying 1x or 2x, you specify the image width in pixels followed by the letter "w". For example:^[3]

<img src="nature-400.jpg"
     srcset="nature-400.jpg 400w,
             nature-800.jpg 800w,
             nature-1200.jpg 1200w"
     alt="Mountain landscape">

This tells the browser: "I have three versions of this image available. The first is 400 pixels wide, the second is 800 pixels wide, and the third is 1200 pixels wide."

But the browser still needs to know how the image will actually be sized on your page. This is where the sizes attribute comes in:^[1]

<img src="nature-400.jpg"
     srcset="nature-400.jpg 400w,
             nature-800.jpg 800w,
             nature-1200.jpg 1200w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="Mountain landscape">

Width descriptors and sizes attribute work together to optimize image delivery

Understanding the Sizes Attribute

The sizes attribute describes how your image scales across different viewport widths. It uses media queries to define breakpoints and corresponding image sizes. The attribute is evaluated before the browser downloads any images, allowing it to make the optimal choice upfront.^[2]

Breaking down our example:^[2]

·         (max-width: 600px) 100vw: On screens 600px wide or smaller, display the image at 100% of the viewport width

·         (max-width: 1200px) 50vw: On screens between 601px and 1200px wide, display the image at 50% of the viewport width

·         33vw: On screens wider than 1200px, display the image at 33% of the viewport width

The values use viewport width units (vw), where 100vw equals the full viewport width. You can also use other units like pixels or even calculated values such as calc(33vw - 100px) for more sophisticated layouts.^[1]

The browser processes the sizes attribute by selecting the first condition that evaluates to true, or the last item if all conditions are false. This means your condition order matters.^[1]

How the Browser Makes Its Decision

Now, armed with both the available image widths and the display sizes, the browser can make an intelligent choice:^[4]

1.       The browser checks the current viewport width

2.      It evaluates the sizes attribute and determines how wide the image will actually be displayed

3.      It multiplies this display size by the device pixel ratio to calculate the ideal image resolution needed

4.      From your srcset options, it selects the smallest image that meets or exceeds this calculated resolution

For example, on a tablet with a 1200px viewport and a 2x pixel ratio, if the sizes attribute indicates 50vw, the browser calculates that it needs an image approximately 1200px wide (600px display width × 2). It would then select the nature-1200.jpg file. This algorithm ensures users never receive unnecessarily large files while guaranteeing image quality matches their device capabilities.^[4]

The Picture Element: Art Direction

Sometimes you need even more control. Different viewport sizes might call for different compositions of the same scene, different crops, or entirely different photographs. This is where the HTML <picture> element shines.^[5]

The <picture> element lets you specify completely different images for different viewport ranges:

<picture>
  <source media="(max-width: 600px)" srcset="nature-mobile.jpg">
  <source media="(max-width: 1200px)" srcset="nature-tablet.jpg">
  <img src="nature-desktop.jpg" alt="Mountain landscape">
</picture>

The browser reads these conditions from top to bottom and loads the first image whose media condition evaluates to true. If none match, it falls back to the <img> element.^[6]

This approach is called "art direction" because you're directing which artistic version of an image appears at different breakpoints. A mobile version might show a tighter crop to focus on key details, a tablet version might show a medium crop, and a desktop version might reveal the full scene with surrounding context.^[5]

Combining Multiple Techniques

You can even combine width descriptors, the sizes attribute, and the picture element to create highly optimized, responsive images:^[4]

<picture>
  <source media="(max-width: 600px)"
          srcset="mobile-small.jpg 400w, mobile-large.jpg 800w"
          sizes="100vw">
  <source media="(max-width: 1200px)"
          srcset="tablet-small.jpg 600w, tablet-large.jpg 1200w"
          sizes="50vw">
  <img src="desktop-large.jpg" alt="Mountain landscape">
</picture>

This markup provides multiple options at each breakpoint, accounting for both viewport size and device pixel density. Each <source> element can include its own srcset and sizes attributes.^[6]

Format Switching with Picture

The <picture> element also enables format switching. You can serve modern image formats to browsers that support them while maintaining fallbacks for older browsers:^[5]

<picture>
  <source srcset="image.webp" type="image/webp">
  <source srcset="image.png" type="image/png">
  <img src="image.jpg" alt="Description">
</picture>

The browser will use the first format it recognizes and supports. This allows you to take advantage of newer, more efficient image formats like WebP while ensuring older browsers still receive compatible alternatives.^[6]

Practical Considerations

When implementing responsive images, remember these best practices:

Plan your breakpoints strategically. Common breakpoints align with typical device widths around 480px for mobile, 768px for tablets, and 1024px or higher for desktops. However, let your design guide your breakpoints rather than industry standards.^[7]

Prepare multiple image versions. You'll need to create or generate several versions of each image at different resolutions. Modern build tools and cloud-based image services can automate this process, generating responsive variants from a single high-quality source.^[8]

Use accurate fallbacks. The fallback image in the <img> element should be a reasonably good choice if none of your more specific options apply. Many developers use a medium-sized version, around 800px wide, which provides acceptable quality on both small and medium-sized devices.^[9]

Consider performance. Responsive images help reduce bandwidth usage by serving appropriately sized images. This is especially valuable for mobile users on slower connections, where saving even hundreds of kilobytes can significantly improve the experience.^[8]

Test across devices. Use browser developer tools to test your responsive image implementation on simulated devices of various sizes and pixel densities to verify your choices are working as intended.^[10]

Comparing Approaches

The technique you choose depends on your needs:

Technique	Best For	Advantages	Limitations
Density Descriptors (1x, 2x)	Fixed-width images	Simple syntax, minimal markup	Doesn't handle viewport-based sizing
Width Descriptors + Sizes	Flexible images across breakpoints	Saves bandwidth, accounts for device density and viewport	Requires more planning and image preparation
Picture Element	Art direction, format switching	Maximum control over imagery and appearance	More complex markup, larger file size

 

Browser Support

Both the `srcset` with sizes attribute and the `<picture>` element enjoy excellent browser support. Modern versions of Chrome, Firefox, Safari, and Edge all support these features. Older browsers simply fall back to the `src` attribute of the `<img>` element, ensuring your content remains accessible.[^1_10]

The Evolution of Web Imagery

Moving from fixed density selection to viewport-aware responsive images represents an important evolution in web design. It acknowledges that websites must adapt not just to device capabilities but to the actual space available for displaying content.

By understanding how these features work together, you can build websites that deliver optimal visual experiences across the full spectrum of devices. Users benefit from faster load times and better visual quality, while your servers benefit from reduced bandwidth consumption.^[10]

The next time you're designing a responsive layout, take a moment to consider whether different viewport sizes should display your images differently. If the answer is yes, you now have the tools and knowledge to make it happen.

⁂

1.       https://stackoverflow.com/questions/47460761/responsive-images-srcset-and-sizes-attribute-how-to-use-both-correctly-devi   

2.      https://flaviocopes.com/html-responsive-images-srcset/  

3.      https://cloudfour.com/thinks/responsive-images-101-part-4-srcset-width-descriptors/

4.      https://uxdesign.cc/responsive-design-youre-doing-it-wrong-d88a52e1d5f7  

5.       https://blog.pixelfreestudio.com/the-importance-of-html5-picture-element-for-responsive-images/  

6.      https://developer.mozilla.org/en-US/docs/Web/HTML/Reference/Elements/picture  

7.       https://duitdesign.com/how-to-measure-viewport-for-responsive-web-design.html

8.      https://cloudinary.com/guides/responsive-images/what-are-responsive-images-and-6-useful-techniques 

9.      https://dev.to/razbakov/responsive-images-best-practices-in-2025-4dlb

10.   https://web.dev/articles/responsive-images 

11.    https://stackoverflow.com/questions/39844317/media-queries-make-images-responsive

12.   https://web.dev/learn/design/responsive-images

13.   https://www.youtube.com/watch?v=v02MRRWTUr8

14.   https://techblog.holidaycheck.com/post/2017/12/22/responsive-images-srcset-and-sizes

15.    https://www.smashingmagazine.com/2014/05/responsive-images-done-right-guide-picture-srcset/

16.   https://www.srcset.tips/en/density-descriptors/

17.    https://stackoverflow.com/questions/77067629/html-picture-tag-with-media-queries-and-multiple-file-formats

18.   https://www.w3schools.com/html/html_images_picture.asp

19.   https://www.reddit.com/r/web_design/comments/13sgqe7/html_different_image_based_on_media_condition/