A brief discussion on the srcset attribute in HTML img tag

When I looked at the code of my predecessor today, I found that the img tag has an unfamiliar srcset attribute, as follows:

<img class="Avatar" src="https://pic3.zhimg.com/8622a8eea_s.jpg" srcset="https://pic3.zhimg.com/8622a8eea_xs.jpg 2x" alt="测试用户1">

After reading, I learned that this attribute is used to: use the most appropriate src to match different screens (high-resolution screens and low-resolution screens such as Retina; large screens and small screens). Use as follows:

<img src="source.jpg" srcset="source_2x.jpg 2x, source_3x.jpg 3x">

<img src="source.jpg" width="100%"
  srcset="source_400.jpg 400w, source_600.jpg 600w, source_1280.jpg 1280w">

2x and 3x represent the pixel density of the target screen; 400w and 600w represent the width limit of the target browser. For example, when the browser width is 550w, it matches the src of 600w.

Get the pixel ratio through window.devicePixelRatio

For more programming-related knowledge, please visit: Programming Video! !

The above is the detailed content of A brief discussion on the srcset attribute in HTML img tag. For more information, please follow other related articles on the PHP Chinese website!