性能优化之图片（二）

总结

图片标签

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总结

站在巨人的肩膀上

github.com/WangYuLue/i…