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

[[196761]]

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

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

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

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

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

如果你弄清楚了以上三個(gè)概念，知道一些高端設(shè)備為了讓圖片顯示更清晰，會(huì)在瀏覽器底層把圖片進(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èn)題，用w對(duì)像素的控制更加靈活，因?yàn)橄嗤脑O(shè)備像素比可能有著懸殊的像素差別，進(jìn)而導(dǎo)致顯示大小發(fā)生變化，例如，有兩臺(tái)設(shè)備，一臺(tái)CSS像素寬720，像素比2，另外一臺(tái)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”>,則兩臺(tái)設(shè)備上都會(huì)顯示分辨率為720*400的demo-big.jpg，則他們所占屏幕寬度為:

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

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

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

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

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

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

1，下載代碼，并把所有訪問(wèn)圖片的請(qǐng)求重定向到Responsive Image的plm.php文件。

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

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

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

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

括號(hào)里面為動(dòng)作，可以連續(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