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

背景

昨天忽然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。

结论

我瞎写，你随便看看就好，以为哪里不对能够留言