前端开发中图片的优化

1. 常用的图片格式

PNG

• 优点：背景可以透明、画质很高、不失真
• 缺点：体积很大
• 使用场景：比较小或者需要部分透明的图片，例如logo、图标等

JPG/JPEG

• 优点：压缩比高的情况下可以保留比较高的画质，相对PNG俩说体积会小很多
• 缺点：边缘会产生锯齿感、模糊感
• 使用场景：在展示较大且画质较好的图片时使用。例如轮播图、大背景图等等

WEBP

• 由Google提出一种新的图片格式。拥有无损压缩的质量（PNG），体积还比PNG小大概30%。但普及度不够，兼容性不好，目前使用较少。

GIF

• 优点：体积小，支持动画、透明
• 缺点：色彩不够丰富，只支持256种颜色
• 使用场景：一些色彩简单的logo或图标。实际开发中使用的较少，一般会使用PNG来替代

2. 图片懒加载

初始时，图片不进行加载，在图片进入可视化区域时再进行加载。

对于图片的懒加载，很多浏览器也做了原生支持。但兼容性不好。

<img loading="lazy" src="http://assets-cdn.99plas.com/packages/wechat-example.png" />

如果需要实现懒加载的话，可以使用一些现有的库，例如vue相关的vue-lazyload、react版的react-lazyload。

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

srcset定义了我们允许浏览器选择的图像集，以及每个图像的大小。
sizes定义了一组媒体条件（例如屏幕宽度）并且指明当某些媒体条件为真时，什么样的图片尺寸是最佳选择—我们在之前已经讨论了一些提示。

更加详细的说明请参考：MDN 响应式图片