更加智能好用的倍图展开方式

背景

昨天突然i想起来前两年尝试过的img-srcset这个属性，当时赶着完成课程设计，在firebox发现有效果，在chrome上半点用都没，但是这玩意的兼容性如下：

imgset兼容性

其实兼容性我觉得挺好的，所以我还是要再尝试尝试！

介绍

srcsert具有两个版本：

1. 旧版

   ![](mm@1x.jpg)复制代码

2. 新版

   <img src="./img/x-pc.png"
        srcset="./img/x-pc.png 300w, ./img/x-pc@2x.png 500w"
        sizes="(min-width: 300px) 400px, calc(100vw - 2rem)">复制代码

emm.....旧版不想说了，反正不好用也已经被淘汰了，新版的，其实很简单：

1. srcset这个属性定义图片然后告诉浏览器你图片的宽度
2. sizes这个属性定义在不同情况下，对于图片宽度的定义，单位除了不能使用%（很费解，不过可以用vw代替），calc()也可以

看一看

• 宽度250px情况下

250px

• 宽度300px情况下

300px

懒得录gif，当你宽度慢慢增大一个临界点时浏览器会去加载二倍图并且替换，sizes规定了图片的大小，比如第一个例子上图片大小恒定500px，注意sizes的合理设置，否则会产生图片大小的跳动，得到两个结论：

1. 优先适配高质量图片原则
2. 存在缓存时优先加载缓存图片

进阶

我们来探究一下w这个单位，先从sizes这个属性说起。
sizes相当于动态定义图片的width和height，然后我们把上面的例子做一些修改：

<img src="./img/x-pc.png"
        srcset="./img/x-pc.png 150w, ./img/x-pc@2x.png 250w"
        sizes="(min-width: 200px) 400px, calc(100vw - 20px)">复制代码

150px

171px

图1： 2 （150px - 20px）
图2： 2 （171px - 20px）
我个人的理解是：w只是告诉浏览器，我认为这张图是什么大小，浏览器会根据你给的值取计算出一个比值，比如上面这个比值是2，然后去乘下面的sizes，公式就是：
实际渲染大小 = （原图大小 / 声明大小） * 对应的sizes

为什么这么做呢？

我猜测，如果按w等于图片宽度的话，在高质量的图片下并不合适，所以w只是起到一个描述图片尺寸作用，就和你爸妈一样，我觉得XXXXXX。

结论

我瞎写，你随便看看就好，觉得哪里不对可以留言