不幸的是頻寬很貴。對於高流量的網站，頻寬很可能要為你的IT花費負主責，輕鬆超越虛擬主機和儲存花費。另外，如此大量的流量需要花時間，所以在瀏覽你的網站時，訪問者很可能要花很長時間來等待圖片的載入。
由於載入時間過長，縱觀從一端與訪客遺棄的IT成本,你可能想好好看看如何線上管理你的圖片。當每一秒傳遞減少你的網站的整體轉換並最終營收-它使得你想盡可能優化你的圖片和圖片傳輸而變得非常有意義.
使用Cloudinary,我們想在網站與手機應用程式上的一切相關的圖片提供一個結論性的解決方案。通過存貯，你從上傳覆蓋，操縱，優化並交付。作為一個開發者，你不需要再擔心影象相關的R&D和IT.
Cloudinary 解決了大量的共同的圖片相關的問題。對於尚未使用Cloudinary的開發者來說，我們認為它很可能有幫助，如果我們列舉了其中的我們往往每天會遇到的與他們如何可以（並應該）來解決的問題。
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等等）。一旦圖片被快取，在今後訪問你的網站的時候將會使用快取而不是一遍又一遍的下載。
正確的快取設定通過減少頁面載入時間來提高使用者體驗，同時也減少你的網站頻寬而減少花費。
不幸的是，我見到許多案例都沒有正確的利用好快取。最常見的是，對於更新圖片時漫長的快取設定的擔心，因為他們認為網站訪問者會看到舊的圖片而不是新的圖片。
這個看似棘手的情況可以通過新增一個指紋（MD5、時間戳等）到影象URL來輕鬆地避免。通過新增一個指紋到影象的URL你可以知道影象何時變化了，已經它的URL。當URL變化時，瀏覽器會強制重新讀取影象。目前的Web開發平臺能夠自動給所有的圖片新增這樣一個指紋，從源頭上解決這個問題。
如何解決：我們強烈建議對全站的圖片積極使用快取，如果可以的話設定圖片的'Expires'HTTP頭。除了影象URL的指紋之外，這樣可以立即提升你網站的效能。
10.在所有的輸送介質中使用相同的影象尺寸
你的網站正被許多不同的裝置瀏覽。近年來，隨著手機和平板電腦使用者量的崛起，看一下你網站的流量分析，其顯示了來自這裡裝置訪客量的大幅上升。
網站是否有移動訪客，或者你是否打算為你的網站內容提供一個移動版本，你還剩一個決定——如何傳送影象，移動裝置上的相同影象但在桌上型電腦解析度就太低了。
我們常看到開發者們圖省事，即為不同備的解析度提供相同的影象，在客戶端縮放影象。儘管影象看起來效果很好，但使用者在載入大尺寸影象上浪費了時間，你也要支付額外的頻寬費用。這對3G使用者和漫遊使用者是特別不公平，他們需要支付大量高解析度圖片的額外費用。
相對的情況是使用最低的標準，在所有裝置中使用非常低解析度的影象，這使得你的網站在更新更高解析度的裝置上表現地很糟。
如何解決：解決的方式很簡單-通過user-agent或客戶端的Javascript程式碼鑑別訪客的移動裝置和解析度。獲取了準確的解析度後，在伺服器檢索的最適合的影象。這當然需要你提供一套原始影象的縮圖。已經有一些不錯的JavaScript包將這一過程自動化。
總結
本文中提到的這些最常見的網站圖片處理問題, 其實也是我們在 Cloudinary 上最常碰到的問題. 並不是說問題只有這麼多, 我們只是儘量把影響效率較大的問題提出來, 並給出通俗的解釋, 好讓你以此為研究起點, 找到合適的解決方案.
如果你沒聽說過 Cloudinary , 那我可以很高興的告訴你, Cloudinary 已經把上面提到的, 沒提到的問題解決了. 每張上傳到 Cloudinary 的圖片都可以動態生成任意尺寸, 格式, 質量的縮圖. 因此你可以在各種設定中找到適合自己網站, 滿足客戶期望的配置. Cloudinary 提供簡單易用, 可管理性強的 Sprite . 所有圖片都自動剝離(stripped), 按尺寸優化, 並使用快取配置合理的高速 CDN 傳送, 書中提到的最佳實踐幾乎都用上了. 最後值得一提的是, Cloudinary 的雲動態圖片尺寸調整能力完美適應相應式設計.
Cloudinary 除了這些, 還提供圖片上傳管理, 雲端儲存和免費註冊(free to sign up). 來 Cloudinary 看看, 跟我們說說你的想法. 如果你發現, 尚有至關重要的問題, 我們沒有在文字中列出來, 歡迎在本帖下方留言. 萬分感謝.
來自：開源中國社群
評論(1)