图片加载优化方案

懒加载

图片上直接添加属性：lazy

推荐网站：谷歌的开源图片压缩网站https://squoosh.app/

将图片进行压缩：

一般这两种可以结合使用

这种原理是：在页面加载时，将图片提前加载到浏览器的缓存中，利用浏览器的缓存策略，这样当用户访问图片时，图片就会从缓存中加载，从而避免了图片的加载时间。

实测 lighthouse 测试性能时，会禁止缓存，禁止缓存后会加载两次图片。如果图片是当前页面的最大的图片的话，会导致LCP时间延长。

一种是导出渐进式图片，加载的时候图片会逐渐由模糊变清晰。可能就是兼容新不太好。

另一种推荐的方案是：站位图片（或者低质量图片）+ 原图片

先加载一个大小比较小的图片，然后通过接口或者，new Image() 加载原图片当图图片加载完，也就是onload 的时候，将原图片替换掉站位图片。

如果想要lighthouse的数据好看一点，可以在原图加载完成后转成base64格式的图片，直接替换掉占位图片，而不是这样就不会在禁止缓存的情况下加载两次图片。

可以优化的交互，就是图片切换的时候加一些动画，比如淡入淡出，或者使用css3的transition