Using Srcset to implement responsive picture sizes properties

Pictures to smooth transition on a variety of devices to show that they will encounter problems are: 1. Appropriate optimization and reduce the volume of the picture; 2. Be careful not to waste bandwidth (the site's success or failure is one of the main factors); 3. The equipment uses the corresponding solution.


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 the <picture> element and element.

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.

Words:

The Srcset attribute allows authors to provide, in a compact manner, multiple variants of the same image at differing Reso Lutions or for different viewport dimensions. User Agents may make their resource selection before fetching any of the, thus avoiding multiple resource loads And the associated performance problems in constrained bandwidth environments.

The Srcset property contains a series of comma-delimited values that specify the URL of the image and, on the other hand, the condition that the image will display. Image conditions we can see pixel density, window size, or both. It's interesting that browsers can select or grab a low-resolution image and a high-resolution image based on the user's settings or page access time.

Imagine that in your mobile browser preference settings allow high resolution images to be requested. For example, if you are connected to a WiFi network environment, or if the network is not strong, ask if you want to manually set browser preferences, allowing you to load low-resolution images.

The syntax format is as follows:



The code above requires the browser to display an image named Small-photo.jpg. A big-photo.jpg image is displayed unless it is in a high-resolution display (pixel density of 2x, such as a Retina screen). Note that only the browser understands this property to display other images, and if the browser does not interpret this property correctly, the meteoroid ignores the other images and returns to the image specified by the SRC attribute.

As mentioned above, this property is not limited to high-density resolution devices. In some cases, you can also select a picture based on the width of the screen's window size, which is equivalent to a media query that loads a background image when a breakpoint is found. To benefit from it, you have to specify a number of pixels after a W (for example, W). To better understand this example, let's look at an effect from the SXC.HV website-"Autumn in Moscow". The size after compression is 1368 x 700, the optimized volume is 389kb.

So far, the advantage we've been discussing is to let users download an image that is larger than the device when using their smartphone, so can his device be displayed? Also, keep in mind that the mobile connection is limited, and a tricky problem is that the image too general slows down your page load, which may cause your users to leave your site (obviously, first and foremost, avoid the present). As has been said, you may consider using the same size image as the equipment, such as Size x 22px, about 40KB.

Incredibly, with the following piece of code, we can allow users to save bandwidth and improve the user experience:



This code uses the Low-density-photo.jpg image as a candidate image and provides a list of displayed images according to different regulations: the device screen width is less than or equal to the 480px screen using small-photo.jpg, the device screen width is less than or equal to 1024px use Big-photo . jpg, finally there are two conditions, the device screen is less than or equal to 1024 of the retina screen will display the high-density-photo.jpg image.

There is a bad news to tell you that currently support Srcset browser only WebKit engine browser:

In addition, you cannot set an image based on the Max-width device screen, as there is no specific description of how to use it. This problem is a bit complicated, so keep checking to see if the specification is updated, and read more about its specifications and methods to better achieve your project needs.

A draft of the Srcset's code for the Consortium, published on December 2, 2013, contains some examples of how this property is used and how to use it.

As an edited draft, we can only say that this attribute is closer to me, as to when the browser can fully support and use the Srcset attribute, we can only hope to look forward to.

In this article, we have described the Srcset property as a better way to help web developers better manage the Web site's pictures. However, as we have seen, there are few browsers currently supported, but we are confident that browsing will eventually solve the problem.



Response Picture Srcset New Interpretation sizes Property W Descriptor

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. Here is the question, (not the excavator which is strong), how to let? Panken wine iliac D chiselled Gua pu eligible for Torr Shang?br/>
Method One:
Chrome browser, switch device mode, screenshot below (v38):

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:
Chrome browser, Ctrl+✚ shortcut, or Ctrl + mouse wheel, enlarge page proportions, for example, try zooming up to 150%:

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:



Walk twice times the size of the line:



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.

Appropriate point in time

We go to the Caniuse to view the browser support for the Srcset property, you will find a yellow-yellow green color:

As you can see, the Chrome browser, starting with version 38, is green, and before it is yellow-green. The yellow-green indicates support for the old Srcset specification only, and the green representation supports the new Srcset specification, including the sizes attribute, W descriptor.

The Chrome 38 stable version was released last week (Tencent Software Butler showed October 16), so we have the conditions to practice Srcset new standard features, conducive to rapid learning.

Therefore, I choose to write this article at this point in time, push the product is also so, need a suitable time point, too early to die in the sand, too late to keep up.

So, to learn this article, see if your Chrome browser is 38+.

At the same time, Apple has just released a 4x display, if the use of traditional srcset, the need for 1x, 2x, 3x, 4x, I le go, the HTML immediately become bloated big fat. Advancing with the Times is imperative!

new Smart Srcset, sizes Properties, W descriptor

The old Srcset is people-led, and now the new Srcset is the browser-led, your main need to provide image resources, as well as breakpoints, others to the browser intelligent solution, what the response width ah, device pixel ratio ah, you do not care, the browser will automatically match the best display picture. Does your face look like this now:
Cool look.

The following HTML example:

srcset= "Mm-width-128px.jpg 128w, Mm-width-256px.jpg 256w, mm-width-512px.jpg 512w"
Sizes= "(max-width:360px) 340px, 128px" >

1 of them:
Srcset used to point to provide the picture resources, attention, just resource point, no previous 1x, 2x or anything, this is to the browser, we do not need to care! Here, for example, point to 3 dimensions of the picture, the actual size of 128 pixels, 256 pixels and 512 pixels.

2 of them:
Sizes is used to denote dimension critical points, dealing primarily with responsive layouts. The syntax is as follows:

sizes= [Media query] [length], [media query] [length] ... etc

For example, in the above code, size = "(max-width:360px) 340px, 128px" means that when the viewport width is not greater than 360 pixels, the width of the picture is limited to 340 pixels, in other cases, 128 pixels (corresponding to the following demo page 1th picture).

If sizes= "128px", the size will always be 128 pixels, and the picture will only change depending on the device pixel ratio.

Note that all values here refer to the width value, and the unit is arbitrary, EM, px, CM, VW, ... Are possible, and can even be CSS3 calc (corresponding to the 2nd map of the demo page below), for example:

Sizes= "(max-width:360px) Calc (100vw-20px), 128px"

Indicates that when the viewport width is not greater than 360 pixels, the picture width is the entire viewport width minus 20 pixel size.

OK, how does the above 2 attributes work in detail? First, you need to ruthlessly click here: Srcset and sizes new interpretation W descriptor schematic Demo

1. Corresponding display of pixel ratio of equipment
According to Part2 's tips, F12 Click Switch Device mode, we first look at the large width of the display below, for example, we choose an ipad 1:

One of the fit front hooks is removed to show more clearly. At this point, you can see that the picture shows a width of 128 pixels. Why, then?

Do you remember our sizes attribute value? The last bare no media query value is 128px, the current view width is 1024 pixels, far greater than 360 pixel this critical width value, therefore, the picture occupies a width of 128 pixels. At the same time, the most important thing is that the device pixel ratio here is 1.
Device pixel ratio is 1

So, we can serious show the actual width is 128 pixel of that picture. The final display is as follows:

ZXX: The top two pictures mentioned above, the code difference is only a critical width of sizes, the above is 340px, the following is Calc (100vw-20px), to help you understand the W descriptor, there is a lot of play, of course, here, You may not care for the moment.

OK, keep the width unchanged, we change a small magic, below, the device pixel than 1 to 2 and then refresh the page:

So, when it's time to see the miracle, picture 256:

Similarly, when we modify the device pixel ratio of 3 and then refresh the page, we will find that the picture is loaded with a 512-width type:

If you change to 4 +, or a picture above this 512 pixel width, because this is the picture of the largest w corresponding to the browser.

Everyone notices that the wood has, we do not specify the browser that device pixel than which image to use, the browser is very smart to help us load the best display of the picture. This is the latest interpretation of Srcset, more intelligent and more powerful.

2. Sizes Media Query

Below we have an in-depth understanding of the sizes properties of the action mechanism.

First, we modify the device for Google Nexus5, when the viewport width is 360 pixels, just the critical width of the sizes set, modify the device pixel ratio of 1 (remove other test interference factors), refresh the page, you will find that the page load is 512 this picture:

Why is loading 512?

In turn, the first picture, the corresponding value is (max-width:360px) 340px, meaning is easy to understand, the viewport width is not greater than 360 pixels, the picture actual size 340 pixels. This demo side each has 10 pixel blank, therefore, exactly the picture full screen display feeling. Here's the question, why is it loaded with 512 of these graphs, not 256?

Do you remember the value size of the W descriptor behind each picture resource in Srcset? Yes, 128w, 256w, 512w, respectively. Just here to explain the meaning of the W descriptor, according to my personal understanding (note, is a personal understanding, for reference only), W used to describe the width of the file, we can image as a specification, like mobile phone, there are sizes and specifications. According to my shallow experience, we can be directly equivalent to the pixel to understand. You may have doubts, why not direct 256px instead of 256w, because, please note that 256w here does not mean the width of the picture, but the width of the picture, for example, the actual width of a picture is 256 pixels, but this picture is Png24 lossless pictures, or 100% quality jpg pictures, then, We can use 512w to express this picture, the quality of good specifications on the high, it is not difficult to understand it! If it is 512px obviously have a problem, clearly picture 256 pixel, get a 512px, ambiguity to the heavenly Queen where to go! So, you need a W representation that no one has seen, and you need to realize that W is not a unit, but a descriptor (descriptor).

Back to the main line, the picture 340 pixels, you can see 340 specifications, 340w, so 256w This picture shows the specification is not enough, short "not Enough"; 512w > 340w to meet the optimal display criteria, so the load is the 512px this picture.

If you want the view 360 pixel width When loading is 256 this picture, very simple, modify its specification 256w for 340w, done!

OK, pay attention, ahead high-energy!!

Below, not under the dumplings, to modify the width of a lucky number? 250, and then brush (note that the device pixel ratio to 1) ~ ~ will find that the difference between the two graphs came, the following screenshot:

Although the pictures are displayed by the 100% parent container, the pictures that are loaded are not the same. Hey? Why is it different?

is very well understood, the former is 340px, the latter is calc (100vw-20px), a fixed value, a dynamic. The former is always 340w specifications, and the latter in the size of 250 pixels, the actual pixel is 230px, can be seen as 230w, smaller than 256w, so loaded 256 of this picture!

Therefore, if you want the picture to be loaded further intelligently, it is recommended that you use dynamic units.