srcset and sizes are key properties for implementing responsive images. 1. srcset is used to provide pictures with different resolutions or sizes. The browser selects the most suitable picture according to the device's pixel density and viewport size; 2. sizes tell the browser the expected size of the picture displayed under different screen widths, helping the browser select the appropriate size from the srcset; 3. When using it, it should reasonably cover multiple device needs, combine pixel density descriptor (x) and media queries, and use tools to generate multi-size pictures and marks to avoid writing only srcset, misuse sizes as CSS or ignoring fallback's src.

In building responsive websites, the adaptation of images has always been a challenge. The emergence of the two attributes of srcset and sizes is to help us display pictures of appropriate sizes on different devices, which not only ensures the display effect but also improves the loading speed. They are not used as a replacement for <img src="/static/imghw/default1.png" data-src="https://img.php.cn/upload/article/000/000/000/175364178558412.jpeg" class="lazy" alt="Understanding `srcset` and `sizes` for Responsive Images" > tags, but are key tools to enhance their responsiveness.

What is srcset ?

The purpose of srcset is to tell the browser what alternative images are available in different resolutions or sizes for the current picture. The browser will select the most suitable one based on the device's pixel density and viewport size.

You can write this way:

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy" 
  srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
  alt="A responsive image"
>

In the above writing method, each picture is followed by its width (in w ). The browser will determine which image to load based on the current viewport width and combined with the sizes attribute.

How does sizes work together?

The purpose of sizes is to tell the browser: "With different screen widths, how big this image will be displayed." Instead of controlling the CSS attributes that control the actual display size of the image, it helps the browser to select the most suitable image in srcset .

for example:

 <img src="/static/imghw/default1.png"  data-src="image.jpg"  class="lazy"
  srcset="image-320w.jpg 320w, image-480w.jpg 480w, image-800w.jpg 800w"
  sizes="(max-width: 600px) 100vw, 50vw"
  alt="Responsive image example"
>

This code means:

• If the screen width is less than or equal to 600px, the image will occupy the entire viewport width (100vw)
• Otherwise, the image width is half the viewport (50vw)

With this information, the browser can estimate the width of the image to be displayed based on the current viewport size, and then select the most suitable image size from srcset to load it.

How to use these two attributes well?

1. The picture size should reasonably cover different equipment

Don't just prepare one or two sizes. A common practice is to generate 3 to 4 image versions of different widths, such as 320px, 640px, 800px, and 1024px, which can basically cover the needs of mobile phones to desktop.

2. Don't ignore pixel density (x descriptors)

In addition to using w to describe the image width, you can also use x to represent the pixel density, such as:

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

This applies to images of fixed sizes, such as icons or logos. High-resolution screens will automatically select higher density pictures.

3. Use the appropriate media query in sizes

The media query in sizes should be as close to your CSS layout logic as possible. For example, if the width of the picture container under different screens is set in CSS, sizes should reflect these settings.

4. Tools assist in generating pictures and tags

Manually preparing images of multiple sizes is inefficient and can be automatically generated with tools, such as ImageMagick, Cloudinary, or build tool plug-ins (such as Webpack's image loader) for batch processing.

Some common misunderstandings

• Only write srcset but not sizes : In this way, the browser cannot judge how big the image should be displayed. It can only rely on guessing and easily load pictures of inappropriate sizes.
• Use sizes as CSS : It is just a prompt to help the browser make decisions and will not really control the display size of the image.
• Ignore the role of src : src is fallback. If the browser does not support srcset , src will be used.

In general, the combination of srcset and sizes allows images to be displayed clearly on different devices without wasting bandwidth. Although it is a bit complicated to use at the beginning, as long as you understand their respective functions and coordination methods, you can easily achieve responsive image loading. Basically that's it.

The above is the detailed content of Understanding `srcset` and `sizes` for Responsive Images. For more information, please follow other related articles on the PHP Chinese website!