共计 888 个字符，预计需要花费 3 分钟才能阅读完成。
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 响应式图片
正文完
