响应式网页图片省流设计方案

响应式网页图片省流设计方案

其实一直都关注网页的自适应设计，也学习并应用着不少可行的方案。
大部分情况下，我们在设计一个页面的时候，为了照顾普通屏幕和视网膜屏幕，同时兼顾 PC 端和手机端，都会设计使用到多尺寸的图片。

对于基于 CSS background-image 属性的图片而言，尺寸只需要设计原始 和 @2x 两种即可(参考：《image-set实现Retina屏幕下图片显示》 作者：大漠)。如：

.logo {
    background-image: url(logo_1x.png);
    background-image: -webkit-image-set(url(logo_2x.png) 2x);
    background-repeat: no-repeat;
}

sketch 可以自定义合适的后缀

但对于 img 标签就不能用这种方法了。在普通屏幕下，其 src 属性可以指定为一个原始尺寸的图片，在视网膜屏幕下则可以使用 srcset 设置一个或多个尺寸的图片（参考：《响应式图片srcset全新释义sizes属性w描述符》- 张鑫旭）。

<img src="图片.jpg" srcset="图片.jpg 640w 1x, 
                           图片-hd.jpg 640w 2x, 
                           图片-large.jpg 1x, 
                           图片-large-hd.jpg 2x" alt="" />

还有一种方法 —— picture元素。<picture> 元素包含一系 <source> 子元素后跟着需要的 <img> 元素。source 元素原理和video 元素的子源类似。

<picture>
    <source media="(min-width: 900px)" srcset="图片-A.jpg, 图片-A_2x.jpg 2x" />
    <source media="(min-width: 750px)" srcset="图片-B.jpg, 图片-B_2x.jpg 2x" />
    <img src="图片.jpg" srcset="图片_2x.jpg" alt="" />
</picture>

每个源必须有一个 srcset 属性，可选属性包括 media、sizes 和type。<source> 元素上的 sizes 和 srcset 的使用和 <img> 上完全一样。

<picture>元素语法 - 来源：https://cloudfour.com/thinks/responsive-images-101-part-6-picture-element/

标准的用法如下：

<picture class="">
    <!--[if IE 9]><video style="display: none;"><![endif]-->
    <source srcset="图片-a.png 1x, 图片-a_2x.png 2x" media="(min-width: 990px)" />
    <source srcset="图片-b.png 1x, 图片-b_2x.png 2x" media="(min-width: 750px)" />
    <!--[if IE 9]></video><![endif]-->
    <img srcset="图片.png 1x, 图片_2x.png 2x" alt="" />
</picture>

有了上面的解决方案，我们就可以针对不同尺寸的设备设计不同尺寸的图片已实现节省流量和加速载入的目的。

参考

• image-set实现Retina屏幕下图片显示 作者：大漠
• Responsive Images 101, Part 6: Picture Element 作者：Jason Grigsby
• 响应式图片101(六)：picture元素 作者：Blueed
• 响应式图片srcset全新释义sizes属性w描述符 作者：张鑫旭