原理

<img src="128px.jpg"
    sizes="(max-width: 360px) 340px, 128px"
    srcset="128px.jpg 128w, 256px.jpg 256w, 512px.jpg 512w"
 >

响应式不生效的时候用src的图片

sizes

视区宽度不同，图片的宽度不同，逻辑和三元运算符相反，比如上面的意思是：当视区宽度宽度大于360px时，图片宽度为128px，否则图片为340px

srcset

不同w使用不同的图片。w的意思是图片尺寸x屏幕密度。比如128px的图片在屏幕密度为1的显示器上就选用128w前面的那张图片。

实战

webpack有responsive-loader可以帮助生成不同像素的图片

...
module: {
    rules: [
        {
        test: /\.(png|jpg)$/,
        type: "asset/resource",
        oneOf: [
          {
            type: "javascript/auto",
            resourceQuery: /sizes?/,
            use: [
              {
                loader: "responsive-loader",
                options: {
                  adapter: require("responsive-loader/sharp"),
                },
              },
            ],
          },
          {
            type: "asset/resource",
          },
        ],
      },
    ]
} 
...

// index.js
import responsiveImage from "responsive-loader!!./webpack.jpg?sizes[]=300,sizes[]=600,sizes[]=1024,sizes[]=2048";

<img
    src={responsiveImage.src}
    srcSet={responsiveImage.srcSet}
    width={responsiveImage.width}
    height={responsiveImage.height}
    sizes="(min-width: 1024px) 1024px, 100vw"
    loading="lazy"
  />

// responsiveImage.srcSet
http://127.0.0.1:5502/load-img/dist/0577e90c46997baa805755e1a7a05863-300.jpg 300w,
http://127.0.0.1:5502/load-img/dist/5c1cb811a93ca8867ef975c5c3ac4404-600.jpg 600w,
http://127.0.0.1:5502/load-img/dist/65f736c7538a0932213d462f2ddbde7a-1024.jpg 1024w,
http://127.0.0.1:5502/load-img/dist/788f16072e365056e104987c3dd18d49-1300.jpg 1300w'
//

webpack生成了4张图片，在超过1024px之外，显示1024px宽度的图片，否则宽度为占满视区

缺点

利用srcSet来配置图片的话，一般需要4张图片：小图、小图高清、大图、大图高清

其实之前有替代方案，就是放缩，这样的话只需要3张图片：小图、中图、大图；通过放缩就能得到对应尺寸的高清图了

响应式图片

原理

实战

缺点