性能优化之图片（二）(图形性能优化)
总结
图片标签
picture
根据屏幕匹配的不同尺寸显示不同图片，如果没有匹配到或浏览器不支持 picture 属性则使用 img 元素：
<picture> <source media="(min-width: 650px)" srcset="demo1.jpg"> <source media="(min-width: 465px)" srcset="demo2.jpg"> <img src="img_girl.jpg"> </picture>复制代码
所以有的时候完全可以节约带宽去加载合适尺寸的图片
canvas
在不借助任何工具的情况下，能在浏览器环境下压缩图片的只能是canvas,而且这种压缩模式比较有限。（所以更多的需要借助后端压缩），下面是canvas转图片的api总结
站在巨人的肩膀上
作者：无名小卒123
链接：https://juejin.cn/post/7032471502620459021