Shulou(Shulou.com)06/03 Report--

Today, I will talk to you about the example analysis of srcset attributes in the use of CSS responsive images. Many people may not know much about it. In order to let everyone know more, Xiaobian summarizes the following contents for everyone. I hope everyone can gain something according to this article.

In the development of the whole website, it is more difficult to manage images. Note that the images are displayed smoothly on various devices, and they will encounter problems such as:

Appropriate optimization and reduction of image volume

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

Equipment uses the appropriate solution

For the first question, using TinyPng and JPEG mini tools can help reduce the size of the image and optimize it.

For the second question, there are occasions when we might want to use powerful media queries. Thanks to them, we can easily handle background images. However, img is used in some places to display images, which is the third and final problem we need to solve, how to recall the appropriate image based on the resolution of the device.

In this case, there are two solutions: using elements and

The srcset attribute of the element.

srcset attribute

What are the main benefits of using this attribute? The benefit is that Web developers can display high-resolution image sources to users using high-resolution, and other image sources to users using other device resolutions. In the first case, low PDD(pixel density displays) are used without the burden of downloading useless high-resolution images and worrying about wasting bandwidth; the latter can enjoy the different enjoyment brought by HD devices. In the second case, we can specify different images according to different screen size, which mainly provides a better image source according to the user's device.

In fact, the srcset attribute does just that, specifying an image source based on pixel density or screen size used by the user. So the srcset attribute allows the browser to provide a set of "suggestions" that allow the browser to match the right image based on the right behavior. By doing so, we improve the quality of the Web while improving the speed at which Web pages load and giving users a better experience.

At this point, the basic feature of this attribute is that it is selected to work according to specified conditions. This makes it easier for us to code our work and change the way we implement it.

The W3C specification describes srcset as follows:srcset property allows authors to present multiple images with different resolutions or different window size. The user agent makes a choice based on any previously acquired resources, thus avoiding wasted bandwidth and associated performance problems with multiple resource loads.

Speaking of the srcset attribute of the picture, it is estimated that many friends who keep pace with the times will involuntarily think: "This I know, can correspond to the size picture according to the screen density reality, for example..."

The above code corresponds to the demo light stamp here. Of course, we can also shorten it to:

Since we are not "someone else's home" companies, our office PC monitors default to a device pixel ratio of 1, so the images presented by these monitors default to 128 pixels wide. The following question comes,(not which excavator is stronger), how to make the silk display simulate the pixel ratio of high equipment?

Method 1:

Chrome browser, switch device mode, screenshot below:

Then, select the corresponding device, for example, the iPhone 6 Plus device pixel ratio is 3.

At this point, refresh the page, loaded is the large size picture, that is, 256 pixels wide that piece.

Method 2:

At this point, the device pixel ratio window.devicePixelRatio is 1.5, so the image loaded is 256 pixels wide. There are pictures with truth:

Different 2x display strategies

There are also times when HD pictures of the same size are used as 2x corresponding pictures. Although the two pictures are about the same size, I think it is better to optimize the big picture with 2 times size. Why?

Srcset was originally designed to better display images on high-density screens. If there is only one dramatic conflict in the world, it doesn't matter whether a 2x image is HD or twice the size. However, in fact, life is everywhere drama, modern web layout, there is a layout can not be ignored, that is,"responsive layout", scripts often like this, PC browser shows large images, Mobile browser shows small images. Found no, the same is true for "size requirements," and device pixel ratios have similar dramatic conflicts.

So, if we use HD images for 2x images, combined with responsive layout, we may need 4 image resources, namely: small image, small image HD and large image, large image HD. However, 2x pictures go twice the size pictures, we only need 3 picture resources, namely: small picture, middle picture and middle picture, large picture.

In the formation of the older generation srcset specification, in fact, the entanglement with responsive layout has been considered, and the w descriptor has appeared, for example, taking the HD route:

CSS Code Copy content to clipboard

Routed twice size:

CSS Code Copy content to clipboard

Note: Do not care about the meaning of the w descriptor above, because the w descriptor in the new srcset attribute has a completely different meaning. In order to avoid understanding conflicts, silently repeat it to me three times: forget it, ignore it, ignore it. You can focus on the following, the new srcset specification and the new sizes attribute syntax meaning.

After reading the above, do you have any further understanding of the sample analysis of srcset attribute in CSS responsive image application? If you still want to know more knowledge or related content, please pay attention to the industry information channel, thank you for your support.

Welcome to subscribe "Shulou Technology Information " to get latest news, interesting things and hot topics in the IT industry, and controls the hottest and latest Internet news, technology news and IT industry trends.