處理網頁圖片最多見的10個錯誤及其解決方案

(mark 碼農網)
對於任何一個現代網站來講圖片都是最重要的部分。當前，據統計圖片已經佔到網站總帶寬的60%。在處理前沿網站設計時更加明顯。在一個圖像豐富的社交網站上使用類圖釘的佈局，這個數字能高達85%。

不幸的是帶寬很貴。對於高流量的網站，帶寬極可能要爲你的IT花費負主責，輕鬆超越虛擬主機和存儲花費。另外，如此大量的流量須要花時間，因此在瀏覽你的網站時，訪問者極可能要花很長時間來等待圖片的載入。

咱們列舉了其中的咱們每每天天會遇到的與他們如何能夠（並應該）來解決的問題。

1.奢侈的在瀏覽器端調整圖片大小

咱們經常觀察到開發者所使用的一個快捷方式就是使用瀏覽器端的圖片大小調整，而不是在服務器端就把圖片的大小調整好、.

狀況經常是同樣的 – 網站中擁有許多特定尺寸的縮略圖，而後圖形的設計發生了變化. 新的圖形設計要求縮略圖尺寸有一點輕微的變化，而咱們的開發者，有時是隨意，有時則是刻意的，就使用原來的大尺寸圖片，只是針對瀏覽器調整一下圖片的CSS高度和寬度，使圖片看起來是一張縮略圖.

在現代瀏覽器上，最終結果看上去確實是同樣的，可是加載圖片所耗費的帶塊倒是不同的. 你的網站訪問這須要浪費珍貴的時間來加載一張沒必要要的拉圖片，而你則浪費了多餘的帶寬去傳輸他們. 對於更老的瀏覽器這一問題會更加的突出，由於他們調整圖片尺寸的算法效率是低於平均水品的.

這一問題比你想象的還要廣泛許多，它能在咱們平常訪問的許多網站中找到. 例如，訪問 Yahoo 的前頭版頁面，你會注意到「熱點「新聞這裏加載的全部縮略圖像素都是你所看到的尺寸的兩倍.

如何解決: 對於開發者 / 設計者 – 請確保你要發佈的圖片完美的契合須要他們的網站的尺寸. 即便是同一張圖片，也要用不一樣尺寸的縮略圖來適配不一樣的頁面, 建立不一樣尺寸的縮略圖，而不是全都使用同一張大尺寸圖片並依賴瀏覽器去調整它的大小，這樣作是很值得的.

2.不必的高質量JPEG圖片

JPEG圖片確實爲web帶來革命性的影響. 多年以來，這一有損壓縮格式讓web開發者能夠值耗費較任何其它競爭對手更低的帶寬來加載帶有高細節的高分辨率圖像.

而咱們仍然不斷看到開發者和圖形設計師不去嘗試對圖像進行JPEG壓縮. 事實上，在大多數網站中，你均可以在觀看質量沒有明顯損失的前提下安全吧JPEG質量下降一個檔次.

而85%的 JPEG 圖像質量 彷佛很廣泛，咱們看到許多網站中的質量都廣泛是在95%，而一個更低的質量水品，其實能夠再不損害整個體驗的狀況下大大解決帶寬. 最終結果是更高的帶寬消耗，以及網絡延時給用戶體驗帶來的影響.

上面這兩張圖片質量幾乎同樣，左邊是質量 95% 的 JPEG 大小有 34KB，而右邊 80% 的 JPEG 則只有 17KB, 只要一半的下載時間，且加載的時間是前者的兩倍. 這樣微乎其微的質量損失是值得的.

如何解決: 不要懼怕去嘗試更低質量的JPEG. 對於某些網站，咱們發現使用 50% 的 JPEG 質量能夠爲咱們帶來一個很是合理的結果. 而更高質量的 JPEG 固然老是看起來更好，但質量上的提高並不老是能值回高質量圖片所帶來的額外的帶寬和等待時間.

3.錯誤的圖片文件類型

當前的網站是 JPEG、PNG 以及 GIF 三分天下。網站中平均起來 JPEG 和 GIF 佔大約 40%，PNG 佔剩下的 20%。

關於這三種格式的好的（以及壞的）方面是它們每個在網站中都有不一樣的角色。使用錯誤圖片格式是浪費訪問者的時間以及你本身的錢。

在 Cloudinary 中，咱們最多見的錯誤是使用PNG來投遞照片。對於PNG的一般的誤解是它是無損的格式，並認爲它是照片最可能的替代品。一般來講這沒錯，也確實不必作優化。只須要一點點PNG文件大小就能夠得到質量至關的高質量JPEG圖片。

左邊的是PNG圖片，它有110KB大小。右邊是一個JPEG圖片，看起來差很少，可是隻有15KB大小。

怎麼破：要時刻注意什麼圖片格式適合於內容顯示。PNG應該被用於計算機生成的圖片（圖表、logo等），或者你須要圖片中有部分透明（圖片覆蓋）。JPEG應該被用於顯示抓取的圖片。GIF應該在要顯示動畫時用（使用Jjax載入動畫等）。要注意這些是一般的原則，PNG幾乎在全部的方面都要賽過GIF。

4.發表非優化的圖片

咱們知道PNG是無損格式，可是你知道它能夠進一步壓縮嗎？發表一樣精細的圖片，免費的PNG壓縮工具能夠將PNG大小減小達到50%。一樣精細的圖片，而只有一半大小？當我腦殘嘛。不幸的是，許多開發者和網站設計者跳過了這一步，發表了非優化圖片。

怎麼破：PNGCrush和OptiPNG是兩個開源圖片優化庫，若是你尚未用過，你確實應該用用了。若是你不須要自動優化進程，你能夠前往雅虎的smush。它提供手動壓縮PNG服務。

上面是一個雅虎smush使用樣例。它起做用了。

5.忘記脫掉圖片meta數據

許多現代網站容許訪問者上傳照片。不管它是用戶的輪廓圖仍是近期旅行的共享照片，這些都帶有現代相機的原始信息，極可能引入許多meta信息到照片中。

meta數據在EXIF/IPTC格式中，包含大量的相機和照片信息，包括相機型號、日期和時間信息、光圈、快門速度、焦長、測光模式、ISO、全球定位和許多其餘信息片斷。

大多數狀況下，脫掉meta信息都是一個很棒的主意。對於隱私保護和減小文件尺寸來講都很好。不幸的是，咱們不多看到開發者花時間清除meta信息，這增長了帶寬同時也損害了用戶的瀏覽體驗。

怎麼破：確保你清除了你的圖片以及用戶上傳的照片中的meta信息。若是這些信息是必要的，確保它的可用範圍，而不是做爲你的圖片的一部分。提示：即便圖片的meta信息對你的網站來講不是必須的，可是有一個信息片斷，那就是圖片的原始攝影方向，對於正確顯示照片來講是很關鍵的。當清除Exif信息時，要確保你在Exif信息基礎上將圖片旋轉到了正確的方向。

6.直接從服務器發表圖片

一旦你的網站內容就位了，你的下一個目標就是確保你的全部網站圖片儘量快的分發給你的訪問者。

在Cloudinary中，一個最多見的網站問題是，開發者在他們本身的服務器中存儲圖片，並且一般和他們的網站在同一機器上。這裏發生了兩件事：第一，你的服務器忙着發表圖片而不是專一於發表你的獨一無二的網站內容；第二，你錯過了最驚人的圖像分發解決方案之一——內容分發網絡（Content Delivery Networks）。

如何解決: 內容分發網絡是很容易使用的服務，它管理者你網站的圖片，比你網站自身管理這些圖片的發佈要快不少. CDN 依賴於遍及於全世界的超大數量的服務器，或者說 「邊界」. 當訪問者瀏覽你的網站是，它們會自動路由到最近的邊界文職, 這樣圖片就能以及儘量快的速度發佈，大幅減小延遲. CDN依據所需的帶寬收費，稍微比主機服務商的帶框比較貴, 不過現在的CDN價格已經實惠到至關值得一用.

有許多CDN服務提供商可供選擇. 只要註冊就能開始享受其好處. Amazon 的 CloudFront 算是一個好的開始.

7.靜態圖標單個分開傳送

除了圖片和縮略圖以外, 網站還有圖標和輔助圖像(auxiliary image). Logo, 箭頭, 星形, 符號, 標誌, 這些都能提升網站的用戶體驗. 組成按鈕, 陰影, 邊框的圖片片斷, 以及其餘圖片片斷, 可讓你根據美工的要求, 動態建立各類部件(widget).

一個網站的小圖片多到你沒法相信. 拿 Google 的搜索結果頁面來講. 你要是常常 Google, 可能對它的簡潔界面還有印象。 幾乎看不到圖標, 對吧? 大錯特錯。Google 搜索結果頁面的小圖標 80 個都不止 (!)

開發者會犯的一個廣泛錯誤就是把這些小圖標原樣嵌入到他們的網站中。瀏覽器須要花在下載如此多圖片的時間是至關多的。下載一張圖片時，咱們做爲訪問者須要忍受網絡延遲之苦，而由於通常的瀏覽器平均只支持同時下載不超過6張圖片, 因此延時還要乘以圖片的下載批次。你的訪問者將須要等待他們的瀏覽器完成對全部這些圖片的下載，而你的web服務器可能會由於要應對如此多的下載請求而變得沒法響應。你的訪問者甚至可能會放棄等待，轉而繼續他們平常的瀏覽活動。

如何修復: 一個簡單的解決方案是使用CSS Sprite（CSS精靈）， 一個單一的圖像包含你全部的小圖標。你的網頁從你服務器上的這個單一圖片上被下載和修改，而且頁面的HTML使用了可替代的CSS 類名去指向大圖片內部的小圖片。

如今，代替80張圖片，谷歌的訪問者下載的僅僅是一個單一的圖像。他們的瀏覽器將會快速下載並緩存這些從谷歌服務器上的單一圖片，而且全部的圖片將會當即呈現。

8.在可使用CSS3的時候使用圖片

當咱們把一個網站的設計轉換成HTML元素的時候，許多開發者仍然將按鈕設計成圖片式的。由於舊的瀏覽器不支持使用CSS來實現陰影，圓弧角，和特殊字體，開發者在過去習慣了使用小圖片來實現上述的特性，亦即基於圖片的方案。

不幸的是，這種解決方案須要大量的圖片，最終損害了瀏覽者的體驗，而且也很難管理，增長了開發所需的時間和成本（想一想如何更改一個圖片中嵌入的文字）。

現代瀏覽器支持使用簡單的CSS來實現陰影，圓角矩形和特殊字體。然而，咱們仍然看到許多網站依舊在使用基於圖片的按鈕。這是一類常見的錯誤。例如，看着這部分CNN的按鈕——

這一小技巧是一張可以很容易的使用簡單的CSS指令來實現的 61KB 圖片, 提高加載時間和用戶體驗的同時下降帶寬消耗.

如何解決: 不管什麼時候確保儘量使用CSS3. 若是你的圖形設計師能提供基於CSS3的元素可供使用. 若是你想要支持老版本的IE，你也應該確保你的界面能優雅的降級到至少能保證設計的功能可用(儘管不能完美的顯示出原來的效果), 或者選擇一種像CSS3 PIE這樣的CSS3仿真方案.

9.錯誤的圖片緩存設置

通常你的網站圖片文化不多改變。HTTP緩存指令可讓訪問者的瀏覽器將這些圖片緩存起來，任何其餘的服務均可以這麼幹（CDN、proxies等等）。一旦圖片被緩存，在從此訪問你的網站的時候將會使用緩存而不是一遍又一遍的下載。

正確的緩存設置經過減小頁面載入時間來提升用戶體驗，同時也減小你的網站帶寬而減小花費。

不幸的是，我見到許多案例都沒有正確的利用好緩存。最多見的是，對於更新圖片時漫長的緩存設置的擔憂，由於他們認爲網站訪問者會看到舊的圖片而不是新的圖片。

這個看似棘手的狀況能夠經過添加一個指紋（MD五、時間戳等）到圖像URL來輕鬆地避免。經過添加一個指紋到圖像的URL你能夠知道圖像什麼時候變化了，已經它的URL。當URL變化時，瀏覽器會強制從新讀取圖像。目前的Web開發平臺可以自動給全部的圖片添加這樣一個指紋，從源頭上解決這個問題。

如何解決：咱們強烈建議對全站的圖片積極使用緩存，若是能夠的話設置圖片的’Expires’HTTP頭。除了圖像URL的指紋以外，這樣能夠當即提高你網站的性能。

10.在全部的輸送介質中使用相同的圖像尺寸

你的網站正被許多不一樣的設備瀏覽。近年來，隨着手機和平板電腦用戶量的崛起，看一下你網站的流量分析，其顯示了來自這裏設備訪客量的大幅上升。

網站是否有移動訪客，或者你是否打算爲你的網站內容提供一個移動版本，你還剩一個決定——如何發送圖像，移動設備上的相同圖像但在臺式機分辨率就過低了。

咱們常看到開發者們圖省事，即爲不一樣備的分辨率提供相同的圖像，在客戶端縮放圖像。儘管圖像看起來效果很好，但用戶在加載大尺寸圖像上浪費了時間，你也要支付額外的帶寬費用。這對3G用戶和漫遊用戶是特別不公平，他們須要支付大量高分辨率圖片的額外費用。

相對的狀況是使用最低的標準，在全部設備中使用很是低分辨率的圖像，這使得你的網站在更新更高分辨率的設備上表現地很糟。

如何解決：解決的方式很簡單-經過user-agent或客戶端的Javascript代碼鑑別訪客的移動設備和分辨率。獲取了準確的分辨率後，在服務器檢索的最適合的圖像。這固然須要你提供一套原始圖像的縮略圖。已經有一些不錯的JavaScript包將這一過程自動化。

總結

本文中提到的這些最多見的網站圖片處理問題, 其實也是咱們在 Cloudinary 上最常碰到的問題. 並非說問題只有這麼多, 咱們只是儘可能把影響效率較大的問題提出來, 並給出通俗的解釋, 好讓你以此爲研究起點, 找到合適的解決方案.

若是你沒據說過 Cloudinary , 那我能夠很高興的告訴你, Cloudinary 已經把上面提到的, 沒提到的問題解決了. 每張上傳到 Cloudinary 的圖片均可以動態生成任意尺寸, 格式, 質量的縮略圖. 所以你能夠在各類設置中找到適合本身網站, 知足客戶指望的配置. Cloudinary 提供簡單易用, 可管理性強的 Sprite . 全部圖片都自動剝離(stripped), 按尺寸優化, 並使用緩存配置合理的高速 CDN 傳送, 書中提到的最佳實踐幾乎都用上了. 最後值得一提的是, Cloudinary 的雲動態圖片尺寸調整能力完美適應相應式設計.