目前手機(jī)等移動設(shè)備網(wǎng)站開發(fā)已經(jīng)有比較好的解決方案，一種是響應(yīng)式網(wǎng)站，像筆者博客一樣，PC網(wǎng)站就是移動網(wǎng)站，一種是把移動網(wǎng)站和PC網(wǎng)站分開，類似淘寶那樣。從網(wǎng)站SEO的角度來說，兩者并無差別，也各有利弊，不論采取那種方式也都能解決移動設(shè)備瀏覽問題。隨著移動設(shè)備和類型越來越多，我們幾乎不太可能針對某一類設(shè)備建設(shè)單獨(dú)的網(wǎng)站，不論P(yáng)C網(wǎng)站和移動網(wǎng)是否分開建設(shè)，那都意味著我們的移動網(wǎng)站將會面臨越來越多各不相同設(shè)備進(jìn)行訪問，也就是說即使是建設(shè)單獨(dú)的移動網(wǎng)站，我們也必須要考慮網(wǎng)站符合用戶的設(shè)備特性。

[[196761]]

一般來說，網(wǎng)站很容易實(shí)現(xiàn)自適應(yīng)，筆者博客就是一個完全自適應(yīng)的網(wǎng)站，但自適應(yīng)網(wǎng)站有一個難點(diǎn)，那就是圖片問題，圖片在網(wǎng)頁中的重要性毋須去提，那么我們在移動網(wǎng)站中如何展示給用戶合適的圖片呢，一般有以下幾種做法:

1,直接把質(zhì)量***的圖片加入到html中，用戶用不同的設(shè)備訪問時，通過CSS或者javascript控制其大小，這樣直接忽略不同設(shè)備的尺寸，但可能會因?yàn)榧虞d過大的圖片占用太大帶寬而增加訪問時間、耗費(fèi)過多移動流量。

2,異步加載，事先加載一張較小的圖片頁面中，再通過javascript獲取用戶設(shè)備信息，按需加載圖片，這樣解決了速度問題，對于網(wǎng)站排名可能不利。

3,在html頭部利用javasctipt生成一個cookie，包含設(shè)備分辨率和像素比等信息，在用戶代理請求圖片時，這個cookie會和其它請求信息一起發(fā)送到服務(wù)器，在服務(wù)端獲取到cookie之后，對圖片進(jìn)行處理，然后傳送給客戶端。這樣做解決圖片尺寸和優(yōu)化問題，但靈活性較差，還可能由于用戶不支持cookie而導(dǎo)致工作失敗，另外在網(wǎng)頁頭部增加javascript的方式總讓人感覺有那么一點(diǎn)奇怪。

為了解決移動開發(fā)中的圖片響應(yīng)式問題，HTML5標(biāo)準(zhǔn)專門增加img標(biāo)簽的srcset和sizes屬性，srcset以逗號分隔的一個或多個字符串列表表明一系列用戶代理使用的可能的圖像，每一個字符串列表包含一個圖像的URL和可選的寬度描述符(像素加“w”表示)和像素密度描述符(像素比+“x”表示，默認(rèn)為1x),w和x不能同時使用。sizes表示資源大小的以逗號隔開的一個或多個字符串。每一個資源大小包括一個媒體條件和一個資源尺寸的值,它用來指定圖像的預(yù)期尺寸,當(dāng)srcset使用 ‘w’ 描述符時，用戶代理使用當(dāng)前圖像大小來選擇srcset中合適的一個圖像URL 如果img不包含srcset或者srcset中沒有’w’描述符，sizes不生效。 被選中的尺寸影響圖像的顯示大?。ㄈ绻麤]有CSS樣式被應(yīng)用的話）。如果沒有設(shè)置srcset屬性，或者沒值，那么sizes屬性也將不起作用。讀起來很拗口，要弄徹底弄清楚，必須明白三個概念:設(shè)備CSS像素，設(shè)備物理像素，設(shè)備像素比，如果你不清楚，可以查看我之前的這篇文章 響應(yīng)式網(wǎng)站建設(shè)中的像素和寬度問題 。

如果你弄清楚了以上三個概念，知道一些高端設(shè)備為了讓圖片顯示更清晰，會在瀏覽器底層把圖片進(jìn)行壓縮，在顯示器上用兩個或者更多的物理像素顯示圖片上個一個CSS像素，就能理解在w是指設(shè)備的物理像素寬度，x是指設(shè)備的設(shè)備像素比，那么下面兩段代碼的意思分別是:

<img src="demo-small.jpg" srcset="demo-small.jpg 300w,demo-medium.jpg 600w,demo-big.jpg 750w"> 
300物理像素寬的設(shè)備加載demo-small.jpg,600加載demo-medium.jpg,750加載demo-big.jpg
<img src="demo-small.jpg" srcset="demo-small.jpg 1px,demo-medium.jpg 2x,demo-big.jpg 2.5x">
1設(shè)備像素比加載demo-small.jpg,2加載demo-medium.jpg,2.5加載demo-big.jpg

我們這里遇到了一個問題，用w對像素的控制更加靈活，因?yàn)橄嗤脑O(shè)備像素比可能有著懸殊的像素差別，進(jìn)而導(dǎo)致顯示大小發(fā)生變化，例如，有兩臺設(shè)備，一臺CSS像素寬720，像素比2，另外一臺CSS像素寬1024，像素比也是2;有兩張圖片，分辨率分別為360*200的demo-small.jpg和720*400的demo-big.jpg，用像素比控制顯示:<img src=”demo-small.jpg” srcset=”demo-small.jpg 1px,demo-big.jpg 2x”>,則兩臺設(shè)備上都會顯示分辨率為720*400的demo-big.jpg，則他們所占屏幕寬度為:

設(shè)備1: ([圖片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 50%

設(shè)備2: ([圖片像素]720 ÷ [像素比]2) ÷ [CSS像素]720 = 35%

用’w’描述符的方式可能非常靈活的控制加載的圖片和展示的大小，還是上面的設(shè)備，可以通過w指定合適的圖片，也可以通過sizes指定圖片的顯示大小。

綜上我們可以得知，使用srcset和描述符，瀏覽器能根據(jù)客戶端的情況，自動選擇需要加載的圖片，進(jìn)行定向加載，相對于文章開頭說的三種響應(yīng)式圖片的解決方案，靈活性強(qiáng)，節(jié)省流量，快速網(wǎng)站加載速度，是更好的響應(yīng)式圖片解決辦法。

動態(tài)Responsive Image生成方案

srcset方案的一個弊端是需要指定不同屏幕情況下的多個圖片，如果手動生成這些圖片，費(fèi)時費(fèi)力，利用Responsive Image工具，可以動態(tài)自動生成圖片，操作如下：

1，下載代碼，并把所有訪問圖片的請求重定向到Responsive Image的plm.php文件。

2，創(chuàng)建圖片緩存目錄，打開plm文件，根據(jù)提示做好配置。

3，獲取指定圖片的操作如下:

剪裁:example.com/example.jpg/(crop:[x[,y,]]width[,height])

縮放:example.com/example.jpg/(reduce:[x[,y,]]width[,height])

括號里面為動作，可以連續(xù)多次使用:

example.com/example.jpg/(crop:[x[,y,]]width[,height])/(reduce:[x,[y,]]width[,height])為先進(jìn)行剪裁，然后壓縮處理

[]中的為可選值，x,y不填默認(rèn)為0,height不填默認(rèn)為圖片高度（剪裁）和寬度縮小后圖片高度（縮放）

可以參考Responsive Image的index.html文件進(jìn)行配置。

參考資料

1. 響應(yīng)式圖片srcset全新釋義sizes屬性w描述符
2. HTML img element
3. Responsive Image