图片的性能优化

1.图片主要格式PNG-8、PNG-24、JPEG、GIF、比较新的格式：WEBP、AVIF、JPEG XL

2.设备独立像素：设备独立像素 = CSS 像素 = 逻辑像素

　物理像素：又称为设备像素。显示屏是由一个个物理像素点组成的，1334 x 750 表示手机分别在垂直和水平上所具有的像素点数。通过控制每个像素点的颜色，就可以使屏幕显示出不同的图像，屏幕从工厂出来那天起，它上面的物理像素点就固定不变了，单位为pt

　DPR（Device Pixel Ratio） 设备像素比：DPR = 物理像素 / 设备独立像素

3.设置响应式图片：a.无脑多倍图的方式  b.DRP 媒体查询 c.CSS Background 中的使用 image-set d.srcset 配合 1x 2x 像素密度描述符 e.srcset 属性配合 sizes 属性 w 宽度描述符
4.aspect-ratio：高宽比
   object-fit：它能够指定可替换元素的内容（也就是图片）该如何适应它的父容器的高宽，fill、none、contain、cover

 image-rendering:设置图片在缩放状态下的展示算法

5.懒加载 

1.content-visibility: auto 实现图片内容的延迟渲染

2.loading=lazy HTML属性实现图片懒加载

3.decoding=async 实现图片异步加载

参考：https://mp.weixin.qq.com/s/KdpLI0WBR_wyhGEbbqY6QQ