preface

There is a lot of information about SRcset & Sizes, but not much. There are few articles explaining the mechanism of srcset & Sizes in detail. Even MDN is only briefly mentioned.

So I went to study it myself. I can’t just look at the data. The credibility is still worth considering.

Of course, due to the limitations of my ability, maybe the study is not thorough enough to bring about mistakes, please point out more, I humbly consult.

Introduction to the

In H5, img has two new attributes, srcset and SIZES:

  • Control responsive images and display different images according to screen size
  • Display images of different quality depending on the screen (retina screen or normal screen), properly control the download resources, and provide users with high quality enjoyment.

The text has some noun concepts that may need to be understood in advance. Start by skimming through the various pixel, resolution, and other concepts you need to know

srcset

(1) Format 1: image source address space image pixel width [, image source address space image pixel width,… , such as

srcset="1.jpg 580w, 2.png 618w"
Copy the code

JPG is 580px wide and PNG is 618px wide, separated by a comma.

Be sure to use ‘W’ to describe the pixel width of the image, and be sure to use the actual pixel width of the image, if you change it privately, it will affect the browser’s choice of image!

This example is similar to the default sizes attribute (more on this below).

srcset="1.jpg 580w, 2.png 618w" sizes="100vw"
Copy the code

(2) Format two: image source address space screen pixel density [, image source address space screen pixel density,… , such as

srcset="1.jpg 1x, 2.png 2x"
Copy the code

JPG is the picture displayed when DPR is 1; 2. PNG is the image displayed when DPR is 2. If there is no image source with a larger DPR setting, the image source with the maximum DPR setting will be used when DPR is greater than the maximum value currently set. For example, if the screen DPR is 3, 2.png will still be used.

summary

In the case that the browser supports srcset, the SRC value becomes a candidate image for the 1x case, and will be used if no conditions are met.

For the selection of ‘x’ images, it’s very simple, just follow the rules above. However, the selection of ‘w’ images is not so simple and needs to be analyzed using sizes as follows.

sizes

The setting of SIZES takes effect only if srcset is set and the unit is W. The browser selects the image based on sizes and finds the width of the image, and then searches the srcSet for the appropriate image based on this width.

What is qualified?

The image pixel width (the value of ‘w’) set in srcset constitutes the corresponding half-open and half-closed interval (a, b). The display width of the picture (the value specified by sizes) is in which range it falls, and the picture corresponding to the maximum value in the range is taken. If there is no maximum value (such as ∞), the maximum value of the previous interval is taken.

Such as

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w".sizes="300px">
Copy the code

The above set the image to be displayed as 300px (sizes), and the thresholds in the SRCSet are (0, 229px], (229px, 618px], (618px, 1000px], (1000px, infinity]. The 300px image falls into (229px, 618px) and the maximum is 618, so the final image selected is 2.png

If sizes is changed to 1200px, we will end up with 1.jpg of 1000W as per the above rules

Note: the order in srcset is not important and will not be affected.

Ok, so we know the browser selection rules. Again, the syntax of sizes:

[media query space] image display width [, [media query space] image display width]… , other condition width values]

The width value of the picture cannot be in %, other normal units can be used

For example:

sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px"
Copy the code

If the screen is 500px or less, the image should be 400px wide. Images are 700px wide when the screen is 900px or less; The rest are shown 1200px wide.

Therefore, based on sizes, you can determine which screen size to display which image width, and then go to the SRCset to find the source that meets the criteria.

This example

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w,1.jpg 1000w".sizes="(max-width: 500px) 400px, (max-width: 900px) 700px, 1200px">
Copy the code

If the screen size is less than or equal to 500px and the image is 400px wide, select 2.png. If the screen is 900px or less and the image is 700px wide, select 1.jpg. In other cases, make it 1200px wide and still select 1.jpg.

Note: the order of sizes media query criteria is important, as the earlier criteria are met, the later criteria are ignored

Also, if the sizes attribute has no value, or if there is a media condition, the remaining condition width is not set, the default is 100vw

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w">

<! -- equivalent to -->

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="100vw">
Copy the code
<img src="4.jpg" srcset="3.jpg 229w,2.png 618w".sizes="(max-width: 500px) 400px">

<! -- equivalent to -->

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w".sizes="(max-width: 500px) 400px, 100vw">
Copy the code

In this case, it is directly based on the width of the screen to determine which image source to select.

The influence of the DPR

All the above content is explained in the case of DPR is 1, mainly for the PC side. So if it’s mobile, DPR is not just 1, but 2,3. The rules are still the same, but we need to do some value conversion to apply the rules. This is basically saying ‘w’ how does the browser choose

Take this example

<img src="4.jpg" srcset="3.jpg 229w,2.png 618w" sizes="(max-width: 600px) 114px">
Copy the code

The first thing we need to know is that the ‘W’ symbol in srcset represents the width pixel of the image, which is a physical pixel; Sizes 114px is a logical pixel!

The browser’s selection of images can only be compared by converting them to pixels of the same concept. You can’t compare them with logical pixels in the physical pixel range, right?

Therefore, when DPR is not 1, it is necessary to transform the pixel value to compare in the interval and apply the above rules.

For example, when DPR=2, 114px is converted into physical pixels, that is, 114px * 2 = 228px, and 228px is used for comparison in (0, 229px], (229px, 618px], and (618px, ∞], which falls into (0, 229px], and the corresponding 3.jpg of 229px is taken

specification

If you want to use these two properties to control your image, you need to follow the following specifications, otherwise you will not be able to predict many effects, after all, many browsers have different compatibility.

These are all specifications for srcset values:

  • Different image sources should all be of the same type, such as all ‘x’ descriptions, or all ‘W’ descriptions.
  • Different image sources cannot have the same value, such as ‘1x’ or ‘900W’
  • You can’t have both ‘w’ and ‘x’ from the same source
  • When using ‘w’ to describe the image, it must be the actual width of the image. You can right-click the image and see how many pixels wide it is. If you do not fill in the real situation, it will affect the browser to choose the image, and the width of the image displayed on the browser will be scaled to a certain proportion, the proportion is the real width: private change width.

If you don’t believe this specification, you may be skeptical of many other articles that don’t. Breaking the specification will probably result in some sort of pattern in the browser, but considering browser compatibility, it’s not recommended to not follow the above specification.

Here are some of the things I tested. If you’re interested, you can try it out for yourself. Of course, I’m testing a limited number of browsers here

  1. If the srcset value is ‘x’ which does not match the current screen, or ‘w’, the image will be displayed according to the condition of ‘w’. Otherwise, the image will be displayed under the smallest ‘x’ which does not match the current screen. But 360 is going to keep using the smallest nonconforming ‘W’.
  2. There’s a ‘w’ that matches and there’s a ‘x’ that matches, and ‘x’ has the highest priority. Will show the picture under ‘x’ condition anyway
  3. The same image source with both ‘w’ and ‘x’ is invalid
  4. Different image source, same value, like ‘1x’ or ‘900W’, the first one takes precedence

compatibility

You can see the general picture here: compatibility

But there are a few things worth mentioning that aren’t in the link above

Srcset value is only ‘w’

When chrome’s screen changes (such as when you drag a browser window), images can be changed from a small screen to a large one, but not from a large screen to a small one.

In the following example, from a screen less than 500px wide to 1.jgp, the image will be replaced with 2.png when the screen changes to 500px-900px, and 3.jpg when the screen is larger than 900px. But from 900px -> 500px-900px -> 500px, the image will not be replaced.

<img src="4.jpg" srcset="1.jpg 400w,2.png 600w,3.jpg 900w">
Copy the code

But Firefox doesn’t have chrome’s problem of not replacing images from large to small screens.

The 360 browser is not well supported and will only display images of the largest screen in the SRcset, such as 3.jpg in the example above

Other situations

  1. If the srcset values are ‘x’ and do not fit the current screen conditions, the SRC value will be used, but 360 will still use the invalid srcset value.
<img src="4.jpg" srcset="3.jpg 3x,1.jpg 2x">
Copy the code
  1. If srcset values are both ‘x’ and one matches, the match is used. But 360’s performance is very strange, can’t find a pattern.

Please do not reprint without permission