1、IK。窠惠美展HTML5教程之響應式圖片解決方案如今開發一個網站不是響應式都不好意思拿出來，那么作為響應式中的重要一環響應式圖片你又是如何解決的呢？網站的平均加載已經到了近 2MB并在不斷地增加中，其中圖片占據了絕大多數流量 (63%)。可以肯定的是網頁已經有了嚴重的大小問題，而圖片就是罪魁禍首。雖然已經 有很多種措施可以減少網頁加載量，但或許更重要的步驟之一是確保響應式圖片的加 載方案。通過利用響應式圖片解決方案，我們可以確保最佳的圖片被加載，帶寬不會被 過大的圖片所浪費。因此 W3C定義了 picture標簽：基于檢測客戶端設備類型的可 替換圖片方案。具體是由 picture 這個標簽去實

2、現，也就是說我們現在有了一個基于 標準的響應式圖片解決方案可以用在實踐中。長話短說(人話) 斷點(breakpoints )應該 取決于內容 而不是設備寬度 (CSS3 media query ) 根據尺寸加載不同圖片 計算圖片像素密度并加到圖片加載列表中 通過消除圖片加載列表中太相近的值來讓加載列表變得可維護 利用程序自動輸出圖片的不同大小 利用img標簽的srcset sizes等屬性輸出同一張圖片的不同路徑 /尺寸，以解 決響應式圖片的大小和像素密度的問題Picturefill庫能讓我們現在就使用這些強大的特性 雖然Picturefill還有一些缺點但這么做仍然利大于弊查看DEMO定義第

3、一步就是定義所有響應式圖片的尺寸和斷點，這些信息在網頁原型中就應該被精確的標示出來。重要的一點是 你的斷點應該取決于你的內容而不是不同設備的寬度。這么做是因為設備的參數是在不斷變化的，流行的設備尺寸總是在變。通過讓內容來決定斷點位置，這將確保我們的界面在所有屏幕上響應而不是特殊的幾個設備。注意 當決定哪些圖片應該被做成響應式時，要記住一點，大多數都是放在內容中的圖片。例如在 HTML中插入的圖片而不是在 CSS中的背景圖片。圖片尺寸首先將你的瀏覽器窗口放到最大（或者你規定的內容展示最大寬度），然后記錄下此時 你的內容寬度和你想要展示的圖片寬度，通過瀏覽器的開發者工具或者類似的插件。接下來縮放你

4、的瀏覽器窗口直到你想要給圖片設置寬度的下一個斷點，再繼續縮放直到你記錄下所有的作用于圖片寬度斷點。當你完成的時候你應該記錄下每張圖片在不同大小下應該載入的寬度。舉例，僅僅是例子：IKO街酷學院I IXK-Z QIKUEDU COM注意 關于決定斷點需要注意的是：斷點越多，代碼越難維護。除此之外大量的斷點會使CSS變得臃腫。所以盡量在保證效果的情況下保持最少的斷點。高分辨率下一步是根據你想要支持的分辨率對圖片寬度進行計算。決定要支持那些分辨率是很困難的，因為有 太多的不同的分辨率，并且每支持一種分辨率你需要計算寬度并放在 你的圖片加載列表里。所以需要做的是根據實際情況和你的用戶群體去選擇支持不同

5、的 分辨率。如果你已經決定了需要支持那些高分辨率，那圖片加載列表會像下面這樣：整合如你所見，我們的圖片列表數量會隨著支持不同的分辨率和斷點而變長。通過改變整合列表項讓列表更清晰可控是很有必要的。例如任何相近或者不超過200像素差距的值。將幾個相近的值整合為一個值將有助于構建更清晰的列表：注意 這里用像素來做斷點值只是為了好對應圖片寬度，實際上你的 斷點應該使用相對單位(em/rem not px )輸出現在我們有了一個慎重考慮的圖片寬度列表，下一步則要將每個圖片導出為以斷點名+像素密度倍數為名的文件。例如我將最大的斷點稱為“large ”并且圖片像素密度倍數為兩倍，那么我的文件名則為image

6、_large2x.jpg'。我傾向于在Photoshop中保存圖片為 70% 壓縮，因為70%壓縮能確保達到最優的圖片大小并且不會損失過多的清晰度（這取決于不同圖片，目的是在保證清晰度的情況下盡量減小文件大小）。如果你傾向于保存為JPEG格式，那確保通過勾選 progressive（漸進）來讓圖片從模糊到清晰的加載效果。譯者注PS/AI中保存圖片請使用存儲為web格式/save for web，快捷鍵ctrl/command + shift + alt + s 。PNG 格式請勾選 交錯/interlaced , JPEG 格式請 勾選漸進/progressive 。腳本通過提前寫好動

7、作腳本（宏）可以讓你批量自動化導出你想要的圖片大小。根據你選擇 的設計軟件，自動化的腳本可以很容易的設置使用。不幸的是你仍然需要手動重命名每 張圖片為 xxx_large2x.png '這樣的命名格式。如果你使用 Photoshop 這里有 一個指南可以幫助你編寫你自己的腳本批處理。或者你也可以用這個寫好的PS腳本。構建工具另外一個自動化導出圖片的方法是使用構建工具，我選擇使用Gulp。Gulp是一個基于Javascript流式思想的構建工具，這使得構建復雜任務的編寫更加簡單。這里有各 種任務插件，包括調整圖片大小、文件重命名。只需要編寫小段配置，你就可以完全自動化工作流中的某些部分，

8、并且在使用的時候你無須再考慮。使用構建工具的另一個好處是你可以將你的任務鏈式的串聯起來并且可調整順序。優化最后，你需要注意的是在將你的圖片放進網頁前進行優化。這將確保圖片數據多余的數據被刪除，將有效的減小文件的大小。和處理圖片或縮放圖片一樣，有很多種方法可以完成這個任務：你可以使用軟件或者終端命令手動優化圖片，或者你也可以使用構建工具自動完成這項任務。我喜歡的JPGs圖片壓縮軟件是imageOptim PNG 是imageAlpha ,還有一大堆軟件你可以選擇。另外你也可以使用強大的構建工具，好處你不需要記得壓縮圖片，你只需要在你的每個項目里區配置工具即可。我選擇用Gulp的插件(imagem

9、in)來做這件事情，它也能壓縮SVG和GIF文件。實現最終的步驟是在網頁中實現響應式圖片。這種方法即所謂的分辨率切換，因為我們只是切換了同一張圖片在不同尺寸和分辨率下的源文件地址，以達到在不同的尺寸和像素密度下達到響應的目的。所以我們會使用picture 標準的一部分 srcset和sizes屬性。這些屬性繼承了 <img><source> 標簽，提供了一個可供瀏覽器選擇最佳圖片的圖片地址列表。我們實際上提供給瀏覽器的是我們所知道的信息，而具體會加載那個源則是未知的。這取決于用戶設備的帶寬、像素密度等。奇酷學院I IX K-Z QIKUEDU COMsrcset 屬性讓

10、我們從srcset屬性開始，首先我們會提供一個 src屬性給那些不支持 srcset屬性的瀏覽器。中等大小和分辨率就足夠了（不支持srcset屬性的瀏覽器用戶電腦的尺寸和分辨率也不會大）。接下來通過 srcset指定給<img> 標簽所有圖片源的信息。然后使用逗號分隔列出一個從小到大的圖片源列表。每個圖片源后可以跟 w描述符或者x描述符。最后的結果看起來像是這樣：現在我們有了一個可供選擇源的圖片標簽，瀏覽器可以根據選擇采用最佳的源，同時我們還有一個回退方案填寫在src屬性中。如果瀏覽器支持 srcset則會下載最佳的圖像，否則直接下載 src屬性內的圖像。因此帶寬浪費和頁面大小冗余

11、會被降到最低。需要注意的是srcset只是描述了一個 <img> 有哪些可用的源，后面的 w描述符并不是說某個寬度下就一定會加載這個源。具體的情況還是取決于用戶的瀏覽器環境、帶寬等 同時對于同一源，只能標示一個符號w/x ,不能同時標記兩者，也建議不要在列表中混用w/x ,混用將會導致計算過于復雜。sizes屬性我們也可以通過設置sizes屬性來幫助瀏覽器選擇不同的圖片源，通過size屬性瀏覽器知道我們的圖片在不同的viewport 下占了多大，也就是圖片相對于viewport 的 比例。sizes屬性并不是必填的，沒有sizes屬性srcset仍然有效。但是如果srcset屬性沒

12、有那么sizes屬性將不會生效。如果沒有sizes屬性，那么srcset則被認為不論圖片占多寬，都始終采用和 viewport相同寬度的源（排除分辨率的影響）。建議 sizes應該配合srcset 一起使用：上面的代碼告訴瀏覽器，在視窗寬度小于1120Px的時候這個圖片要加載 924Px寬度的，在視窗寬度小于 1280Px大于1120Px的時候要加載1040Px的圖片，視窗 大于1280Px的加載和視窗寬度相同的圖片。瀏覽器將使用這些屬性來進一步為用戶選擇合適的圖片源，你可以選擇增加更多的斷點和不同寬度下圖片的加載列表（但這會顯著的增加布局內的信息），或者你也可以保持相對簡單。關鍵是現在瀏覽器

13、知道了關于圖片的更多信息，它將在不同的情況下選擇最 佳的圖片源。藝術指導（ART-DIRECTION USE CASE ）大多數情況下srcset和sizes都已經夠用了。但是仍然有時候你需要根據不同的尺寸 修改圖片的內容。例如使用類似于 srcset和sizes標準的picture 標簽。關于 picture 的更多信息可以了解 Jason Grigsby ' s article （這篇文章其實說的大多數情況下不要用 Picture ,個人認為其實不同的圖片內容也可依賴srcset , Picture 過于復雜。并且兼容性上Picture 不如srcset ）瀏覽器兼容srcset和sizes的瀏覽器兼容性已經獲得了更多的支持，但對于