响应式图片快速上手

responsive image

为什么要使用响应式图片？

当前整个前端都有向移动端转移的趋势，微信上的各种H5页面更是用得飞起，为了吸引用户，不可避免要用到各种图片。图片的使用面对两个问题：

• 该用什么大小的图片？（不要告诉我手机上看横条状图片的用户体验很好）
• 该用什么质量的图片？（低质量图Retina会生气的好吗）

为什么要写这篇文章？

在百度上找，有且仅有一篇淘宝UED写的CSS与HTML5响应式图片，作于2013.1，对于2014.9才在chrome38+上实现的响应式图片，几乎已经没有实际价值。而偶然之间发现的这个好玩好用的东西，因为中文资料的稀缺而被湮没实在是可惜。这就是为什么要写这篇文章的原因。

掀开响应式图片的裙摆

引文中提到的两个问题能在响应式图片技术的应用中得到较完美的解决。那么问题来了——

什么叫响应式图片？

• 官方范儿的：用户代理根据输出设备的分辨率不同加载不同类型的图片，不会造成带宽的浪费。同时，在改变输出设备类型或分辨率时，能及时加载对应类型的图片。
• 通俗易懂的：手机端咱不给它长条图，给它方块儿图；分辨率高的Retina屏幕，咱给它@3x图，分辨率低的爪机，咱给它质量差一点儿的（反正都显示不出高质量的嘛）。

这货既然这么好用，这货怎么来的？

响应式图片最早起源于W3C上的一个讨论响应式图片的小组，

跟随响应式网页出现，2014年9月chrome38上正式加入
响应式图片相关属性。

兼容性：目前只兼容chrome38+，但是目测会普及，因为太好用且有用了。

对付傲娇的Retina和视流量如生命的移动端

首先说两个我自己遇到过的问题吧。

一是自从用了联通4G，上网爽是爽了，每个月交网费真是交到哭。最开始老怀疑联通计流量的机制是不是有问题，后来偶然打开一个微信H5页面，图多到让人泪流满面啊，4G网速快根本看不出来加载延迟啊，这么多图流量跑得飞起啊，知乎回答提示多图真是良心啊...跑远了。总之，桌面端和移动端真没必要用一样的图，给个30003000的@3x图放手机上和700700的@1x有什么区别？

二是在做BIOMOD国际分子生物竞赛网站的时候，首页需要放一张超大的gif动图，大家可以感受一下（爪机流量慎入）。也就是做这个网站的时候，发现了有响应式图片的存在。

干货来了：如何实现针对不同设备自动匹配不同质量的图片？

首先，要匹配不同质量的图片，至少得提供给浏览器一堆不同质量的图片吧？（不然为啥射鸡师苦逼呢...）直接上代码：

<img
    srcset="img/large.jpg  1920w, 
            img/medium.jpg  960w,
            img/small.jpg 310w"
    src="img/small.jpg"
    alt=“balabbala"/>

这是一个胖子img标签，里面多了一个不熟悉的东西：srcset，里面放了3张图片，large，medium，和small。值得关注的有两点：

• srcset中的图片后面跟了个小尾巴：1920w，代表width: 1920px。
• 有了srcset，还是需要src镇场子，因为不是所有的浏览器都叫google chrome...

对于胖子img标签，浏览器会自动选择加载最合适的图片。（最合适？什么鬼？但是真的是浏览器选的好吗？！看看 Eric Portis 帅哥的加载测试图表就知道了呢。浏览器的心猜不透啊）

其次，预期出现medium大小（960px）的图片，结果出现了large大小（1920px）的图片，文档流可能被破坏掉，因此，重调大小很重要。sizes属性派上了用场：

sizes="500px"

同时允许使用媒体查询的方法控制图片输出大小：

sizes="(min-width: 41.25em) 38.75em,
           calc(100vw - 2.5em)"

因此，自适应输出质量，就是使用srcset给不同质量图片+sizes缩放图片便于输出，整体代码如下：

<img
    srcset="img/large.jpg   1920w, 
            img/medium.jpg  960w,
            img/small.jpg   310w"
    src="img/medium.jpg"
    sizes="(min-width: 41.25em) 38.75em,
           calc(100vw - 2.5em)"
    alt=“balabbala"/>

消除爪机上长条便状图片

手机上的横条便状图片看起来很不爽，竖屏上的横条状图片并没有发挥移动设备高度远大于宽度的特性，用通俗的话说，就是丑。

考虑针对手机端输出方块状图片，首先想到的是至少要一张方块图和一张长条图（用在桌面端），再进一步想，为了发挥前一部分提及的自适应输出图片质量的方法，我们需要的不是两张图片，而是两个srcset。

问题来了：

• 怎么判断是爪机/平板？
• 难道直接在胖子img中塞两个src进去吗？

解决第一个问题的思路比较直接，需要用到『响应式图片』的亲兄弟：『响应式网页』中的方法——没错，媒体查询。

这个时候我们蛋疼了：媒体查询media属性是在标签里写的，要是一个胖子img里面塞两个srcset，media根本没法儿写。

贴心的响应式图片社区里面的一群大佬开始商量：图片也是一种网页上的信息源吧，直接用source标签装media属性+srcset得了。img标签没有结束标签吧？塞不下source标签啊！解决方法看起来笨笨的但是无力反驳啊：source跟img并列，用个标签picture包起来。代码：

<picture>
    <!-- 16:9 crop -->
    <source
        media="(min-width: 36em)"
        srcset="quilt_2/detail/large.jpg  1920w,
                quilt_2/detail/medium.jpg  960w,
                quilt_2/detail/small.jpg   480w" />
    <!-- square crop -->
    <source
        srcset="quilt_2/square/large.jpg   822w,
                quilt_2/square/medium.jpg  640w,
                quilt_2/square/small.jpg   320w" />
    <img
        src="quilt_2/detail/medium.jpg"
        alt="balabalabalaba" />
</picture>

代码很简单：16:9的宽屏图片用在桌面端，方形的图片用在移动端。source标签实现媒体查询和用来装srcset，这个时候胖子img终于成功瘦身，变成古老而苗条的img标签。最后将source和img用一个picture标签包起来就行。

前瞻性和实用性的工作

当前互联网使用最多的图片格式不外乎：jpg，gif，png；最多再加上可以实现线条运动和不失真缩放的svg。但 WebP 和 JPEG XR 格式的图片正在进入前端工程师的视野：它们有望实现超压缩，并具有无失真、提供alpha通道的特性。[参考自Eric Portis 帅哥的responsive images in practice]

source标签允许加入其他格式的图片srcset，只需要在标签的type属性做出相应申明即可：

<picture>
    <!-- 16:9 crop -->
    <source
        type="image/webp"
        media="(min-width: 36em)"
        srcset="quilt_2/detail/large.webp  1920w,
                quilt_2/detail/medium.webp  960w,
                quilt_2/detail/small.webp   480w" />
    <source
        media="(min-width: 36em)"
        srcset="quilt_2/detail/large.jpg  1920w,
                quilt_2/detail/medium.jpg  960w,
                quilt_2/detail/small.jpg   480w" />
    <!-- square crop -->
    <source
        type="image/webp"
        srcset="quilt_2/square/large.webp   822w,
                quilt_2/square/medium.webp  640w,
                quilt_2/square/small.webp   320w" />
    <source
        srcset="quilt_2/square/large.jpg   822w,
                quilt_2/square/medium.jpg  640w,
                quilt_2/square/small.jpg   320w" />
    <img
        src="quilt_2/detail/medium.jpg"
        alt="balabalabalaba" />
</picture>

看到这儿大概是个人都得晕。写张图片的代码量也太坑爹了。

别急。本节标题是前瞻性和实用性。这不还有一半没说呢：机（懒）智（惰）的程序猿给做了代码生成器。

最后，希望大家用的爽！

[引用1：使用了淘宝UEDCSS与HTML5响应式图片中对响应式图片的中文定义]
[引用2：翻译并使用了Eric Portis 帅哥的responsive images in practice中对webP图片格式的讲解及部分源代码]

作者署名：Hongyang Wang
版权声明：自由转载-非商用-非衍生-保持署名 | Creative Commons BY-NC-ND 3.0
更多内容请关注我的博客：hongyang.space
和我的简书帐号：HongyangWang