浅谈网页布局中的响应式图片

董春侠，司占军

(天津科技大学 包装与印刷工程学院，天津 300222)



浅谈网页布局中的响应式图片

董春侠，司占军

(天津科技大学 包装与印刷工程学院，天津 300222)

在目前响应式设计和自适应设计流行的情况下，响应式图片是响应式网页布局中的一个重要方面。介绍了响应式图片在网页应用中的优点，简单分析了js和CSS两种实现响应式图片的方式，研究了HTML5规范下全新的响应式图片的实现方式，最后对js、CSS和HTML5三种实现方式进行比较，分析其各自的优缺点。

网页布局；响应式图片；HTML5

0 引言

近年来，随着移动设备的不断普及，人们越来越多地依赖智能手机、平板电脑等移动设备进行网站浏览[1]。目前，大多数响应式布局网站中的图片是针对电脑进行设计的，图片较大，分辨率比较高，手机等移动设备在加载时非常缓慢，特别是网站首页的轮播图。对于流量昂贵的时代，让小屏幕的手机加载一张为大屏幕PC设计的高质量图片，一方面增加了流量消耗，另一方面耗费了更长的加载时间。同样，在PC端加载一张小图片，虽然速度很快，但是图片模糊又降低了用户的体验[2]。在这种情况下加载与用户设备相匹配的图片，既快速，又不会影响用户的体验，可帮助用户节省流量和时间的成本。

1 响应式图片介绍

响应式图片不仅仅指图片的排版和布局，而更多的指用户代理根据输出设备的分辨率不同来加载不同类型的图片，同时，在改变输出设备类型或分辨率时，浏览器能及时加载对应类型的图片[3]，因此响应式图片的解决方案具有在确保最佳的图片被加载的同时，带宽又不会被过大的图片所浪费的优点，大大提高了用户体验。

2 实现方式

响应式图片的实现方式根据其控制方式可以分为三种：js与服务端、CSS方式和HTML新标签与新属性。

2.1 js和服务端

通过js控制图片的加载，其原理是跟踪窗口的resize和load事件，通过判断浏览器窗口的大小与设置的断点来动态修改图片的路径。其代码如下：

$(document).ready(function(){

function makeImageResponsive(){

var width=$(window).width();

var img=$(‘#img’);

if (width<=480) {

img.attr(‘src’,‘img/smalljpg’);

}

else if (width<=800) {

img.attr(‘src’,‘img/middle.jpg’);

}

else{

img.attr(‘src’,‘img/large.jpg’);

}

}

$(window).on(‘resize load’, makeImageResponsive);

})

服务端控制图片加载是通过把屏幕或设备信息写入Cookie，获取图片时，在服务器端决定返回哪种图片。该方法可以省去编写js脚本的麻烦，兼容性也比较好。

2.2 CSS方式

通过CSS控制实现响应式图片有两种方式，一是媒体查询，二是images-et。

(1)媒体查询[4]

通过CSS媒体查询实现网页适应多种显示设备。把不同规格的CSS图片分别添加到对应的媒体查询中能实现响应式图片效果。代码示例如下：

@media screen and (max-width:480px) {

.container{background-image:url(small.jpg);} }

@media screen and (min-width:481px) and (max-width:800){

.container{background-image:url(middle.jpg); }}

@media screen and (min-width:801px) {

.container{background-image:url(large.jpg);} }

该段代码表示当屏幕大小≤480 px时，显示small.jpg；当屏幕大小在481 px～800 px之间时，显示middle.jpg；当屏幕大小≥801 px时，加载large.jpg。

(2)image-set[5]

image-set是第一代响应式图片规范语法，用于CSS背景图，它能够使浏览器根据分辨率选择图像。代码示例如下：

background-image:image-set(“img/picture-1X.jpg” 1X, “img/picture-2X.jpg” 2X)

上段代码表示当设备的设备像素比为1时，即常规分辨率显示设备，显示picture-1X.jpg图片；当设备像素比为2时，即高清分辨率显示设备，显示picture-2X.jpg图片。

2.3 HTML新标签和新属性[6-7]

HTML5.1的规范草案中，将picture标签和srcset与sizes属性纳入其中，并为img元素增加了两个新属性：srcset和sizes，使得浏览器可以根据自身情况选择最好的图片。该规范解决了以下问题：(1)基于设备像素比(device-pixel-radio)选择；(2)基于viewport选择；(3)基于Art direction(美术设计)选择；(4)基于图像格式选择。

2.3.1 srcset属性：基于设备像素比选择图片

srcset是img标签新增的属性，它通过设置不同像素比的图片源，使得浏览器在加载时根据设备的设备像素比来加载相应的图片。示例代码：

srcset属性列出了浏览器可以选择加载的源图像池，它按倍数(例如1x,2x,3x…)提供多张不同分辨率的图片，适用于固定宽度图片。

2.3.2 sizes属性：基于视口宽度选择图片

对于可变宽度的图像，可使用srcset搭配w描述符以及sizes属性来实现响应式图片。srcset用来声明一组图像源，浏览器根据所使用描述符指定的条件来选择图像，sizes属性为浏览器提供将要显示图像的尺寸信息，该属性包含两个值：第一个是媒体条件，第二个是源图尺寸。示例代码如下：

sizes="(max-width:480px) 100vw, (max-width:800px) 60vw,500px"

src="img/800.jpg" alt="默认图像">

w描述符告诉浏览器列表中的每个图像的宽度，vw代表视口宽度，每个vw单位代表视窗宽度的1%。上述代码表示在视口宽度小于480 px时，图像的宽度与视口等宽；当视口宽度小于800 px时，图像的宽度为视口宽度的75%；当视口宽度大于800 px时，图片的宽度为500 px。

2.3.3 picture标签：基于美术设计选择图像

picture类似于video和audio标签，浏览器首先会遍历picture中的source设置，直到找到满足条件的source设置，然后将其中的srcset匹配到img标签内，因此可以为img设置多组srcset来匹配不同的媒体查询条件。示例代码：

source为浏览器提供要显示图像的供选版本，media属性表示要查询的条件，srcset指定不同的图片源。当视口宽度大于1 600 px时，加载large.jpg；当视口宽度大于800 px时，浏览器会加载middle.jpg；而当宽度小于800 px时，会加载img提供的默认图像small.jpg。

2.3.4 type属性：基于图片格式的选择

除了常见的jpg、png、gif、svg等图片格式，近几年又出现了一些新的图片格式如WebP、JPEG-XR，这些新的图像格式在较小的文件大小下保证了较好的图片质量。但是浏览器对这些新图片格式的支持情况不是很好，WebP只有Chrome和Opera支持，JPEG-XR仅IE支持。通过设置source的type属性，可以让浏览器加载不同格式的图片，示例代码如下：

type属性用来指定每个图像的MIME类型，浏览器会选择第一个含有其支持的MIME类型的源。如果浏览器无法识别所有的图像类型，它会选择img元素提供的图片。

3 实现方式比较

js和服务端实现响应式图片是比较传统的实现方式，兼容性比较好，但需要编码实现响应式的逻辑，修改时不方便，属于命令式的实现。

CSS @media媒体查询是目前常用的方式，除了IE11之前的版本，几乎所有的浏览器都支持；对于image-set其语法和功能与srcset相似，其针对不同像素比的设备设置不同分辨率的图片，目前只有Chrome、Opera和Safria能够很好地支持该属性。

picture标签和img的新属性srcset与sizes是一种声明式的实现方式，它们通过将图片地址声明在html中，由浏览器自行决定加载，这种方法更加灵活，把展示的逻辑从js脚本或服务器端分离出来，即将展现与业务逻辑分离，降低了耦合。对于这些新标签和新属性IE所有版本均不支持， Chrome、Firfox、Opera和Safria都能够较好地支持。

通过加载多张图片实现响应式布局的方案，虽然能够节省流量和加载时间，但是由于其需要在服务器提供多张图片，因此会占用更多的服务器空间；另一方面，当浏览器窗口大小改变而加载不同图片时，增加了浏览器向服务器请求的次数，加重了服务器的负载。

4 结论

响应式图片为移动端和PC端设备提供了不同的图片，使得浏览器根据不同情况显示不同图片，节省了移动端用户的流量和加载时间，提高了用户体验。其实现方式主要有三种：一是js和服务端动态；二是在CSS的媒体查询和image-set控制图片的显示；三是借助HTML的新标签和新属性来实现响应式图片。由于浏览器的支持情况不同，开发者可根据用户情况选择不同的方法。

[1] 陈员义,李艺志. 基于Bootstrap响应式Web前端研究[J]. 福建电脑,2015, 38(12):72-73.

[2] 前端开发博客. 响应式图片的3种解决方案[EB/OL]. (2015-12-29) [2016-11-15].http://caibaojian.com/3 -solutions -for -responsive-image.html.

[3] 陈益全,吴多智. 断点在响应式网页设计中的应用研究[J]. 微型电脑应用,2016,32(5):41-43.

[4] 陈梅,苏晨,高斐. CSS3在响应式网页设计中的应用[J]. 电脑知识与技术,2016,12(19):30-31.

[5] 陈奕纬,吴多智,陈益全. 响应式图片在网页设计中的应用研究[J].安徽电子信息职业技术学院学报,2016,15(3):9-12.

[6] Blueed. 响应式图片101[EB/OL]. (2015-09-23) [2016-11-15].http://www.w3cplus.com/responsive/responsive-images-101-definitions.html.

[7] 腾讯ISUX. 响应式图像[EB/OL]. (2016-03-22) [2016-11-15].https://isux.tencent.com/responsive-image.html.

Discussing on the responsive images in Web layout

Dong Chunxia, Si Zhanjun

(College of Packaging & Printing Engineering, Tianjin University of Science & Technology, Tianjin 300222, China)

At present, responsive design and adaptive design are popular, responsive picture is an important aspect to responsive Web layout. This article introduced the advantages of responsive images in Web applications, analyzed two traditional ways of js and CSS to realize responsive images, and studied the new implementation under the standard HTML5. Finally, the js, CSS and HTML5 were compared to analyze their advantages and disadvantages.

Web layout; responsive images; HTML5

TP399

A

10.19358/j.issn.1674- 7720.2017.13.024

董春侠，司占军.浅谈网页布局中的响应式图片[J].微型机与应用，2017,36(13)：79-81，84.

2016-11-10)

董春侠(1992-)女，硕士在读，主要研究方向：数字出版、网站前端开发。

司占军(1971-)，男，硕士，教授，硕士生导师，主要研究方向：印刷色彩及图形图像处理、数字出版技术、虚拟现实。