響應式圖片全局顯示的解決方案

2016-11-03 1399 3 編輯:網頁前端設計五林 來源:網頁設計書籍

如今開發一個網站不是響應式都不好意思拿出來,那么作為響應式中的重要一環「響應式圖片」你又是如何解決的呢?

網站的平均加載已經到了近 2MB 并在不斷地增加中,其中圖片占據了絕大多數流量(63%)。可以肯定的是網頁已經有了嚴重的大小問題,而圖片就是罪魁禍首。雖然已經有很多種 措施 可以減少網頁加載量,但或許更重要的步驟之一是確保響應式圖片的加載方案。通過利用響應式圖片解決方案,我們可以確保最佳的圖片被加載,帶寬不會被過大的圖片所浪費。因此 W3C 定義了 picture 標簽:基于檢測客戶端設備類型的可替換圖片方案。具體是由 picture 這個標簽去實現,也就是說我們現在有了一個基于標準的響應式圖片解決方案可以用在實踐中。


長話短說(人話)

斷點(breakpoints)應該 取決于內容 而不是設備寬度 (CSS3 media query)

根據尺寸加載不同圖片

計算圖片像素密度并加到圖片加載列表中

通過消除圖片加載列表中太相近的值來讓加載列表變得可維護

利用程序自動輸出圖片的不同大小

利用 img 標簽的 srcset sizes 等屬性輸出同一張圖片的不同路徑/尺寸,以解決響應式圖片的大小和像素密度的問題

Picturefill 庫能讓我們現在就使用這些強大的特性

雖然 Picturefill 還有一些缺點 但這么做仍然利大于弊

查看DEMO


定義

第一步就是定義所有響應式圖片的尺寸和斷點,這些信息在網頁原型中就應該被精確的標示出來。重要的一點是 你的斷點應該取決于你的內容 而不是不同設備的寬度。這么做是因為設備的參數是在不斷變化的,流行的設備尺寸總是在變。通過讓內容來決定斷點位置,這將確保我們的界面在所有屏幕上響應而不是特殊的幾個設備。

注意 當決定哪些圖片應該被做成響應式時,要記住一點,大多數都是放在內容中的圖片。例如在 HTML 中插入的圖片而不是在 CSS 中的背景圖片。


圖片尺寸

首先將你的瀏覽器窗口放到最大(或者你規定的內容展示最大寬度),然后記錄下此時你的內容寬度和你想要展示的圖片寬度,通過瀏覽器的開發者工具或者類似的插件。

接下來縮放你的瀏覽器窗口直到你想要給圖片設置寬度的下一個斷點,再繼續縮放直到你記錄下所有的作用于圖片寬度斷點。當你完成的時候你應該記錄下每張圖片在不同大小下應該載入的寬度。


舉例,僅僅是例子:

[max-width] : [1440]

[breakpoint large] : [1120]

[breakpoint medium] : [800]

[reakpoint small] : [400]

注意 關于決定斷點需要注意的是:斷點越多,代碼越難維護。除此之外大量的斷點會使 CSS 變得臃腫。所以盡量在保證效果的情況下保持最少的斷點。


高分辨率

下一步是根據你想要支持的分辨率 對圖片寬度進行計算。決定要支持那些分辨率是很困難的,因為有 太多的不同的分辨率,并且每支持一種分辨率你需要計算寬度并放在你的圖片加載列表里。所以需要做的是根據實際情況和你的用戶群體去選擇支持不同的分辨率。

如果你已經決定了需要支持那些高分辨率,那圖片加載列表會像下面這樣:

[max-width] : [image width], [image width x1.5], [image width x2]

[breakpoint large] : [image width], [image width x1.5], [image width x2]

[breakpoint medium] : [image width], [image width x1.5], [image width x2]

[breakpoint small] : [image width], [image width x1.5], [image width x2]


整合

如你所見,我們的圖片列表數量會隨著支持不同的分辨率和斷點而變長。通過改變整合列表項讓列表更清晰可控是很有必要的。例如任何相近或者不超過 200 像素差距的值。將幾個相近的值整合為一個值將有助于構建更清晰的列表:

(min-width:1280px) : 1040px, 1560px, 2080px

(min-width:1120px) : 924px, 1386px, 1848px

(min-width:800px) : 800px, 1200px, 1600px

(min-width:400px) : 400px, 600px, 800px

注意 這里用像素來做斷點值只是為了好對應圖片寬度,實際上你的 斷點應該使用相對單位(em/rem not px)


輸出

現在我們有了一個慎重考慮的圖片寬度列表,下一步則要將每個圖片導出為以「斷點名」+「像素密度倍數」為名的文件。例如我將最大的斷點稱為 “large” 并且圖片像素密度倍數為兩倍,那么我的文件名則為 ‘[email protected]’。我傾向于在 Photoshop 中保存圖片為 70% 壓縮,因為 70% 壓縮能確保達到最優的圖片大小并且不會損失過多的清晰度(這取決于不同圖片,目的是在保證清晰度的情況下盡量減小文件大小)。如果你傾向于保存為 JPEG 格式,那確保通過勾選 progressive(漸進) 來讓圖片從模糊到清晰的加載效果。

譯者注 PS/AI 中保存圖片請使用「存儲為 web 格式/save for web」,快捷鍵 ctrl/command + shift + alt + s。PNG 格式請勾選 交錯/interlaced,JPEG 格式請勾選 漸進/progressive。


腳本

通過提前寫好動作腳本(宏)可以讓你批量自動化導出你想要的圖片大小。根據你選擇的設計軟件,自動化的腳本可以很容易的設置使用。不幸的是你仍然需要手動重命名每張圖片為 ‘[email protected]’ 這樣的命名格式。如果你使用 Photoshop 這里有一個 指南 可以幫助你編寫你自己的腳本批處理。或者你也可以用這個 寫好的 PS 腳本。


構建工具

另外一個自動化導出圖片的方法是使用構建工具,我選擇使用 Gulp。Gulp 是一個基于 Javascript 流式思想的構建工具,這使得構建復雜任務的編寫更加簡單。這里有各種任務插件,包括調整圖片大小、文件重命名。只需要編寫小段配置,你就可以完全自動化工作流中的某些部分,并且在使用的時候你無須再考慮。使用構建工具的另一個好處是你可以將你的任務鏈式的串聯起來并且可調整順序。


優化

最后,你需要注意的是在將你的圖片放進網頁前進行優化。這將確保圖片數據多余的數據被刪除,將有效的減小文件的大小。和處理圖片或縮放圖片一樣,有很多種方法可以完成這個任務:你可以使用軟件或者終端命令手動優化圖片,或者你也可以使用構建工具自動完成這項任務。我喜歡的 JPGs 圖片壓縮軟件是 imageOptim PNG 是 imageAlpha,還有一大堆軟件你可以選擇。

另外你也可以使用強大的構建工具,好處你不需要記得壓縮圖片,你只需要在你的每個項目里區配置工具即可。


實現

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


srcset 屬性

讓我們從 srcset 屬性開始,首先我們會提供一個 src 屬性給那些不支持 srcset 屬性的瀏覽器。中等大小和分辨率就足夠了(不支持 srcset 屬性的瀏覽器用戶電腦的尺寸和分辨率也不會大)。接下來通過 srcset 指定給 <img> 標簽所有圖片源的信息。然后使用逗號分隔列出一個從小到大的圖片源列表。每個圖片源后可以跟w描述符或者x描述符。最后的結果看起來像是這樣:

<img src="image_medium.jpg" 

srcset="image_small.jpg 400w, [email protected] 600w, image_medium.jpg 800w, image_xlarge.jpg 1040w, [email protected] 1386w, [email protected] 1600w, [email protected] 1848w, [email protected] 2080w"

alt="Image description" />

現在我們有了一個可供選擇源的圖片標簽,瀏覽器可以根據選擇采用最佳的源,同時我們還有一個回退方案填寫在 src 屬性中。如果瀏覽器支持 srcset 則會下載最佳的圖像,否則直接下載 src 屬性內的圖像。因此帶寬浪費和頁面大小冗余會被降到最低。

需要注意的是 srcset 只是描述了一個 <img> 有哪些可用的源,后面的 w 描述符并不是說某個寬度下就一定會加載這個源。具體的情況還是取決于用戶的瀏覽器環境、帶寬等 同時對于同一源,只能標示一個符號w/x,不能同時標記兩者,也建議不要在列表中混用 w/x,混用將會導致計算過于復雜。


sizes 屬性

我們也可以通過設置 sizes 屬性來幫助瀏覽器選擇不同的圖片源,通過 size 屬性瀏覽器知道我們的圖片在不同的 viewport 下占了多大,也就是圖片相對于 viewport 的比例。sizes 屬性并不是必填的,沒有sizes 屬性 srcset 仍然有效。但是如果 srcset 屬性沒有那么 sizes 屬性將不會生效。

如果沒有 sizes 屬性,那么 srcset 則被認為不論圖片占多寬,都始終采用和 viewport 相同寬度的源(排除分辨率的影響)。建議 sizes 應該配合 srcset 一起使用:

<img src="image_medium.jpg"

sizes ="(min-width:1120px) 924px, (min-width:1280px) 1040px, 100vw"

srcset="image_small.jpg 400w, [email protected] 600w, image_medium.jpg 800w, image_xlarge.jpg 1040w, [email protected] 1386w, [email protected] 1600w, [email protected] 1848w, [email protected] 2080w"

alt="Image description" />

上面的代碼告訴瀏覽器,在視窗寬度小于 1120px 的時候這個圖片要加載 924px 寬度的,在視窗寬度小于 1280px 大于 1120px 的時候要加載 1040px 的圖片,視窗大于 1280px 的加載和視窗寬度相同的圖片。

瀏覽器將使用這些屬性來進一步為用戶選擇合適的圖片源,你可以選擇增加更多的斷點和不同寬度下圖片的加載列表(但這會顯著的增加布局內的信息),或者你也可以保持相對簡單。關鍵是現在瀏覽器知道了關于圖片的更多信息,它將在不同的情況下選擇最佳的圖片源。


藝術指導(ART-DIRECTION USE CASE)

大多數情況下 srcset 和 sizes 都已經夠用了。但是仍然有時候你需要根據不同的尺寸修改圖片的內容。例如使用類似于 srcset 和 sizes 標準的 <picture> 標簽。關于 <picture> 的更多信息可以了解 Jason Grigsby’s article (這篇文章其實說的大多數情況下不要用 picture,個人認為其實不同的圖片內容也可依賴 srcset,picture 過于復雜。并且兼容性上 picture 不如 srcset )。


瀏覽器兼容

srcset 和 sizes的瀏覽器兼容性 已經獲得了更多的支持,但對于大多數項目你需要更多的考慮兼容。幸運的是 Picturefill 是一個很棒的支持跨瀏覽器的兼容庫,它支持 <picture> 和 srcset 以及 sizes 特性。這個兼容庫允許你使用推薦的 <picture> 語法,因此可以在瀏覽器兼容性沒有問題的時候移除該庫。雖然 Picturefill 還有一些缺點,但這么做仍然利大于弊。

本站文章均為深正網站建設摘自權威資料,書籍,或網絡原創文章,如有版權糾紛或者違規問題,請即刻聯系我們刪除,我們歡迎您分享,引用和轉載,但謝絕直接搬磚和抄襲!感謝...
關注深正互聯
七星彩头尾 腾讯欢乐捕鱼怎么兑换话费 2018赚钱捞偏门 金星 赚钱 男明星 金苹果彩票游戏 千炮彩金捕鱼免费版 1000炮捕鱼游戏平台 抖音直播真的很赚钱吗 加盟酸奶赚钱吗 像惠头条赚钱的软件 状元彩票群 在学校开玩具店赚钱吗 qq三国2018年赚钱 llke视频怎么赚钱 旧版哈尔滨麻将下载 自动冲浪赚钱 516棋牌游戏中心金蟾捕鱼