[译] 剖析responsive image

之因此会翻译这篇文章是由于我昨天看到@勾三股四的这篇微博，里面推荐的文章就是下面我要翻译的。由于本身一直对响应式图片这个技术很关注，可是一直没有一个很好的总结机会，今天趁着翻译这篇文章总结了，这是本人翻译的第一篇文章，有错误的地方请指出。

博客地址 欢迎关注

原文地址

剖析responsive image

最近对responsive image有一些感悟而后赶忙记下来省得忘了。下面就是个人感悟：

尺寸固定，不一样屏幕密度

若是你是用像素来固定图片尺寸,又想在不一样屏幕密度屏幕上实现响应式图片，能够这样：

<img width="320" height="213"
    src="cat.jpg"
    srcset="cat-2x.jpg 2x,cat-3x.jpg 3x">

它能够正常运行在全部现代浏览器上，并且在不支持srcset的浏览器也能够降级到src。

有一些规则是上面图片所没有提到的:

• srcset里的每一项都是<url> <density>x结构 ,就像cat-2x.jpg 2x

• srcset里项目的顺序并不重要

• 若是你没有声明width/height，浏览器会按照屏幕密度展现它自己原始的width/height。 好比2x资源被匹配到了，它会被渲染成自己的 50%width和 50%height

• 提示一下，若是在3x设备像素比的设备上浏览器渲染的是1x的图片，多是由于糟糕的网络环境

---

案例

这个案例使用的是3张同样的图片，只是尺寸不同，这样咱们很难看出区别。因此译者在这里换了这几张图，而后在Chrome中模拟手机调试，更换分辨率，应该就很明显了。

译者案例

这种方法由于要人为匹配设备像素比，因此1x、2x、3x、4x等等，这样HTML就会太臃肿，因此有了下面的新方法。

尺寸和屏幕密度都不一样

不一样宽度的图片在响应式站点里是很常见的。在这篇博客里,图片内容都是占据了文章100%的宽度，可是文章的宽度并不老是窗口宽度的100%。

为了让浏览器匹配到正确的图片，咱们须要知道：

• 不一样尺寸图片的地址

• 每张图片的宽度

• <img>的宽度

最后一点是特别困难的，由于图片开始下载是在CSS解析以前的，因此<img>的宽度不能从页面布局那获得。

<img src="panda-689.jpg"
    srcset = "panda-689.jpg 689w,
                panda-1378.jpg 1378w
                panda-500.jpg 500w
                panda-1000.jpg 1000w"
    sizes = " (min-width:1066px) 689px,
                (min-width:800px) calc(75vw-137px) ,
                (min-width:530px) calc(100vw-96px) ,
                100vw" >

经过srcset属性，浏览器知道了哪些图片可用以及这些图片的宽度。
经过sizes属性，浏览器知道了<img>相对于一个已知宽度窗口的宽度。
这样，浏览器就能够匹配最佳资源加载了。

你再也不须要说明屏幕密度，浏览器本身会辨别。若是浏览器窗口宽度是1066px甚至更大，<img>会被定为689px。在1x设备浏览器上会下载panda-689.jpg，可是在2x设备浏览器上将会下载panda-1378.jpg。

这里感受做者并无解释清楚 sizes和srcset的工做原理(参照下面的译者案例来看)。

首先，是关于sizes的理解：
好比当前窗口800px，那么sizes会匹配到(min-width:800px) calc(75vw - 137px) ，则这个<img>对应的宽度就是800px*0.75-137px=463px。这个宽度的设定至关于

<img src="..."  width="463" />

知道了<img>的width，而后再看srcset的w:
在dpr为1的时候，463px对应463w，查找srcset，找到500w适合它，就显示500的这张图。
在dpr为2的时候，463px对应926w，查找srcset，找到1000w适合，就显示1000的这张图。

一些规则是上面没有提到的：

• srcset里的每一项是<url> <width-descriptor>w，好比panda-689.jpg 689w

• srcset里每一项的顺序没有影响

• 若是srcset包含了一个宽度描述符(w)，则src会被那些支持srcset的浏览器忽略掉

• sizes里的每一项是<媒体查询> <图片宽度>形式，除了最后一个仅仅是<图片宽度>

• sizes里的宽度单位都是px

• 浏览器使用sizes里的第一个匹配到的媒体查询，因此sizes里的顺序是很重要的

• 和上面同样，浏览器下载一个低分辨率图片多是由于糟糕的网络

若是你没有指明<img>的宽度，浏览器也会正常解析。对sizes精确设置，可是一个不是很确切的宽度也很好。好比

sizes="(min-width:1066px) 689px ,
    (min-width:800px) 75vw,100vw"

挑选哪些图片资源放在srcset里是很困难的，我也没有彻底掌握技巧。在上面的例子里，我设置了一个最小尺寸(注：原文中是最大)(689px)，而后给2x设备设置刚才的两倍尺寸(1378px)。另外两个设置是在这两个值中间任意取的。我没有设置更小的宽度好比320px,由于在这一状况下的屏幕密度是2x或者更高。

srcset + sizes 在 Chrome、Firefox和Opera中都兼容。至于其余浏览器，也会很安全地回退到src属性。不用等待好久，WebKit nightly 和 下一个稳定版本的Edge就会很好地支持它。

WebKit nightly是WebKit的mac port，对于Safari就像Chromium对于Chrome

开发者须要了解的WebKit

---

案例

原文中<img>有一个内联样式width:100%，一开始没有注意到的话还觉得没有变化呢。上面的案例已经修改过了 -。-

仍是由于做者使用了内容相同，尺寸的图片，因此我换了图片从新作了一个例子：

译者案例

这种新方法的srcset用来指向提供的图片资源，没有上面方法的1x、2x，这个都交给浏览器。例子中就指向了3个尺寸图片。

sizes用来表示尺寸临界点，用媒体查询定下图片的实际宽度。

不一样宽度、分辨率和艺术指导

和以前的例子相似除了框架的不一样宽度的变化。它容许你集中精力对付更小的宽度。

• 只要你想，你能够有不少<source>

• 你必须包含一个<img>

• 媒体查询<source>元素上老是被服从的

• 媒体查询是基于窗口的宽度，不是<img>的

• 第一个匹配到的<source>会被使用，因此顺序很重要

• 若是没有匹配到<source>，则<img>被调用

• <img>必须出如今<source>后面

• <source>不支持src，可是支持srcset

一旦<source>或者<img>被选中，srcset和sizes属性就像以前的例子同样解析。

艺术指导:剪裁图片内容来适应特定环境，任什么时候候咱们裁剪或是修改图片来适应一个断点（而非简单缩放），都是一种艺术指导。

能够看出来，艺术指导比以前的srcset+sizes又多了一层维度:source的媒体查询。

<picture>元素在Chrome、Firefox和Opera中兼容良好，在其余浏览器能够回退到<img>。而下一代的Edge也可能会支持。

--

案例

不一样类型

这个方法可让你有更优化的方式去提供给支持它们的浏览器。

<picture>
    <source type="image/webp"
        srcset="snow.webp">
    <img src="snow.jpg">
</picture>

• type属性是mime类型

• 你能够有不少种资源和混合type和media、srcset甚至是sizes取建立一些惊奇的东西

它在Chrome、Firefox和Opera上兼容良好，其余浏览器还能够回退到<img>。

---

案例

扩展阅读

但愿上面的文章可以对各类用例起到参考做用，你能够继续看看下面的文章：

• 十段响应式图片文章 - Jason Grigsby

• 响应式图片:用例和代码片断 - 和这篇文章相似，可是有更多用例

• Client hints - 服务端代替响应式图片的方法

译者推荐文章

与本文结构相似的文章：

• 实战响应式图片 - EFE

• 响应式图片指南 - form Google Developers

• 开始使用响应式图片 - from dev.opera 结构十分清晰

补充文章：

• 艺术指导的例子

• 响应式图片讨论组

• HTTP Client Hints介绍