图片加载的优化

图片的懒加载（loading lazy）

原生的：<img loading="lazy" src="xx" />

插件：react-lazy-load-image-component （github）

 

baseline jpeg 行扫描型图片，（自上而下的出现图片内容）

progressive jpeg 渐进式图片（一开始就有全貌，慢慢显示细节）

 

 

响应式图片

srcset属性使用

sizes属性的使用

picture的使用,

<picture>
  <source srcset="mdn-logo-wide.png" media="(min-width: 600px)">
  <img src="mdn-logo-narrow.png" alt="MDN">
</picture>　

<img src="mdn-logo-narrow.png" sizes="100vw" srcset="mdn-logo-wide-100.png 100w, mdn-logo-wide-200.png 200w, mdn-logo-wide-500.png 500w" >

　　

 

会根据【屏幕的尺寸和设备dpi】选择合适的图片资源，不会全部加载，只加载其中一张符合条件的图片