How does the sizes attribute work with srcset in HTML5?

The sizes attribute is used in conjunction with the srcset attribute to help the browser select the most suitable responsive image according to the page layout size and device characteristics; 1. srcset provides multiple image files and width (w) or pixel density (x) descriptors; 2. sizes inform the browser of the layout width of the image under different viewports through media query and viewport units (such as vw); 3. The browser calculates the rendering width of the image based on the device pixel ratio, and selects the smallest suitable image to meet the layout requirements from the srcset based on the device pixel ratio; 4. When srcset uses the w descriptor, sizes must be provided, otherwise the browser cannot judge the layout size; 5. If srcset only uses x descriptors (such as 1x, 2x), sizes do not need sizes; 6. sizes should reflect the CSS layout, such as "(max-width: 600px) 100vw, 50vw" means the full width of the small screen and the half width of the large screen; in short, sizes provide layout information, and srcset provides resource options, and the two jointly achieve efficient and intelligent image loading.

The sizes attribute works together with the srcset attribute in HTML5 to help browsers choose the most appropriate image from a set of responsive images, based on the layout size of the image on the page and the device characteristics like screen width and pixel density.

Here's how they work together:

Understanding srcset and sizes

The srcset attribute lists multiple image files along with descriptors—either width ( w ) or pixel density ( x )—so the browser can pick the best one. When you use width descriptors ( w ), the sizes attribute becomes necessary to tell the browser how much space the image will take up on the page at different viewport sizes.

Example:

 <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy"
     srcset="small.jpg 500w, medium.jpg 1000w, large.jpg 1500w"
     sizes="(max-width: 600px) 100vw, (max-width: 900px) 50vw, 33vw"
     alt="Responsive image">

How the browser selects the image

1. The browser checks the sizes attribute to determine the rendered width of the image based on the current viewport.

   • If the viewport is 500px wide → 100vw = 500px
   • If the viewport is 800px wide → 50vw = 400px
   • If the viewport is 1200px wide → 33vw ≈ 396px

2. It uses this layout width to evaluate which image in the srcset best matches that size, considering device pixel ratio (eg, Retina screens may prefer higher-density images).

   

3. It selects the smallest image in srcset that is at least as wide as the calculated layout size (after accounting for pixel density). This minimizes download size while maintaining quality.

Key points about sizes

• sizes contain a list of media conditions and length values .
• Each media condition (like (max-width: 600px) ) is optional. If none match, the last length is used.
• The length can be in vw , px , % , etc., but vw is most common for responsive layouts.
• It does not control styling—it only informs the browser about layout size for image selection.

When you don't need sizes

• If srcset uses pixel density descriptors ( 1x , 2x ), like:

   srcset="image.jpg, image-2x.jpg 2x, image-3x.jpg 3x"

  Then sizes is not required , because the browser picks based on screen resolution, not layout width.

• If you're using srcset with w descriptors, always include sizes , or the browser won't know how to choose.

Practical tip

Use sizes to reflect your CSS layout:

 <!-- On mobile: full width; on desktop: half width -->
sizes="(max-width: 600px) 100vw, 50vw"

This tells the browser: “This image will be the full viewport width on small screens, and half on larger ones.”

So, in short:
sizes tells the browser how big the image will be in the layout.
srcset tells the browser what image files are available .
Together, they enable smart, efficient image loading.

Basically, without sizes , the browser can't make good decisions when you're offering different-width images.

The above is the detailed content of How does the sizes attribute work with srcset in HTML5?. For more information, please follow other related articles on the PHP Chinese website!