董春俠，司占軍

(天津科技大學(xué) 包裝與印刷工程學(xué)院，天津 300222)

?

淺談網(wǎng)頁布局中的響應(yīng)式圖片

董春俠，司占軍

(天津科技大學(xué) 包裝與印刷工程學(xué)院，天津 300222)

在目前響應(yīng)式設(shè)計和自適應(yīng)設(shè)計流行的情況下，響應(yīng)式圖片是響應(yīng)式網(wǎng)頁布局中的一個重要方面。介紹了響應(yīng)式圖片在網(wǎng)頁應(yīng)用中的優(yōu)點，簡單分析了js和CSS兩種實現(xiàn)響應(yīng)式圖片的方式，研究了HTML5規(guī)范下全新的響應(yīng)式圖片的實現(xiàn)方式，最后對js、CSS和HTML5三種實現(xiàn)方式進行比較，分析其各自的優(yōu)缺點。

網(wǎng)頁布局；響應(yīng)式圖片；HTML5

0 引言

近年來，隨著移動設(shè)備的不斷普及，人們越來越多地依賴智能手機、平板電腦等移動設(shè)備進行網(wǎng)站瀏覽[1]。目前，大多數(shù)響應(yīng)式布局網(wǎng)站中的圖片是針對電腦進行設(shè)計的，圖片較大，分辨率比較高，手機等移動設(shè)備在加載時非常緩慢，特別是網(wǎng)站首頁的輪播圖。對于流量昂貴的時代，讓小屏幕的手機加載一張為大屏幕PC設(shè)計的高質(zhì)量圖片，一方面增加了流量消耗，另一方面耗費了更長的加載時間。同樣，在PC端加載一張小圖片，雖然速度很快，但是圖片模糊又降低了用戶的體驗[2]。在這種情況下加載與用戶設(shè)備相匹配的圖片，既快速，又不會影響用戶的體驗，可幫助用戶節(jié)省流量和時間的成本。

1 響應(yīng)式圖片介紹

響應(yīng)式圖片不僅僅指圖片的排版和布局，而更多的指用戶代理根據(jù)輸出設(shè)備的分辨率不同來加載不同類型的圖片，同時，在改變輸出設(shè)備類型或分辨率時，瀏覽器能及時加載對應(yīng)類型的圖片[3]，因此響應(yīng)式圖片的解決方案具有在確保最佳的圖片被加載的同時，帶寬又不會被過大的圖片所浪費的優(yōu)點，大大提高了用戶體驗。

2 實現(xiàn)方式

響應(yīng)式圖片的實現(xiàn)方式根據(jù)其控制方式可以分為三種：js與服務(wù)端、CSS方式和HTML新標簽與新屬性。

2.1 js和服務(wù)端

通過js控制圖片的加載，其原理是跟蹤窗口的resize和load事件，通過判斷瀏覽器窗口的大小與設(shè)置的斷點來動態(tài)修改圖片的路徑。其代碼如下：

$(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);

})

服務(wù)端控制圖片加載是通過把屏幕或設(shè)備信息寫入Cookie，獲取圖片時，在服務(wù)器端決定返回哪種圖片。該方法可以省去編寫js腳本的麻煩，兼容性也比較好。

2.2 CSS方式

通過CSS控制實現(xiàn)響應(yīng)式圖片有兩種方式，一是媒體查詢，二是images-et。

(1)媒體查詢[4]

通過CSS媒體查詢實現(xiàn)網(wǎng)頁適應(yīng)多種顯示設(shè)備。把不同規(guī)格的CSS圖片分別添加到對應(yīng)的媒體查詢中能實現(xiàn)響應(yīng)式圖片效果。代碼示例如下：

@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是第一代響應(yīng)式圖片規(guī)范語法，用于CSS背景圖，它能夠使瀏覽器根據(jù)分辨率選擇圖像。代碼示例如下：

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

上段代碼表示當設(shè)備的設(shè)備像素比為1時，即常規(guī)分辨率顯示設(shè)備，顯示picture-1X.jpg圖片；當設(shè)備像素比為2時，即高清分辨率顯示設(shè)備，顯示picture-2X.jpg圖片。

2.3 HTML新標簽和新屬性[6-7]

HTML5.1的規(guī)范草案中，將picture標簽和srcset與sizes屬性納入其中，并為img元素增加了兩個新屬性：srcset和sizes，使得瀏覽器可以根據(jù)自身情況選擇最好的圖片。該規(guī)范解決了以下問題：(1)基于設(shè)備像素比(device-pixel-radio)選擇；(2)基于viewport選擇；(3)基于Art direction(美術(shù)設(shè)計)選擇；(4)基于圖像格式選擇。

2.3.1 srcset屬性：基于設(shè)備像素比選擇圖片

srcset是img標簽新增的屬性，它通過設(shè)置不同像素比的圖片源，使得瀏覽器在加載時根據(jù)設(shè)備的設(shè)備像素比來加載相應(yīng)的圖片。示例代碼：

srcset屬性列出了瀏覽器可以選擇加載的源圖像池，它按倍數(shù)(例如1x,2x,3x…)提供多張不同分辨率的圖片，適用于固定寬度圖片。

2.3.2 sizes屬性：基于視口寬度選擇圖片

對于可變寬度的圖像，可使用srcset搭配w描述符以及sizes屬性來實現(xiàn)響應(yīng)式圖片。srcset用來聲明一組圖像源，瀏覽器根據(jù)所使用描述符指定的條件來選擇圖像，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標簽：基于美術(shù)設(shè)計選擇圖像

picture類似于video和audio標簽，瀏覽器首先會遍歷picture中的source設(shè)置，直到找到滿足條件的source設(shè)置，然后將其中的srcset匹配到img標簽內(nèi)，因此可以為img設(shè)置多組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等圖片格式，近幾年又出現(xiàn)了一些新的圖片格式如WebP、JPEG-XR，這些新的圖像格式在較小的文件大小下保證了較好的圖片質(zhì)量。但是瀏覽器對這些新圖片格式的支持情況不是很好，WebP只有Chrome和Opera支持，JPEG-XR僅IE支持。通過設(shè)置source的type屬性，可以讓瀏覽器加載不同格式的圖片，示例代碼如下：

type屬性用來指定每個圖像的MIME類型，瀏覽器會選擇第一個含有其支持的MIME類型的源。如果瀏覽器無法識別所有的圖像類型，它會選擇img元素提供的圖片。

3 實現(xiàn)方式比較

js和服務(wù)端實現(xiàn)響應(yīng)式圖片是比較傳統(tǒng)的實現(xiàn)方式，兼容性比較好，但需要編碼實現(xiàn)響應(yīng)式的邏輯，修改時不方便，屬于命令式的實現(xiàn)。

CSS @media媒體查詢是目前常用的方式，除了IE11之前的版本，幾乎所有的瀏覽器都支持；對于image-set其語法和功能與srcset相似，其針對不同像素比的設(shè)備設(shè)置不同分辨率的圖片，目前只有Chrome、Opera和Safria能夠很好地支持該屬性。

picture標簽和img的新屬性srcset與sizes是一種聲明式的實現(xiàn)方式，它們通過將圖片地址聲明在html中，由瀏覽器自行決定加載，這種方法更加靈活，把展示的邏輯從js腳本或服務(wù)器端分離出來，即將展現(xiàn)與業(yè)務(wù)邏輯分離，降低了耦合。對于這些新標簽和新屬性IE所有版本均不支持， Chrome、Firfox、Opera和Safria都能夠較好地支持。

通過加載多張圖片實現(xiàn)響應(yīng)式布局的方案，雖然能夠節(jié)省流量和加載時間，但是由于其需要在服務(wù)器提供多張圖片，因此會占用更多的服務(wù)器空間；另一方面，當瀏覽器窗口大小改變而加載不同圖片時，增加了瀏覽器向服務(wù)器請求的次數(shù)，加重了服務(wù)器的負載。

4 結(jié)論

響應(yīng)式圖片為移動端和PC端設(shè)備提供了不同的圖片，使得瀏覽器根據(jù)不同情況顯示不同圖片，節(jié)省了移動端用戶的流量和加載時間，提高了用戶體驗。其實現(xiàn)方式主要有三種：一是js和服務(wù)端動態(tài)；二是在CSS的媒體查詢和image-set控制圖片的顯示；三是借助HTML的新標簽和新屬性來實現(xiàn)響應(yīng)式圖片。由于瀏覽器的支持情況不同，開發(fā)者可根據(jù)用戶情況選擇不同的方法。

[1] 陳員義,李藝志. 基于Bootstrap響應(yīng)式Web前端研究[J]. 福建電腦,2015, 38(12):72-73.

[2] 前端開發(fā)博客. 響應(yīng)式圖片的3種解決方案[EB/OL]. (2015-12-29) [2016-11-15].http://caibaojian.com/3 -solutions -for -responsive-image.html.

[3] 陳益全,吳多智. 斷點在響應(yīng)式網(wǎng)頁設(shè)計中的應(yīng)用研究[J]. 微型電腦應(yīng)用,2016,32(5):41-43.

[4] 陳梅,蘇晨,高斐. CSS3在響應(yīng)式網(wǎng)頁設(shè)計中的應(yīng)用[J]. 電腦知識與技術(shù),2016,12(19):30-31.

[5] 陳奕緯,吳多智,陳益全. 響應(yīng)式圖片在網(wǎng)頁設(shè)計中的應(yīng)用研究[J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報,2016,15(3):9-12.

[6] Blueed. 響應(yīng)式圖片101[EB/OL]. (2015-09-23) [2016-11-15].http://www.w3cplus.com/responsive/responsive-images-101-definitions.html.

[7] 騰訊ISUX. 響應(yīng)式圖像[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

董春俠，司占軍.淺談網(wǎng)頁布局中的響應(yīng)式圖片[J].微型機與應(yīng)用，2017,36(13)：79-81，84.

2016-11-10)

董春俠(1992-)女，碩士在讀，主要研究方向：數(shù)字出版、網(wǎng)站前端開發(fā)。

司占軍(1971-)，男，碩士，教授，碩士生導(dǎo)師，主要研究方向：印刷色彩及圖形圖像處理、數(shù)字出版技術(shù)、虛擬現(xiàn)實。