The srcset attribute provides image files of different resolutions or sizes, allowing the browser to select the most appropriate image based on the device's screen size, pixel density and network conditions, thereby improving page loading speed and visual quality. 1. When using the width descriptor (w), images of different widths need to be listed in the srcset (such as 480w, 800w), and the display width of the image at different breakpoints is defined with the sizes attribute, so that the browser can select the best image based on this; 2. When using the pixel density descriptor (x), corresponding images can be provided for standard screens (1x), Retina screens (2x), etc., suitable for scenes where only pixel density needs to be adapted; 3. Combining srcset and sizes can achieve fully responsive images, and automatically select appropriate images in different layouts; 4. Best practices include always providing src fallback images, using sizes only when using the w descriptor, optimizing image file size, and testing through real devices or developer tools. Correct use of srcset and sizes can achieve efficient and clear responsive image loading without JavaScript, ultimately improving cross-device user experience.

The srcset attribute in HTML helps deliver the right image to users based on their device's screen size and resolution, improving page load times and visual quality. It's a key tool for responsive images.

Here's how to use it effectively.

What srcset does

The srcset attribute lets you define multiple image files with different resolutions or sizes. The browser then picks the most appropriate one depending on factors like screen width, pixel density (eg, Retina displays), and network conditions.

You use it on the <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175412214874819.jpeg" class="lazy" alt="How to use the srcset attribute for responsive images in HTML" > tag, typically along the sizes attribute for more control.

Using srcset with width descriptors

The most common and practical way to use srcset is by specifying image files with different widths using width descriptors ( w ).

 <img src="/static/imghw/default1.png"  data-src="small.jpg"  class="lazy"
     srcset="small.jpg 480w,
             medium.jpg 800w,
             large.jpg 1200w"
     sizes="(max-width: 600px) 480px,
            (max-width: 1000px) 800px,
            1200px"
     alt="A responsive image">

Breakdown:

• src : Fallback image for older browsers.
• srcset :
  • Lists image files and their widths ( 480w , 800w , etc.).
  • The w unit tells the browser the natural width of each image.
• sizes :
  • Tells the browser how much space the image will take up on the page at different breakpoints.
  • Uses media conditions to match CSS layout behavior.

Example: On a screen smaller than 600px, the browser knows the image will be displayed at 480px wide, so it'll likely pick small.jpg .

Using srcset with pixel density (x descriptors)

For high-DPI (Retina) screens, you can serve crisper images using pixel density descriptors ( 1x , 2x , 3x ).

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy"
     srcset="image.jpg 1x,
             image-2x.jpg 2x,
             image-3x.jpg 3x"
     alt="High-resolution image">

• 1x : Standard-resolution screen.
• 2x : High-density screen (eg, Retina).
• 3x : Very high-density (eg, some smartphones).

This method is simpler but less flexible than using width descriptors — best when you're only adjusting for screen pixel density, not layout changes.

Combine srcset and sizes for full control

For truly responsive layouts (like a full-width hero image on mobile but a sidebar image on desktop), combine both attributes.

 <img src="/static/imghw/default1.png"  data-src="default.jpg"  class="lazy"
     srcset="img-480.jpg 480w,
             img-800.jpg 800w,
             img-1200.jpg 1200w"
     sizes="(max-width: 480px) 100vw,
            (max-width: 1000px) 50vw,
            30vw"
     alt="Flexible responsive image">

• On mobile: image takes 100% of viewport width → browser picks img-480.jpg or similar.
• On medium screens: take half the width → picks img-800.jpg .
• On large screens: take 30% of width → may pick img-1200.jpg if needed.

Tips for best results

• Always include a src fallback.
• Use sizes only when using w descriptors — it's ignored with x descriptors.
• Optimize images! Delivering multiple large files defeats the purpose.
• Test on real devices or use browser dev tools to simulate different screens.

Basically, srcset sizes puts the power of responsive design into image loading — no JavaScript needed. It's not magic, but used right, it makes your site faster and looks sharper across devices.

The above is the detailed content of How to use the srcset attribute for responsive images in HTML. For more information, please follow other related articles on the PHP Chinese website!