srcset and sizes are key properties for HTML implementation of responsive images. srcset provides multiple image sources and their width or pixel density, such as 400w and 800w, and the browser selects the appropriate image accordingly; sizes defines the display width of the image under different screen widths, such as (max-width: 600px) 100vw, 50vw, so that the browser can more accurately match the image size. In actual use, you need to prepare multi-size pictures, clearly named, design layout in accordance with media query, and test the performance of the equipment to avoid ignoring sizes or unit errors, thereby saving bandwidth and improving performance.

When web pages are loading, images often occupy the maximum bandwidth. In order to enable different devices to efficiently load images of the right size, HTML provides srcset and sizes properties to implement responsive images.

What is srcset ?

srcset allows you to provide multiple image sources for your browser and tell it the width or pixel density of those images. In this way, the browser can select the most suitable picture to load according to the screen size and resolution of the current device.

For example:

 <img src="/static/imghw/default1.png"  data-src="image-400w.jpg"  class="lazy" 
     srcset="image-400w.jpg 400w, image-800w.jpg 800w, image-1200w.jpg 1200w"
     alt="Example Picture">

In the above code, the browser will select a suitable image file from the srcset list based on the available space and device pixel ratio.

Key points:

• Each image is followed by its width (ends with w ), such as 400w
• The browser makes judgments based on the viewport size, scaling ratio and other factors

What is the function of sizes ?

Although srcset provides multiple images, the browser does not know how big the image will appear on the page. At this time, sizes are needed to tell the browser: "How wide should this image be displayed under different screen widths."

For example:

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

The meaning of this line sizes is:

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

Benefits of using in combination with srcset :

• The browser can more accurately select the "just right" image size
• Avoid loading of images that are too large or too small, saving bandwidth and improving performance

Suggestions in actual use

To better utilize these two properties, you can follow the following practical suggestions:

• Prepare pictures of multiple sizes : It is recommended to generate 3 to 4 versions of common widths (such as 400px, 800px, 1200px)
• Clear naming : For example, use -400w.jpg and -800w.jpg to mark the image width
• Design layout in conjunction with media query : Ensure that the breakpoints in sizes are consistent with CSS media query
• Test the performance of different devices : Chrome DevTools can be used to simulate different devices to see which picture is loaded

If you use CMS or static website generators, many support automatically generating srcset and pictures of different sizes, which can save you the hassle of manual processing.

Don't ignore small details

Some developers only write srcset but ignore sizes , so that the browser can only roughly judge the image size based on the viewport width, which may lead to the wrong image selection. Especially when the picture is not full screen width, adding sizes can truly give full play to the responsive advantage.

Another easy place to make mistakes is that the unit writes incorrectly, such as writing w as px or missing w , which will cause the browser to fail to parse correctly.

Basically that's it. The rational use of srcset and sizes can not only improve the loading speed, but also improve the browsing experience of mobile users.

The above is the detailed content of Implementing Responsive Images with the HTML srcset and sizes Attributes. For more information, please follow other related articles on the PHP Chinese website!