响应式图片 (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

这样就不会造成浪费了.