目前手機(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)，筆者博客就是一個(gè)完全自適應(yīng)的網(wǎng)站，但自適應(yīng)網(wǎng)站有一個(gè)難點(diǎn)，那就是圖片問題，圖片在網(wǎng)頁中的重要性毋須去提，那么我們在移動網(wǎng)站中如何展示給用戶合適的圖片呢，一般有以下幾種做法:

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

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

3,在html頭部利用javasctipt生成一個(gè)cookie，包含設(shè)備分辨率和像素比等信息，在用戶代理請求圖片時(shí)，這個(gè)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以逗號分隔的一個(gè)或多個(gè)字符串列表表明一系列用戶代理使用的可能的圖像，每一個(gè)字符串列表包含一個(gè)圖像的URL和可選的寬度描述符(像素加“w”表示)和像素密度描述符(像素比+“x”表示，默認(rèn)為1x),w和x不能同時(shí)使用。sizes表示資源大小的以逗號隔開的一個(gè)或多個(gè)字符串。每一個(gè)資源大小包括一個(gè)媒體條件和一個(gè)資源尺寸的值,它用來指定圖像的預(yù)期尺寸,當(dāng)srcset使用 ‘w’ 描述符時(shí)，用戶代理使用當(dāng)前圖像大小來選擇srcset中合適的一個(gè)圖像URL 如果img不包含srcset或者srcset中沒有’w’描述符，sizes不生效。 被選中的尺寸影響圖像的顯示大小（如果沒有CSS樣式被應(yīng)用的話）。如果沒有設(shè)置srcset屬性，或者沒值，那么sizes屬性也將不起作用。讀起來很拗口，要弄徹底弄清楚，必須明白三個(gè)概念:設(shè)備CSS像素，設(shè)備物理像素，設(shè)備像素比，如果你不清楚，可以查看我之前的這篇文章 響應(yīng)式網(wǎng)站建設(shè)中的像素和寬度問題 。

如果你弄清楚了以上三個(gè)概念，知道一些高端設(shè)備為了讓圖片顯示更清晰，會在瀏覽器底層把圖片進(jìn)行壓縮，在顯示器上用兩個(gè)或者更多的物理像素顯示圖片上個(gè)一個(gè)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

我們這里遇到了一個(gè)問題，用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方案的一個(gè)弊端是需要指定不同屏幕情況下的多個(gè)圖片，如果手動生成這些圖片，費(fèi)時(shí)費(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