132 7725 3377
聯(lián)系我們
了
解
紅
點
最
新
動
態(tài)
和
行
業(yè)
資
訊
如今開發(fā)一個網(wǎng)站不是響應(yīng)式都不好意思拿出來，那么作為響應(yīng)式中的重要一環(huán)「響應(yīng)式圖片」你又是如何解決的呢？
網(wǎng)站的平均加載已經(jīng)到了近 2MB 并在不斷地增加中，其中圖片占據(jù)了絕大多數(shù)流量(63%)。可以肯定的是網(wǎng)頁已經(jīng)有了嚴重的大小問題，而圖片就是罪魁禍首。雖然已經(jīng)有很多種 措施 可以減少網(wǎng)頁加載量，但或許更重要的步驟之一是確保響應(yīng)式圖片的加載方案。通過利用響應(yīng)式圖片解決方案，我們可以確保最佳的圖片被加載，帶寬不會被過大的圖片所浪費。因此 W3C 定義了 picture 標簽：基于檢測客戶端設(shè)備類型的可替換圖片方案。具體是由 picture 這個標簽去實現(xiàn)，也就是說我們現(xiàn)在有了一個基于標準的響應(yīng)式圖片解決方案可以用在實踐中。
第一步就是定義所有響應(yīng)式圖片的尺寸和斷點，這些信息在網(wǎng)頁原型中就應(yīng)該被精確的標示出來。重要的一點是 你的斷點應(yīng)該取決于你的內(nèi)容 而不是不同設(shè)備的寬度。這么做是因為設(shè)備的參數(shù)是在不斷變化的，流行的設(shè)備尺寸總是在變。通過讓內(nèi)容來決定斷點位置，這將確保我們的界面在所有屏幕上響應(yīng)而不是特殊的幾個設(shè)備。
注意 當(dāng)決定哪些圖片應(yīng)該被做成響應(yīng)式時，要記住一點，大多數(shù)都是放在內(nèi)容中的圖片。例如在 HTML 中插入的圖片而不是在 CSS 中的背景圖片。
首先將你的瀏覽器窗口放到最大（或者你規(guī)定的內(nèi)容展示最大寬度），然后記錄下此時你的內(nèi)容寬度和你想要展示的圖片寬度，通過瀏覽器的開發(fā)者工具或者類似的插件。
接下來縮放你的瀏覽器窗口直到你想要給圖片設(shè)置寬度的下一個斷點，再繼續(xù)縮放直到你記錄下所有的作用于圖片寬度斷點。當(dāng)你完成的時候你應(yīng)該記錄下每張圖片在不同大小下應(yīng)該載入的寬度。
舉例，僅僅是例子：
注意 關(guān)于決定斷點需要注意的是：斷點越多，代碼越難維護。除此之外大量的斷點會使 CSS 變得臃腫。所以盡量在保證效果的情況下保持最少的斷點。
下一步是根據(jù)你想要支持的分辨率 對圖片寬度進行計算。決定要支持那些分辨率是很困難的，因為有 太多的不同的分辨率，并且每支持一種分辨率你需要計算寬度并放在你的圖片加載列表里。所以需要做的是根據(jù)實際情況和你的用戶群體去選擇支持不同的分辨率。
如果你已經(jīng)決定了需要支持那些高分辨率，那圖片加載列表會像下面這樣：
如你所見，我們的圖片列表數(shù)量會隨著支持不同的分辨率和斷點而變長。通過改變整合列表項讓列表更清晰可控是很有必要的。例如任何相近或者不超過 200 像素差距的值。將幾個相近的值整合為一個值將有助于構(gòu)建更清晰的列表：
注意 這里用像素來做斷點值只是為了好對應(yīng)圖片寬度，實際上你的 斷點應(yīng)該使用相對單位（em/rem not px）
現(xiàn)在我們有了一個慎重考慮的圖片寬度列表，下一步則要將每個圖片導(dǎo)出為以「斷點名」+「像素密度倍數(shù)」為名的文件。例如我將最大的斷點稱為 “l(fā)arge” 并且圖片像素密度倍數(shù)為兩倍，那么我的文件名則為 ‘image_large@2x.jpg’。我傾向于在 Photoshop 中保存圖片為 70% 壓縮，因為 70% 壓縮能確保達到最優(yōu)的圖片大小并且不會損失過多的清晰度（這取決于不同圖片，目的是在保證清晰度的情況下盡量減小文件大小）。如果你傾向于保存為 JPEG 格式，那確保通過勾選 progressive(漸進) 來讓圖片從模糊到清晰的加載效果。
譯者注 PS/AI 中保存圖片請使用「存儲為 web 格式/save for web」，快捷鍵 ctrl/command + shift + alt + s。PNG 格式請勾選 交錯/interlaced，JPEG 格式請勾選 漸進/progressive。
通過提前寫好動作腳本（宏）可以讓你批量自動化導(dǎo)出你想要的圖片大小。根據(jù)你選擇的設(shè)計軟件，自動化的腳本可以很容易的設(shè)置使用。不幸的是你仍然需要手動重命名每張圖片為 ‘xxx_large@2x.png’ 這樣的命名格式。如果你使用 Photoshop 這里有一個 指南 可以幫助你編寫你自己的腳本批處理?；蛘吣阋部梢杂眠@個 寫好的 PS 腳本。
另外一個自動化導(dǎo)出圖片的方法是使用構(gòu)建工具，我選擇使用 Gulp。Gulp 是一個基于 Javascript 流式思想的構(gòu)建工具，這使得構(gòu)建復(fù)雜任務(wù)的編寫更加簡單。這里有各種任務(wù)插件，包括調(diào)整圖片大小、文件重命名。只需要編寫小段配置，你就可以完全自動化工作流中的某些部分，并且在使用的時候你無須再考慮。使用構(gòu)建工具的另一個好處是你可以將你的任務(wù)鏈式的串聯(lián)起來并且可調(diào)整順序。
最后，你需要注意的是在將你的圖片放進網(wǎng)頁前進行優(yōu)化。這將確保圖片數(shù)據(jù)多余的數(shù)據(jù)被刪除，將有效的減小文件的大小。和處理圖片或縮放圖片一樣，有很多種方法可以完成這個任務(wù)：你可以使用軟件或者終端命令手動優(yōu)化圖片，或者你也可以使用構(gòu)建工具自動完成這項任務(wù)。我喜歡的 JPGs 圖片壓縮軟件是 imageOptim PNG 是 imageAlpha，還有一大堆軟件你可以選擇。
另外你也可以使用強大的構(gòu)建工具，好處你不需要記得壓縮圖片，你只需要在你的每個項目里區(qū)配置工具即可。我選擇用 Gulp 的插件 (imagemin)[https://www.npmjs.com/package/gulp-imagemin] 來做這件事情，它也能壓縮 SVG 和 GIF 文件。
最終的步驟是在網(wǎng)頁中實現(xiàn)響應(yīng)式圖片。這種方法即所謂的 分辨率切換，因為我們只是切換了同一張圖片在不同尺寸和分辨率下的源文件地址，以達到在不同的尺寸和像素密度下達到響應(yīng)的目的。所以我們會使用 picture 標準的一部分 srcset 和 sizes 屬性。這些屬性繼承了 <img> <source> 標簽，提供了一個可供瀏覽器選擇最佳圖片的圖片地址列表。我們實際上提供給瀏覽器的是我們所知道的信息，而具體會加載那個源則是未知的。這取決于用戶設(shè)備的帶寬、像素密度等。
讓我們從 srcset 屬性開始，首先我們會提供一個 src 屬性給那些不支持 srcset 屬性的瀏覽器。中等大小和分辨率就足夠了（不支持 srcset 屬性的瀏覽器用戶電腦的尺寸和分辨率也不會大）。接下來通過 srcset 指定給 <img> 標簽所有圖片源的信息。然后使用逗號分隔列出一個從小到大的圖片源列表。每個圖片源后可以跟w描述符或者x描述符。最后的結(jié)果看起來像是這樣：
現(xiàn)在我們有了一個可供選擇源的圖片標簽，瀏覽器可以根據(jù)選擇采用最佳的源，同時我們還有一個回退方案填寫在 src 屬性中。如果瀏覽器支持 srcset 則會下載最佳的圖像，否則直接下載 src 屬性內(nèi)的圖像。因此帶寬浪費和頁面大小冗余會被降到最低。
需要注意的是 srcset 只是描述了一個 <img> 有哪些可用的源，后面的 w 描述符并不是說某個寬度下就一定會加載這個源。具體的情況還是取決于用戶的瀏覽器環(huán)境、帶寬等 同時對于同一源，只能標示一個符號w/x，不能同時標記兩者，也建議不要在列表中混用 w/x，混用將會導(dǎo)致計算過于復(fù)雜。
我們也可以通過設(shè)置 sizes 屬性來幫助瀏覽器選擇不同的圖片源，通過 size 屬性瀏覽器知道我們的圖片在不同的 viewport 下占了多大，也就是圖片相對于 viewport 的比例。sizes 屬性并不是必填的，沒有sizes 屬性 srcset 仍然有效。但是如果 srcset 屬性沒有那么 sizes 屬性將不會生效。
如果沒有 sizes 屬性，那么 srcset 則被認為不論圖片占多寬，都始終采用和 viewport 相同寬度的源（排除分辨率的影響）。建議 sizes 應(yīng)該配合 srcset 一起使用：
上面的代碼告訴瀏覽器，在視窗寬度小于 1120px 的時候這個圖片要加載 924px 寬度的，在視窗寬度小于 1280px 大于 1120px 的時候要加載 1040px 的圖片，視窗大于 1280px 的加載和視窗寬度相同的圖片。
瀏覽器將使用這些屬性來進一步為用戶選擇合適的圖片源，你可以選擇增加更多的斷點和不同寬度下圖片的加載列表（但這會顯著的增加布局內(nèi)的信息），或者你也可以保持相對簡單。關(guān)鍵是現(xiàn)在瀏覽器知道了關(guān)于圖片的更多信息，它將在不同的情況下選擇最佳的圖片源。
大多數(shù)情況下 srcset 和 sizes 都已經(jīng)夠用了。但是仍然有時候你需要根據(jù)不同的尺寸修改圖片的內(nèi)容。例如使用類似于 srcset 和 sizes 標準的 <picture> 標簽。關(guān)于 <picture> 的更多信息可以了解 Jason Grigsby’s article （這篇文章其實說的大多數(shù)情況下不要用 picture，個人認為其實不同的圖片內(nèi)容也可依賴 srcset，picture 過于復(fù)雜。并且兼容性上 picture 不如 srcset ）。
srcset 和 sizes的瀏覽器兼容性 已經(jīng)獲得了更多的支持，但對于大多數(shù)項目你需要更多的考慮兼容。幸運的是 Picturefill 是一個很棒的支持跨瀏覽器的兼容庫，它支持 <picture> 和 srcset 以及 sizes 特性。這個兼容庫允許你使用推薦的 <picture> 語法，因此可以在瀏覽器兼容性沒有問題的時候移除該庫。雖然 Picturefill 還有一些缺點，但這么做仍然利大于弊。
注意 在使用 picturefill 庫的時候，作者推薦拋棄使用 src 標簽，因為這將 導(dǎo)致圖片的重復(fù)下載。
中文資料：
更多閱讀：
原文鏈接：http://jonyablonski.com/2015/responsive-image-workflow
為您提供專業(yè)解決方案，歡迎來電咨詢！
132-7725-3377
微信在線咨詢
官方抖音號
官網(wǎng)小程序
數(shù)字品牌咨詢 / 商業(yè)模式創(chuàng)新咨詢 / 服務(wù)設(shè)計咨詢 / 互聯(lián)網(wǎng)產(chǎn)品咨詢
品牌營銷年度服務(wù) / 產(chǎn)品增長營銷服務(wù) / 高端定制網(wǎng)站 / 創(chuàng)意H5定制
品牌電商方案 / SAAS電商 / APP定制開發(fā) / B2C電商方案 / 微信小程序
COPYRIGHT ? 2017 湖北紅點 | 軟件定制服務(wù)商 備案號：鄂ICP備17012943號-1 鄂公安網(wǎng)安備42050202000667號 地址：湖北省宜昌市中南路興發(fā)廣場B座1521
