图片降级

# 阿里云cdn

链接：https://help.aliyun.com/document_detail/209551.htm

将图片托管到阿里云cdn，开通图像处理功能，可以实现自适应WEBP、图片自动旋转（仅自动调正功能）和图片自动瘦身功能。主要是可以自动将其他格式的图片转为 webp 图片
在项目中判断当前的浏览器环境支不支持 webp，有3种方法
1.canvas判断方法。可以动态的创建一个canvas对象，通过canvas的toDataURL将设置为webp格式，然后判断返回值中是否含有image/webp字段，如果包含则说明支持WebP，反之则不支持。但是尽管大部分浏览器的新版本已经支持webp格式了，然而，toDataURL 出现了滞后，也就是说该方法不能准确的判断浏览器是否支持 webp

function isSupportWebp(){
 const ele = window.document.createElement('canvas')
 if (!!(ele.getContext && ele.getContext('2d'))) {
   return ele.toDataURL('image/webp').indexOf('webp')>-1
 }
 //不支持canvas,那么一定不支持webp
 return false
 }

1
2
3
4
5
6
7
8

2.在服务端根据请求header信息判断浏览器是否支持webp。通过请求头中的accept: text/html,application/xhtml+xml,application/xml;q=0.9,image/avif,image/webp,image/apng,/;q=0.8,application/signed-exchange;v=b3;q=0.9;如果有 'image/webp'的话，返回webp格式的图片，否则返回png等格式。
3.宽高判断法。通过创建image对象，将其src属性设置为webp格式的图片，然后在onload事件中获取图片的宽高，如果能够获取，则说明浏览器支持webp格式图片。如果不能获取或者触发了onerror函数，那么就说明浏览器不支持webp格式的图片。先加载一个webp格式的图片(base64字符串)，如果能获取到width和height，那么是支持webp的，否则是不支持的。以下是谷歌官方推荐的方法

function check_webp_feature(feature, callback) {
   var kTestImages = {
       lossy: "UklGRiIAAABXRUJQVlA4IBYAAAAwAQCdASoBAAEADsD+JaQAA3AAAAAA",
       lossless: "UklGRhoAAABXRUJQVlA4TA0AAAAvAAAAEAcQERGIiP4HAA==",
       alpha: "UklGRkoAAABXRUJQVlA4WAoAAAAQAAAAAAAAAAAAQUxQSAwAAAARBxAR/Q9ERP8DAABWUDggGAAAABQBAJ0BKgEAAQAAAP4AAA3AAP7mtQAAAA==",
       animation: "UklGRlIAAABXRUJQVlA4WAoAAAASAAAAAAAAAAAAQU5JTQYAAAD/////AABBTk1GJgAAAAAAAAAAAAAAAAAAAGQAAABWUDhMDQAAAC8AAAAQBxAREYiI/gcA"
   };
   var img = new Image();
   img.onload = function () {
       var result = (img.width > 0) && (img.height > 0);
       callback(feature, result);
   };
   img.onerror = function () {
       callback(feature, false);
   };
   img.src = "data:image/webp;base64," + kTestImages[feature];
}
check_webp_feature('lossy', function (feature, isSupported) {
   if (isSupported) {
      console.log('支持');
      console.log(isSupported)
   }else{
     console.log(555)
   }
});

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25

判断完后，可以将结果保存在本地，下次就不用重复判断，如果浏览器环境支持webp图片，就可以在图片链接后面加上对应参数来加载webp格式图片例子：http://example.com/image_01.png?image_process=resize,l_200/rotate,90/format,webp

# picture标签

html5的picture标签，会自动选择最匹配的资源加载。如果支持webp，那么会优先加载webp，否则加载img标签内src路径的资源。用这个方法可以使用新的avif格式图片，比 webp 图片更小

<picture>
  <source srcset="/path/to/image.webp" type="image/webp">
  <img src="/path/to/image.jpg" alt="insert alt text here">
</picture>

1
2
3
4

#优化

← 严格判断文件上传类型 npm install的执行过程→