【web性能】图片の加载

就像一些商城首页，或者浏览性展示性的网站中，需要给用户展示大量图片内容🖼📱；对应的当然也需要有一些针对性的性能优化的方案，以提高前端页面性能；
这里记录一点优化的原理和角度，当然其中某些方面，目前已有对应较成熟的插件🙌

图片延迟加载

在页面中，先不给图片设置路径，只有当图片出现在浏览器的可视区域时，才会加载真正的图片，这就是延迟加载。
对于图片很多的网站来说，一次性加载全部图片，会对用户体验造成很大的影响，所以需要使用延迟加载，首先可以给图片的属性data-src设置上，在页面不可见时，图片不可加载等页面可见，使用js加载图片

<img data-src="https://pic1.zhimg.com/v2-a73c32bad95e171e05a66e7c4b77c339_is.jpg">

页面进入可视区域时，替换图片的src

const img = document.querySelector('img')
img.src = img.dataset.src

响应式图片

浏览器能够根据屏幕大小自动加载合适的图片，有两种实现方式

1. <picture> 和 <source> 标签配合
   <picture> 元素通过包含零或多个 <source> 元素和一个 <img> 元素来为不同的显示/设备场景提供图像版本。浏览器会选择最匹配的子 <source> 元素，如果没有匹配的，就选择 <img> 元素的 src 属性中的URL。然后，所选图像呈现在<img>元素占据的空间中

<picture>
    <source srcset="banner_1000.jpg" media="(min-width: 801px)">
    <source srcset="banner_800.jpg" media="(max-width: 800px)">
    <img src="banner_800.jpg" alt="">
</picture>

2. @media 媒体查询

@media (min-width: 769px) {
    .bg {
        background-image: url('bg1.jpg');
    }
}
@media (max-width: 768px) {
    .bg {
        background-image: url('bg2.jpg');
    }
}

图片压缩

有两种方式：webpack 插件，配置超过某个临界值，就压缩图片；或者在线压缩图片原件，我常用的在线压缩工具是熊猫压缩tinypng

css替代

有些效果可以用css画出来，就尽量不要使用图，因为通常相差大小差距，可能是几倍甚至几十倍， 🚩后面想继续更新下css实现各种常见效果👌

使用webp格式图片

webp的优势在于它具有更优的图数据压缩算法，能带来更小的图片体积，具有拥有肉眼识别无差异的图像质量。同时具备有损和无损的压缩模式、Alpha透明和动画的特性，在JPEG和PNG上的转化效果都很稳定
目前除了IE，其他浏览器的兼容性还可以