总结
图片标签
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>
所以有的时候完全可以节约带宽去加载合适尺寸的图片
img标签 srcset属性
响应式
第一种：
通过 @media 实现
@media (min-width: 769px) { .bg { background-image: url(bg1080.jpg); } } @media (max-width: 768px) { .bg { background-image: url(bg768.jpg); } }
\
第二种： image-set()
canvas
在不借助任何工具的情况下，能在浏览器环境下压缩图片的只能是canvas,而且这种压缩模式比较有限。（所以更多的需要借助后端压缩），下面是canvas转图片的api总结
