對于任何一個現(xiàn)代網(wǎng)站來說圖片都是最重要的部分。當(dāng)前，據(jù)統(tǒng)計圖片已經(jīng)占到網(wǎng)站總帶寬的60%。在處理前沿網(wǎng)站設(shè)計時更加明顯。在一個圖像豐富的社交網(wǎng)站上使用類圖釘?shù)牟季�，這個數(shù)字能高達(dá)85%。
不幸的是帶寬很貴。對于高流量的網(wǎng)站，帶寬很可能要為你的IT花費負(fù)主責(zé)，輕松超越虛擬主機(jī)和存儲花費。另外，如此大量的流量需要花時間，所以在瀏覽你的網(wǎng)站時，訪問者很可能要花很長時間來等待圖片的載入。
由于加載時間過長，縱觀從一端與訪客遺棄的IT成本,你可能想好好看看如何在線管理你的圖片。當(dāng)每一秒傳遞減少你的網(wǎng)站的整體轉(zhuǎn)換并最終營收-它使得你想盡可能優(yōu)化你的圖片和圖片傳輸而變得非常有意義。
使用Cloudinary，我們想在網(wǎng)站與手機(jī)應(yīng)用程序上的一切相關(guān)的圖片提供一個結(jié)論性的解決方案。通過存貯，你從上傳覆蓋，操縱，優(yōu)化并交付。作為一個開發(fā)者，你不需要再擔(dān)心圖像相關(guān)的R&D和IT。
Cloudinary 解決了大量的共同的圖片相關(guān)的問題。對于尚未使用Cloudinary的開發(fā)者來說，我們認(rèn)為它很可能有幫助，如果我們列舉了其中的我們往往每天會遇到的與他們?nèi)绾慰梢裕ú?yīng)該）來解決的問題。
1. 奢侈的在瀏覽器端調(diào)整圖片大小
我們常常觀察到開發(fā)者所使用的一個快捷方式就是使用瀏覽器端的圖片大小調(diào)整，而不是在服務(wù)器端就把圖片的大小調(diào)整好。
情況常常是一樣的 - 網(wǎng)站中擁有許多特定尺寸的縮略圖，然后圖形的設(shè)計發(fā)生了變化. 新的圖形設(shè)計要求縮略圖尺寸有一點輕微的變化，而我們的開發(fā)者，有時是隨意，有時則是刻意的，就使用原來的大尺寸圖片，只是針對瀏覽器調(diào)整一下圖片的CSS高度和寬度，使圖片看起來是一張縮略圖。
在現(xiàn)代瀏覽器上，最終結(jié)果看上去確實是一樣的，但是加載圖片所耗費的帶塊卻是不一樣的。你的網(wǎng)站訪問這需要浪費珍貴的時間來加載一張不必要的拉圖片，而你則浪費了多余的帶寬去傳輸他們。. 對于更老的瀏覽器這一問題會更加的突出，因為他們調(diào)整圖片尺寸的算法效率是低于平均水品的。
這一問題比你想象的還要普遍許多，它能在我們?nèi)粘ＴL問的許多網(wǎng)站中找到. 例如，訪問 Yahoo 的前頭版頁面，你會注意到“熱點“新聞這里加載的所有縮略圖像素都是你所看到的尺寸的兩倍。
如何解決: 對于開發(fā)者 / 設(shè)計者 - 請確保你要發(fā)布的圖片完美的契合需要他們的網(wǎng)站的尺寸. 即使是同一張圖片，也要用不同尺寸的縮略圖來適配不同的頁面, 創(chuàng)建不同尺寸的縮略圖，而不是全都使用同一張大尺寸圖片并依賴瀏覽器去調(diào)整它的大小，這樣做是很值得的。
2. 沒必要的高質(zhì)量JPEG圖片
JPEG圖片確實為web帶來革命性的影響. 多年以來，這一有損壓縮格式讓web開發(fā)者可以值耗費較任何其它競爭對手更低的帶寬來加載帶有高細(xì)節(jié)的高分辨率圖像。
而我們?nèi)匀徊粩嗫吹介_發(fā)者和圖形設(shè)計師不去嘗試對圖像進(jìn)行JPEG壓縮。事實上，在大多數(shù)網(wǎng)站中，你都可以在觀看質(zhì)量沒有明顯損失的前提下安全吧JPEG質(zhì)量降低一個檔次。
而85%的 JPEG 圖像質(zhì)量 似乎很普遍，我們看到許多網(wǎng)站中的質(zhì)量都普遍是在95%，而一個更低的質(zhì)量水品，其實可以再不損害整個體驗的情況下大大解決帶寬。最終結(jié)果是更高的帶寬消耗，以及網(wǎng)絡(luò)延時給用戶體驗帶來的影響。
上面這兩張圖片質(zhì)量幾乎一樣，左邊是質(zhì)量 95% 的 JPEG 大小有 34KB，而右邊 80% 的 JPEG 則只有 17KB, 只要一半的下載時間，且加載的時間是前者的兩倍。這樣微乎其微的質(zhì)量損失是值得的。
如何解決: 不要害怕去嘗試更低質(zhì)量的JPEG. 對于某些網(wǎng)站，我們發(fā)現(xiàn)使用 50% 的 JPEG 質(zhì)量可以為我們帶來一個非常合理的結(jié)果。而更高質(zhì)量的 JPEG 當(dāng)然總是看起來更好，但質(zhì)量上的提升并不總是能值回高質(zhì)量圖片所帶來的額外的帶寬和等待時間。
3.錯誤的圖片文件類型
當(dāng)前的網(wǎng)站是 JPEG、PNG 以及 GIF 三分天下。網(wǎng)站中平均起來 JPEG 和 GIF 占大約 40%，PNG 占剩下的 20%。
關(guān)于這三種格式的好的（以及壞的）方面是它們每一個在網(wǎng)站中都有不同的角色。使用錯誤圖片格式是浪費訪問者的時間以及你自己的錢。
在 Cloudinary 中，我們最常見的錯誤是使用PNG來投遞照片。對于PNG的通常的誤解是它是無損的格式，并認(rèn)為它是照片最可能的替代品。通常來說這沒錯，也確實沒必要做優(yōu)化。只需要一點點PNG文件大小就可以獲得質(zhì)量相當(dāng)?shù)母哔|(zhì)量JPEG圖片。
左邊的是PNG圖片，它有110KB大小。右邊是一個JPEG圖片，看起來差不多，但是只有15KB大小。
怎么破：要時刻注意什么圖片格式適合于內(nèi)容顯示。PNG應(yīng)該被用于計算機(jī)生成的圖片（圖表、logo等），或者你需要圖片中有部分透明（圖片覆蓋）。JPEG應(yīng)該被用于顯示抓取的圖片。GIF應(yīng)該在要顯示動畫時用（使用Jjax載入動畫等）。要注意這些是通常的原則，PNG幾乎在所有的方面都要勝過GIF。
4.發(fā)表非優(yōu)化的圖片
我們知道PNG是無損格式，但是你知道它可以進(jìn)一步壓縮嗎？發(fā)表同樣精細(xì)的圖片，免費的PNG壓縮工具可以將PNG大小減少達(dá)到50%。同樣精細(xì)的圖片，而只有一半大��？當(dāng)我腦殘嘛。不幸的是，許多開發(fā)者和網(wǎng)站設(shè)計者跳過了這一步，發(fā)表了非優(yōu)化圖片。
怎么破：PNGCrush和OptiPNG是兩個開源圖片優(yōu)化庫，如果你還沒有用過，你確實應(yīng)該用用了。如果你不需要自動優(yōu)化進(jìn)程，你可以前往雅虎的smush。它提供手動壓縮PNG服務(wù)。
上面是一個雅虎smush使用樣例。它起作用了。
5.忘記脫掉圖片meta數(shù)據(jù)
許多現(xiàn)代網(wǎng)站允許訪問者上傳照片。無論它是用戶的輪廓圖還是近期旅行的共享照片，這些都帶有現(xiàn)代相機(jī)的原始信息，很可能引入許多meta信息到照片中。
meta數(shù)據(jù)在EXIF/IPTC格式中，包含大量的相機(jī)和照片信息，包括相機(jī)型號、日期和時間信息、光圈、快門速度、焦長、測光模式、ISO、全球定位和許多其他信息片段。
大多數(shù)情況下，脫掉meta信息都是一個很棒的主意。對于隱私保護(hù)和減少文件尺寸來說都很好。不幸的是，我們很少看到開發(fā)者花時間清除meta信息，這增加了帶寬同時也損害了用戶的瀏覽體驗。
怎么破：確保你清除了你的圖片以及用戶上傳的照片中的meta信息。如果這些信息是必要的，確保它的可用范圍，而不是作為你的圖片的一部分。提示：即使圖片的meta信息對你的網(wǎng)站來說不是必須的，但是有一個信息片段，那就是圖片的原始攝影方向，對于正確顯示照片來說是很關(guān)鍵的。當(dāng)清除Exif信息時，要確保你在Exif信息基礎(chǔ)上將圖片旋轉(zhuǎn)到了正確的方向。
6.直接從服務(wù)器發(fā)表圖片
一旦你的網(wǎng)站內(nèi)容就位了，你的下一個目標(biāo)就是確保你的所有網(wǎng)站圖片盡可能快的分發(fā)給你的訪問者。
在Cloudinary中，一個最常見的網(wǎng)站問題是，開發(fā)者在他們自己的服務(wù)器中存儲圖片，而且通常和他們的網(wǎng)站在同一機(jī)器上。這里發(fā)生了兩件事：第一，你的服務(wù)器忙著發(fā)表圖片而不是專注于發(fā)表你的獨一無二的網(wǎng)站內(nèi)容；第二，你錯過了最驚人的圖像分發(fā)解決方案之一——內(nèi)容分發(fā)網(wǎng)絡(luò)（Content Delivery Networks）。
如何解決: 內(nèi)容分發(fā)網(wǎng)絡(luò)是很容易使用的服務(wù)，它管理者你網(wǎng)站的圖片，比你網(wǎng)站自身管理這些圖片的發(fā)布要快很多. CDN 依賴于遍布于全世界的超大數(shù)量的服務(wù)器，或者說 "邊界". 當(dāng)訪問者瀏覽你的網(wǎng)站是，它們會自動路由到最近的邊界文職, 這樣圖片就能以及盡可能快的速度發(fā)布，大幅減少延遲. CDN依據(jù)所需的帶寬收費，稍微比主機(jī)服務(wù)商的帶框比較貴, 不過如今的CDN價格已經(jīng)實惠到相當(dāng)值得一用。
有許多CDN服務(wù)提供商可供選擇. 只要注冊就能開始享受其好處. Amazon 的 CloudFront 算是一個好的開始。
7. 靜態(tài)圖標(biāo)單個分開傳送
除了圖片和縮略圖之外, 網(wǎng)站還有圖標(biāo)和輔助圖像(auxiliary image). Logo, 箭頭, 星形, 符號, 標(biāo)志, 這些都能提高網(wǎng)站的用戶體驗. 組成按鈕, 陰影, 邊框的圖片片段, 以及其他圖片片段, 可以讓你根據(jù)美工的要求, 動態(tài)創(chuàng)建各種部件(widget)。
一個網(wǎng)站的小圖片多到你無法相信. 拿 Google 的搜索結(jié)果頁面來說. 你要是經(jīng)常 Google, 可能對它的簡潔界面還有印象。 幾乎看不到圖標(biāo), 對吧? 大錯特錯。Google 搜索結(jié)果頁面的小圖標(biāo) 80 個都不止 (!) 。
開發(fā)者會犯的一個普遍錯誤就是把這些小圖標(biāo)原樣嵌入到他們的網(wǎng)站中。瀏覽器需要花在下載如此多圖片的時間是相當(dāng)多的。下載一張圖片時，我們作為訪問者需要忍受網(wǎng)絡(luò)延遲之苦，而因為一般的瀏覽器平均只支持同時下載不超過6張圖片, 所以延時還要乘以圖片的下載批次。你的訪問者將需要等待他們的瀏覽器完成對所有這些圖片的下載，而你的web服務(wù)器可能會因為要應(yīng)對如此多的下載請求而變得無法響應(yīng)。你的訪問者甚至可能會放棄等待，轉(zhuǎn)而繼續(xù)他們?nèi)粘５臑g覽活動。
如何修復(fù): 一個簡單的解決方案是使用CSS Sprite（CSS精靈）， 一個單一的圖像包含你所有的小圖標(biāo)。你的網(wǎng)頁從你服務(wù)器上的這個單一圖片上被下載和修改，并且頁面的HTML使用了可替代的CSS 類名去指向大圖片內(nèi)部的小圖片。
現(xiàn)在，代替80張圖片，谷歌的訪問者下載的僅僅是一個單一的圖像。他們的瀏覽器將會快速下載并緩存這些從谷歌服務(wù)器上的單一圖片，并且所有的圖片將會立即呈現(xiàn)。
8. 在可以使用CSS3的時候使用圖片
當(dāng)我們把一個網(wǎng)站的設(shè)計轉(zhuǎn)換成HTML元素的時候，許多開發(fā)者仍然將按鈕設(shè)計成圖片式的。因為舊的瀏覽器不支持使用CSS來實現(xiàn)陰影，圓弧角，和特殊字體，開發(fā)者在過去習(xí)慣了使用小圖片來實現(xiàn)上述的特性，亦即基于圖片的方案。
不幸的是，這種解決方案需要大量的圖片，最終損害了瀏覽者的體驗，并且也很難管理，增加了開發(fā)所需的時間和成本（想想如何更改一個圖片中嵌入的文字）。
現(xiàn)代瀏覽器支持使用簡單的CSS來實現(xiàn)陰影，圓角矩形和特殊字體。然而，我們?nèi)匀豢吹皆S多網(wǎng)站依舊在使用基于圖片的按鈕。這是一類常見的錯誤。例如，看著這部分CNN的按鈕——
這一小技巧 是一張能夠很容易的使用簡單的CSS指令來實現(xiàn)的 61KB 圖片, 提升加載時間和用戶體驗的同時降低帶寬消耗。
如何解決: 無論何時確保盡可能使用CSS3。如果你的圖形設(shè)計師能提供基于CSS3的元素可供使用. 如果你想要支持老版本的IE，你也應(yīng)該確保你的界面能優(yōu)雅的降級到至少能保證設(shè)計的功能可用(盡管不能完美的顯示出原來的效果), 或者選擇一種像CSS3 PIE這樣的CSS3仿真方案。
9.錯誤的圖片緩存設(shè)置
一般你的網(wǎng)站圖片文化很少改變。HTTP緩存指令可以讓訪問者的瀏覽器將這些圖片緩存起來，任何其他的服務(wù)都可以這么干（CDN、proxies等等）。一旦圖片被緩存，在今后訪問你的網(wǎng)站的時候?qū)褂镁彺娑皇且槐橛忠槐榈南螺d。
正確的緩存設(shè)置通過減少頁面載入時間來提高用戶體驗，同時也減少你的網(wǎng)站帶寬而減少花費。
不幸的是，我見到許多案例都沒有正確的利用好緩存。最常見的是，對于更新圖片時漫長的緩存設(shè)置的擔(dān)心，因為他們認(rèn)為網(wǎng)站訪問者會看到舊的圖片而不是新的圖片。
這個看似棘手的情況可以通過添加一個指紋（MD5、時間戳等）到圖像URL來輕松地避免。通過添加一個指紋到圖像的URL你可以知道圖像何時變化了，已經(jīng)它的URL。當(dāng)URL變化時，瀏覽器會強(qiáng)制重新讀取圖像。目前的Web開發(fā)平臺能夠自動給所有的圖片添加這樣一個指紋，從源頭上解決這個問題。
如何解決：我們強(qiáng)烈建議對全站的圖片積極使用緩存，如果可以的話設(shè)置圖片的“Expires”HTTP頭。除了圖像URL的指紋之外，這樣可以立即提升你網(wǎng)站的性能。
10.在所有的輸送介質(zhì)中使用相同的圖像尺寸
你的網(wǎng)站正被許多不同的設(shè)備瀏覽。近年來，隨著手機(jī)和平板電腦用戶量的崛起，看一下你網(wǎng)站的流量分析，其顯示了來自這里設(shè)備訪客量的大幅上升。
網(wǎng)站是否有移動訪客，或者你是否打算為你的網(wǎng)站內(nèi)容提供一個移動版本，你還剩一個決定——如何發(fā)送圖像，移動設(shè)備上的相同圖像但在臺式機(jī)分辨率就太低了。
我們�？吹介_發(fā)者們圖省事，即為不同備的分辨率提供相同的圖像，在客戶端縮放圖像。盡管圖像看起來效果很好，但用戶在加載大尺寸圖像上浪費了時間，你也要支付額外的帶寬費用。這對3G用戶和漫游用戶是特別不公平，他們需要支付大量高分辨率圖片的額外費用。
相對的情況是使用最低的標(biāo)準(zhǔn)，在所有設(shè)備中使用非常低分辨率的圖像，這使得你的網(wǎng)站在更新更高分辨率的設(shè)備上表現(xiàn)地很糟。
如何解決：解決的方式很簡單-通過user-agent或客戶端的Javascript代碼鑒別訪客的移動設(shè)備和分辨率。獲取了準(zhǔn)確的分辨率后，在服務(wù)器檢索的最適合的圖像。這當(dāng)然需要你提供一套原始圖像的縮略圖。已經(jīng)有一些不錯的JavaScript包將這一過程自動化。
總結(jié)
本文中提到的這些最常見的網(wǎng)站圖片處理問題, 其實也是我們在 Cloudinary 上最常碰到的問題。并不是說問題只有這么多, 我們只是盡量把影響效率較大的問題提出來, 并給出通俗的解釋, 好讓你以此為研究起點, 找到合適的解決方案。
如果你沒聽說過 Cloudinary , 那我可以很高興的告訴你, Cloudinary 已經(jīng)把上面提到的, 沒提到的問題解決了。每張上傳到 Cloudinary 的圖片都可以動態(tài)生成任意尺寸, 格式, 質(zhì)量的縮略圖. 因此你可以在各種設(shè)置中找到適合自己網(wǎng)站, 滿足客戶期望的配置。Cloudinary 提供簡單易用, 可管理性強(qiáng)的 Sprite。所有圖片都自動剝離(stripped), 按尺寸優(yōu)化, 并使用緩存配置合理的高速 CDN 傳送, 書中提到的最佳實踐幾乎都用上了。最后值得一提的是, Cloudinary 的云動態(tài)圖片尺寸調(diào)整能力完美適應(yīng)相應(yīng)式設(shè)計。
Cloudinary 除了這些, 還提供圖片上傳管理, 云存儲和免費注冊(free to sign up)。來 Cloudinary 看看, 跟我們說說你的想法。如果你發(fā)現(xiàn), 尚有至關(guān)重要的問題, 我們沒有在文本中列出來, 歡迎在本帖下方留言。萬分感謝。
英文原文：Top 10 mistakes in handling website images and how to solve them