On the Srcset attribute in the application of CSS response-type picture

introduce

In the development of the whole website, it is more difficult to manage the picture. Note that images are smoothed over a variety of devices to show that they will encounter problems:

Optimize and reduce the volume of the pictures appropriately

Be careful not to waste bandwidth (the site's success or failure loading speed is one of the main factors)

The device uses the appropriate solutions

For the first question, using the tinypng and Jpegmini tools can help reduce the volume of the picture and optimize the picture.

For the second question, in some cases we might want to use a powerful media query. Thanks to them, we can deal with the problem of background pictures very simply. However, there are some places that use IMG to display pictures, which is also the third problem we want to solve, and also the last question, how to invoke the appropriate image according to the resolution of the device.

In this case, there are two solutions: using the Srcset attribute of elements and elements.

In this article, I will give you a general introduction to the Srcset attribute.

Srcset Property

What are the main benefits of using this property? The advantage is that Web developers can display high-resolution image sources to users with high resolution, and use other image sources for other device resolution users. In the first case, the use of low PDD (pixel density displays) does not need to be burdened with downloading unwanted high-resolution images, but rather the loss of bandwidth, while the latter can enjoy the different benefits of high-definition devices. In the second case, we can specify different images according to different screen sizes, which is mainly based on the user's device to provide a better image source.

In fact, the Srcset property does things like specify an image source based on pixel density or the size of the screen the user uses. So, the Srcset property allows the browser to provide a set of "recommendations" that allow the browser to match the correct image according to the correct behavior. By doing this, we improve the quality of the web, while increasing the load speed of Web pages and giving users a better experience.

At this point, the basic feature of this property is that the selection is made according to the specified conditions to make it work. This is easier for us to encode the work and implement the method of change.

The Srcset:srcset attribute allows the author to extract multiple different resolution images based on different resolutions or different window sizes. The user agent makes a choice based on any previously acquired resources to avoid wasting bandwidth and related performance problems with multiple resource loads.

Talking about the Srcset properties of the picture, it is estimated that a lot of small partners with the times will be in the heart involuntarily think: "This I know, can be based on screen density reality corresponding to the size of the picture, such as ..."

　　

The above code corresponds to the demo light poke here. Of course, we can also write Jane:

　　

Since we are not "other people's" companies, therefore, our office PC monitor default device pixel ratio is 1, therefore, the display of these displays the picture by default is 128 pixel width. The following question came, (not the excavator which strong), how to let cock wire display analog high device pixel ratio?

Method One:

Chrome browser, switch device mode, screenshot below:

Then, select the corresponding device, such as the device pixel ratio of IPhone6 plus is 3.

At this point, refresh the page, loading is a large size picture, that is, 256 pixel width of that one.

Method Two:

At this point the device pixel is 1.5 higher than the window.devicepixelratio, so a picture with a 256 pixel width is loaded. There is a picture of the truth:

Different 2x display strategies

There are also some times, using the same size of HD pictures as 2x corresponding pictures, although the two pictures of similar size, but personally think it is still twice times the size of the big picture better, why?

Srcset was originally designed to display a better picture on a high-density screen, if the world had only "different device density" This drama conflict, 2x picture is a high-definition or twice times the size of the map is actually harmless. However, in fact, life is nowhere to play, modern web layout, there is a kind of layout can not be ignored, that is, "responsive layout", the script is often the case, PC browser display large image, mobile browser display small image. Found no, same as "size diagram requirements", and device pixel ratios have similar drama conflicts.

So, if our 2x picture uses the high definition graph, unifies the response type layout, we may need 4 picture resources, namely: small figure, small figure HD and big picture, big picture HD. However, the 2x picture is twice times the size of the picture, we only need 3 picture resources, namely: small, middle and middle figure, large picture.

In the old generation of Srcset standard molding process, in fact, has taken into account with the response to the layout of the entanglement, the emergence of the W descriptor, for example, take the HD route:

　CSS Code copy content to clipboard

1. src="small.jpg" srcset="small.jpg 640w 1x, small-hd.jpg 640w 2x, large.jpg 1x, Large-hd.jpg 2x ">

Walk twice times the size of the line:

　CSS Code copy content to clipboard

1. src="small.jpg" srcset="small.jpg 640w 1x, medium.jpg 640w 2x, medium.jpg 1x, large.jpg 2x" >

Attention, Attention: never mind the meaning of the W descriptor above, because the W descriptor in the new Srcset attribute is completely different from what it is, in order to avoid understanding the conflict, meditate 3 times with me: forget it, forget it, forget it, ignore it, ignore it, ignore it. You can focus on the following, the new Srcset specification and the new sizes attribute syntax meaning, and so on.