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

董春俠，司占軍

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

?

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

董春俠，司占軍

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

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

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

0 引言

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

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

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

2 實(shí)現(xiàn)方式

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

2.1 js和服務(wù)端

通過(guò)js控制圖片的加載，其原理是跟蹤窗口的resize和load事件，通過(guò)判斷瀏覽器窗口的大小與設(shè)置的斷點(diǎn)來(lái)動(dòng)態(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ù)端控制圖片加載是通過(guò)把屏幕或設(shè)備信息寫(xiě)入Cookie，獲取圖片時(shí)，在服務(wù)器端決定返回哪種圖片。該方法可以省去編寫(xiě)js腳本的麻煩，兼容性也比較好。

2.2 CSS方式

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

(1)媒體查詢[4]

通過(guò)CSS媒體查詢實(shí)現(xiàn)網(wǎng)頁(yè)適應(yīng)多種顯示設(shè)備。把不同規(guī)格的CSS圖片分別添加到對(duì)應(yīng)的媒體查詢中能實(shí)現(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);} }

該段代碼表示當(dāng)屏幕大小≤480 px時(shí)，顯示small.jpg；當(dāng)屏幕大小在481 px～800 px之間時(shí)，顯示middle.jpg；當(dāng)屏幕大小≥801 px時(shí)，加載large.jpg。

(2)image-set[5]

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

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

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

2.3 HTML新標(biāo)簽和新屬性[6-7]

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

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

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

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

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

對(duì)于可變寬度的圖像，可使用srcset搭配w描述符以及sizes屬性來(lái)實(shí)現(xiàn)響應(yīng)式圖片。srcset用來(lái)聲明一組圖像源，瀏覽器根據(jù)所使用描述符指定的條件來(lái)選擇圖像，sizes屬性為瀏覽器提供將要顯示圖像的尺寸信息，該屬性包含兩個(gè)值：第一個(gè)是媒體條件，第二個(gè)是源圖尺寸。示例代碼如下：

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

src="img/800.jpg" alt="默認(rèn)圖像">

w描述符告訴瀏覽器列表中的每個(gè)圖像的寬度，vw代表視口寬度，每個(gè)vw單位代表視窗寬度的1%。上述代碼表示在視口寬度小于480 px時(shí)，圖像的寬度與視口等寬；當(dāng)視口寬度小于800 px時(shí)，圖像的寬度為視口寬度的75%；當(dāng)視口寬度大于800 px時(shí)，圖片的寬度為500 px。

2.3.3 picture標(biāo)簽：基于美術(shù)設(shè)計(jì)選擇圖像

picture類似于video和audio標(biāo)簽，瀏覽器首先會(huì)遍歷picture中的source設(shè)置，直到找到滿足條件的source設(shè)置，然后將其中的srcset匹配到img標(biāo)簽內(nèi)，因此可以為img設(shè)置多組srcset來(lái)匹配不同的媒體查詢條件。示例代碼：

source為瀏覽器提供要顯示圖像的供選版本，media屬性表示要查詢的條件，srcset指定不同的圖片源。當(dāng)視口寬度大于1 600 px時(shí)，加載large.jpg；當(dāng)視口寬度大于800 px時(shí)，瀏覽器會(huì)加載middle.jpg；而當(dāng)寬度小于800 px時(shí)，會(huì)加載img提供的默認(rèn)圖像small.jpg。

2.3.4 type屬性：基于圖片格式的選擇

除了常見(jiàn)的jpg、png、gif、svg等圖片格式，近幾年又出現(xiàn)了一些新的圖片格式如WebP、JPEG-XR，這些新的圖像格式在較小的文件大小下保證了較好的圖片質(zhì)量。但是瀏覽器對(duì)這些新圖片格式的支持情況不是很好，WebP只有Chrome和Opera支持，JPEG-XR僅IE支持。通過(guò)設(shè)置source的type屬性，可以讓瀏覽器加載不同格式的圖片，示例代碼如下：

type屬性用來(lái)指定每個(gè)圖像的MIME類型，瀏覽器會(huì)選擇第一個(gè)含有其支持的MIME類型的源。如果瀏覽器無(wú)法識(shí)別所有的圖像類型，它會(huì)選擇img元素提供的圖片。

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

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

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

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

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

4 結(jié)論

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

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

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

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

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

[5] 陳奕緯,吳多智,陳益全. 響應(yīng)式圖片在網(wǎng)頁(yè)設(shè)計(jì)中的應(yīng)用研究[J].安徽電子信息職業(yè)技術(shù)學(xué)院學(xué)報(bào),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è)布局中的響應(yīng)式圖片[J].微型機(jī)與應(yīng)用，2017,36(13)：79-81，84.

2016-11-10)

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

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