【性能优化】图片加载优化本文已参与「新人创作礼」活动，一起开启掘金创作之路常见优化：图片压缩上传图片懒加载：先用一

本文已参与「新人创作礼」活动，一起开启掘金创作之路

常见优化：

图片压缩上传
图片懒加载：先用一个占位，再去请求图片进行替换
图片渐进加载：先请求一个模糊图片，再去请求高清图片替换

源图优化

根据不同需求加载不同的图——srcset属性

只要图片原始大小>css设置宽度*DPR就会清晰

（1）根据DPR选择

<img src="image.jpg" 
     srcset="image.jpg,
             image_2x.jpg 2x,
             image_3x.jpg 3x"/>

（2）根据实际需要尺寸

<img src="image.jpg" 
     srcset="image_S.jpg 600w,  //600w代表600px，若css宽度*dpr与600px接近就会加载这张图
             image_M.jpg 900w,
             image_L.jpg 1500w,
             image_XL.jpg 3000w"/>

（3）复杂的响应式布局需要配合sizes属性

img{width: 300px;}
@media(max-width: 1000px){
  img{width: 33vw;}
}
@media(max-width: 700px){
  img{width: 50vw;}
}
@media(max-width: 450px){
  img{width: 100vw;}
}
// css也可以不写，html写正确即可

如需求是：页面宽度大于1000，图片宽度为1/3；700-1000，图片宽度是1/2...

在html里写izes是为了在加载dom树的时候就进行正确的请求

<!DOCTYPEhtml>
<html lang="en">
<head>
   <meta name="viewport"content="width=device-width">
 </head>
 <body>
   <img src="https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/1200" 
         srcset="https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/300 300w,
                 https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/500 500w,
                 https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/1000 800w,
                 https://static.xiedaimala.com/images/study-map.png?imageView2/2/w/1200 1200w"
         sizes="(max-width: 450px) 100vw, (max-width: 700px) 50vw, (max-width: 1000px) 33vw, 300px">
</body>
</html>

参考：
(已更)图片高清解决方案