淺談網頁布局中的響應式圖片

董春俠，司占軍

(天津科技大學 包裝與印刷工程學院，天津 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-)，男，碩士，教授，碩士生導師，主要研究方向：印刷色彩及圖形圖像處理、數字出版技術、虛擬現實。