The image information on the website needs to be displayed using the IMG tag. There is a rarely used attribute -srcset in the img element, which is used by the browser to load the corresponding image resource according to the width, height, and pixel density.
The displayed image can be responsive through the srcset attribute, providing images of different sizes for devices of different sizes. Mobile devices display small size images. Tablets display medium-sized images. Desktop displays large images. This avoids downloading unnecessary image data on smaller devices and improves the performance of the website on these devices.
Use srcset Attribute of IMG Tag
srcset Attribute Format
Image address width description w, pixel density description x, and multiple resources are separated by commas. E.g:
<img src="small.jpg " srcset="big.jpg 1440w, middle.jpg 960w, small.jpg 1x" />
The above example means that middle.jpg is loaded when the browser width reaches 960px. When it reaches 1440px, load big.jpg, otherwise display small.jpg image. Of course, if the browser does not support the srcset attribute, the default is the src attribute.
Please note that w is a description of the width of the image, and this will directly affect the browser's selection of the image. The standard selected by the browser is to select a picture with a smaller ratio (always a large number/decimal number) in the two directions of the increase and decrease of the w value according to the exact value calculated by the sizes and DPR. The pixel density description is only valid for fixed-width images.
sizes Attribute
Shortly after the browser downloads the HTML page, it will continue to request CSS and js resources img resources. However, the requests for CSS, js, and img are not prioritized, so the browser does not know the layout of the page. So, I don't know anything about the size of the image. The only thing the browser knows is the size of the viewport, but that's not enough to choose the best image source for the browser.
The size attribute of img is to tell the browser to choose the best image source from srcset according to the calculated value of screen size and pixel density.
sizes Attribute Format
Media query Width description (support px), multiple rules separated by commas.
<img src="img/gun.png" srcset=" img/bg_star.jpg 1200w, img/share.jpg 800w, img/gun.png 320w" sizes="(max-width: 320px) 300w, 1200w"/>
The first part is the media case, it's not a media query. But it is similar to a media query, enclosed in parentheses. The second part is the value of the length unit, which can be px, vw, or other units.
The above example means that the image width is 300px when the browser viewport is 320px, and 1200px otherwise.
How Do Sizes Work?
First, the browser will read the sizes and then choose according to the media situation. If a value is matched, it is multiplied by the screen pixel density according to the length value unit of this value. The resulting value is then matched with the width description in srcset to select the image.
1. Select the value in size according to the media.
2. Take the length value in the value * the screen pixel density to get the final width.
3. The final width matches the width description in srcset to get the final image.
Please note that the decision logic for choosing images for different viewport widths may vary from browser to browser, and you may see different results. Downloading fewer image data for smaller devices allows the browser to display those images quickly, thereby improving the performance of your website.
Summary
Using responsive images avoids downloading unnecessary image data, reducing the loading time of your website and providing a better user experience. The only downside is that we give up full control over the browser and let the browser choose which image to display at a specific viewport width.
Each browser has a different strategy for choosing appropriate responsive images. This is why you may see different images loaded at the same resolution in different browsers. Relinquish control of the browser and display images based on the viewport width to gain performance benefits, you need to make trade-offs in practice.
1. The srcset of the img tag can be used to process the selective display of images on the page on terminal devices with different pixel densities.
2. The function of sizes is to tell the browser to select the best image source from srcset according to the calculated values of screen size and pixel density.