「这是我参与11月更文挑战的第1天，活动详情查看：2021最后一次更文挑战

1. 图片的懒加载

1.1 原生的图片的懒加载方案

    <img 
        loading="lazy" 
        src="https://p3-passport.byteacctimg.com/img/user-avatar/43a4a02d442924332f918490d38ff173~300x300.image"
    />

局限性

需要浏览器支持
可扩展性、兼容性不好

1.2 第三方图片的懒加载方案

1.2.1. verlok/lazyload

1.2.2. yall.js

一个快速、灵活、小巧的 SEO 友好的懒加载器。

1.2.3. Blazy

bLazy是一个轻量级, 滚动懒加载图片的JavaScript库, 使用纯JavaScript编写, 不依赖任何第三方JavaScript库(如jQuery等). bLazy支持所有的主流浏览器, 包括IE7及以上版本.

1.2.4. react-lazy-load-image-component

示例网站(demo) www.albertjuhe.com/react-lazy-…

2. 使用渐进式图片

BaseLine JPEG (自上而下)
Progressive JPEG (低像素到高像素)

2.1 渐进式图片的优点和不足

2.2 渐进式图片的解决方案

progerss-image
ImageMagick
libjpeg
jpegtran
jpeg-recompress
imagemin

3. 使用响应式图片

<img 
    srcset="elva-fairy-320w.jpg 320w, elva-fairy-480w.jpg 480w, elva-fairy-800w.jpg 800w"
    sizes="(max-width: 320px) 280px, (max-width: 480px) 440px, 800px" 
    src="elva-fairy-800w.jpg"
    alt="Elva dressed as a fairy" 
/>

注意格式要对：每一行都有不同的属性值，每个属性值之间都有逗号分隔

3.1 Srcset 属性的使用

定义了我们允许浏览器选择的图像集，以及每个图像的大小

3.2 Sizes 属性的使用

定义了一组媒体条件（屏幕的宽度），以上边为例，当屏幕的宽度小于480px的时候，图像将填充的槽的宽度是440px。

所以，有了这些属性，浏览器会：

查看设备宽度
检查sizes列表中哪个媒体条件是第一个为真
查看给予该媒体查询的槽大小
加载srcset列表中引用的最接近所选的槽大小的图像

3.3 picture 的使用

根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：

<picture>
    <source media="(min-width: 650px)" srcset="demo1.jpg">
    <source media="(min-width: 465px)" srcset="demo2.jpg">
    <img src="img_girl.jpg">
</picture>

图片加载优化——突破大型网站图片加载的瓶颈