Web性能優化:圖片優化

HTTP Archieve有個統計,圖片內容已經占到了互聯網內容總量的62%,也就是說超過一半的流量和時間都用來下載圖片。從性能優化的角度看,圖片也絕對是優化的熱點和重點之一,Google PageSpeed或者Yahoo的14條性能優化規則無不把圖片優化作為重要的優化手段,本文覆蓋了Web圖片優化的方方面面,從基本的圖片格式選擇、到尚未被廣泛支持的響應式圖片均有所提及。

 

真的要用圖片嗎?

要實現需要的效果,真的需要圖片嗎?這是首先要問自己的問題。瀏覽器和Web標準的發展速度極快,記得數年前我在用微軟Silverlight 1.0寫視頻播放器的時候,中文還不能使用自定義字體顯示,所以那時候寫了很多糟糕的代碼把需要的文字在服務器上生成圖片并緩存起來。用戶下載起來很慢,搜索引擎也完全無法檢索這些文字。

但是現在不一樣了,很多特效(漸變、陰影、圓角等等)都可以用純粹的HTML、CSS、SVG等加以實現,實現這些效果少則寥寥數行代碼,多則加載額外的庫(一張普通的照片比非常強大的效果庫也大了許多)。這些效果不但需要的空間很小,而且在多設備、多分辨率下都能很好的工作,在低級瀏覽器上也可以實現較好的功能降級。因此在存在備選技術的情況下,應該首先選擇這些技術,只有在不得不使用圖片的時候才加入真正的圖片。

前端工程師最好能和設計師、產品經理保持溝通,幫助他們了解到什么樣的效果比較“簡潔、高效、可維護”,畢竟對于CSS來說改變圓角矩形的Radius可以實時看到效果,用圖片的話至少要重新生成圖片、切圖并替換資源。Retina、高分辨率屏幕、多尺寸的設備,這些都加快了非圖片特效的發展,想想在高分辨率屏幕下Windows 7的慘不忍睹,就知道原生的圖片資源絕對不是多多益善。

圖片格式的選擇

如果效果真的需要圖片來表現,那么選擇圖片格式是優化的第一步。我們經常聽到的詞語包括矢量圖、標量圖、SVG、有損壓縮、無損壓縮等等,我們首先說明各種圖片格式的特點:

其中APNG和WebP格式出現的較晚,尚未被Web標準所采納,只有在特定平臺或瀏覽器環境可以預知的情況下加以采用,雖然均可以在不支持的環境中較好的功能降級,但本節暫不討論這兩種格式。圖片格式選擇過程如下:

 

顏色豐富的照片,JPG是通用的選擇 

如果需要較通用的動畫,GIF是唯一可用的選擇

如果圖片由標準的幾何圖形組成,或需要使用程序動態控制其顯示特效,可以考慮SVG格式

如果需要清晰的顯示顏色豐富的圖片,PNG比較好 

 

圖片尺寸的選擇,這個就讓我想到了商城網站,圖片需求大很多

尺寸,曾經是最不需要討論的話題,但自從Retina出現之后世界就變得復雜多了。

這里只說我們關心的部分和結論,我們需要分清不同類型的像素:CSS像素和設備像素。一個 CSS像素可能包含多個設備像素。對于圖片來說,在高DPI的屏幕上需要使用分辨率更高的圖片,如果我們討論的是Retina,那么就需要2倍分辨率(幾乎4倍尺寸)的圖片。這幾乎沒有取巧的空間,屏幕就是那么大,需要的圖片也就是那么大。(鴿子為什么那么大?^_^)

我們能夠控制的地方是“恰好”顯示所需尺寸的圖片。例如在屏幕中通過CSS或者

Web性能優化:圖片優化

標簽的wihth/height屬性,將一副200x200的圖片調整為100x100大小,那么這其中就有(200x200)-(100x100)=30000個像素是浪費的,這占到了圖片尺寸的75%!

 

之所以有這么大的浪費,是因為圖片的尺寸與面積基本成正比,與寬高的平方成正比。因此良好的計算客戶端實際顯示的圖片尺寸,能夠大大減小圖片的大小。即使只有長和寬都只有10px被浪費,但是當圖片足夠大時,這部分也將產生很大影響。

響應式圖片

上面提到“恰好”顯示客戶端所需大小的圖片,聽上去很容易不是嗎?但當響應式布局出現后,這就變得極其困難。我們要支持上至1920寬度,下至 320寬度的無數種設備,如果使用1920寬度的圖片,那么在小型設備(這類設備往往對網速和流量更加敏感)上每個用戶都要付出額外的帶寬和等待時間,如果使用320寬度的圖片,那么在1920的屏幕上就像是在高清屏上使用DOS那么讓人難以接受。

很自然的,我們需要圖片也能“響應式”加載,根據所在設備的不同,加載不同尺寸的圖片。響應式圖片尚沒有寫入Web標準,實現起來也有諸多不便和兼容性限制。

響應式圖片雖然尚未成為標準,但這是Web圖片優化的一柄利器,一旦被廣泛支持,再沒有比縮小圖片尺寸更有效的優化方法了。

優化JPG和PNG

選擇了正確的圖片格式,按照正確的大小生成了圖片后,我們還需要對圖片進行進一步優化,這種優化一般分兩步進行:

JPG和PNG格式的圖片生成后,一般還有進一步優化的空間,例如JPG格式的照片中,可能攜帶有相機的Exif信息,PNG格式的圖片中可能帶有 Fireworks等軟件的圖層信息等。去除這些額外信息后,還可以通過減小圖片的調色板,去除沒有出現過的顏色,以及合并相鄰的相同顏色等手段來進行優化。原理性的內容這里不再贅述,僅介紹工程中可用的優化工具。

不同格式的圖片有一系列工具,這些工具有有更多種參數調節方案,常見的幾種調節工具有:

如果你真的需要追求各種圖片的極限壓縮,可以參閱這些工具的文檔,但是對于一般的Web應用,面對的圖片種類多樣,幾乎不可能在工程中實現對每種工具的獨立配置,因此推薦使用以下工具來進行優化。這些工具往往使用了上表中的一種或幾種優化工具。

ImageOptim (Mac)

主頁:http://imageoptim.com/

Mac平臺下非常贊的圖片優化工具,只需要把需要優化的圖片拖拽進ImageOptim,就能夠完成對圖片的優化。設置選擇的也很豐富,目前支持JPG和PNG的優化。這是我在寫文章時最常用到的工具,把網站用到的圖片拖進去,優化就完成了~這樣將有利于我們在網頁設計時的效果體系

免費模式下可以上傳圖片,優化后打包下載,很多國外企業也選擇了它的收費服務。親自測試Kraken的圖片優化結果比ImageOptim一般要小3%左右,效果不錯,當然價格也不錯。適合偶爾有圖片優化需求,或者不在開發機上沒有優化軟件可以使用的情況。

 

未經允許不得轉載,或轉載時需注明出處://0351ch.com/news/279.html
說點什么吧
  • 全部評論(0
    還沒有評論,快來搶沙發吧!
服務區域 橫崗 布吉 大浪 西麗 石巖 西鄉 福永 沙井 松崗 公明 光明 平湖 觀瀾 龍崗 光明 寶安 龍華 南山 羅湖 福田

在線預約 Online Booking

聯系我們 Contact Us

業務咨詢電話:0755-23772759手機:13798391694
地址:深圳市龍華新區觀瀾街道大塘路紫匯花園C棟3樓
傳真:0755-83904637郵箱:348539598@qq.com

關于我們 About Us

深圳市南創銳客科技有限公司(銳客網)專注于企業高端品牌設計開發,涉及多個領域,包括有深圳網站建設,深圳網站營運,深圳網站制作,深圳APP開發公司,深圳手機網站建設,深圳品牌網站建設,網絡整合營銷。是深圳極具競爭力的品牌網站建設公司。
13年精英級網絡營銷顧問深圳網站制作,專業深圳網站設計,3000+客戶網頁設計案例。

广西体彩网-Home 江苏体彩网-广西福彩网 江苏福彩网-推荐 贵州体彩网-官网 贵州福彩网-欢迎您 贵州彩票网-安全购彩 河南体彩网-Welcome 河南福彩网-Home 湖南福彩网-广西福彩网 湖南体彩网-推荐