针对前端图片加载常见有哪些优化方案

现如今图片对于网页来说已经是必不可少的一个元素，在展现或者解释某一个东西方面表现出来的非常直观的一面发挥着重要的作用。而它本身的体积和大小对于网页的加载也带来了可访问性的重大压力，如何在网页中用好图片对于前端开发人员来说是一个不小的挑战。网页性能在前端面试中所占比重也越来越大，所以，掌握图片加载优化技术的意义不言而喻。

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. 使用渐进式图片

渐进式图片其实是一种 png-24 格式的图片，在 Photoshop 中编辑图片的时候勾选交错才能把图片保存为渐进式图片，它和普通的图片的区别如下：

普通图片渲染时，数据将按照存储时的顺序从上到下逐行扫描被显示出来的，直到所有的数据都被读取完毕，就完成了整张图片的显示。
渐进式图片渲染过程中，会先显示整个图片的模糊轮廓，随着扫描次数的增加，图片变得越来越清晰。这种格式的主要优点是在网络较慢的情况下，可以看到图片的轮廓知道正在加载的图片大概是什么。

• 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>

浏览器支持