响应式图片 (responsive image)
更新 : 2019-02-21
除了写 srcset sizes 还有一种 x1, x2, x3, x4 的写法.
我们对比一下
假设
pc 希望是 1000w
mobile 希望是 300w
size 的写法是 if device == 300w use 300w, else if device == 1000w use 1000w (这里写的应该是 css media query, 但是我用 js 来表达就好)
游览就会通过匹配 device width 然后自动乘与用户的 retina 去寻找图片.
有时候我们并不需要 responsive 依据 device 的 width
但我们依然想要兼顾 retina
那么我们可以时候 x1, x2 的写法
只写 srcset 就可以了, 不需要写 sizes
srcset= 300w.jpg x1, 600w.jpg x2
无论 device 是 pc 还是 mobile 都只依据 retina 选图.
显然 sizes 还是比较强大的，而且 sizes 的 media query 也可以单独匹配 retina.
再来一个复杂的场景.
比如我们要做一个 image gallery 大图.
我们允许 admin upload 任意的图片.
user 则全屏展现图片.
举例
user device :
pc 1366 x 768 retina 1
pc 1366 x 768 retina 2
mobile 420 * 720 retina 1
mobile 420 * 720 retina 2
mobile 420 * 720 retina 3
mobile 420 * 720 retina 4
5 种 device
而 admin upload 得图片有 3 张
500x500
1500x1500
3000x3000
我们希望用户 device 小得情况下，不要给大图, 也希望用户 device 大得情况下，尽量展现大图.
这个时候得 srcset 我们需要依赖于 admin 图片得大小来写 (动态得，每张图得 srcset 都可能不同写法)
pc 1366 x 768 retina 1
pc 1366 x 768 retina 2
500x500
在 pc 得情况下, 500x500 希望完全展现
mobile 420 * 720 retina 1
手机 retina 1 得情况下, 我们要做小图
500 缩率图到 420.
然后 sizes = if (device width == 420 && retina == 1) use 420w;
我们只把需要压小得图写入 srcset. 其余得都用最大的图
写完小图后最后 sizes 加上
else if (retina == 1) 500w
else if (retina == 2) 500w
else if (retina == 3) 500w
else if (retina == 4) 500w
游览器有一个如果匹配不到就用最大图得概念，所以最后这个我们也可以改成
else 500w
就可以了. 总结就是写 if 所有需要缩率图得情况，然后最后加上 else 最大图.
更新 : 2019-01-01
如果我们不写 srcset 也不写任何 width, img 会依据图的大小来设置 width, retina 1 的情况下是完全 ok 的.
但是呢, 在有 retian 的情况就糟糕了, 因为它不会兼顾 device retina, 图片会变的很大很萌.
它不理会 mata width=device-width 的.
所以我们怎样都需要自己去设置 wdith , 或者使用 srcset. 不能放任不管哦.
从前世上只有一种 device.
屏幕大小都一样, 这时我们图片写 src 就可以了.
后来不同的屏幕大小出现了.
如果我们只是简单的用 css 来缩略大图去小图，这样的话虽然设计过关，但是却浪费了用户的宽带去下载较大的图，这种浪费不好。
后来就有了 <img sizes="mediaquery imageWidth" srcset="imagesrc imageWidth, imagesrc imageWidth" />
sizes + srcset
sizes 负责用 mediaquery 针对 device width 等来表示使用多少 width 的图片. 这和写 css responsive 是完全同一个概念
srcset 则负责写入所有可以使用的图片，并且写上所有图片的宽.
游览器匹配 sizes 的 mediaquery 后会找到你想要的 image width, 然后依据 device 的 retina 来乘于 image width, 这时在通过这个 width 去寻找真确的 image src
这样就不会造成浪费了.
