更新時間：2015-01-09對于高流量的網(wǎng)站，帶寬很可能是你IT花費的“元兇”，遠遠超越虛擬主機和存儲費用。另外，如此大量的流量需要花時間，所以在瀏覽你的網(wǎng)站時，訪問者很可能要花很長時間來等待圖片的載入。
由于加載時間過長，縱觀從一端與訪客遺棄的IT成本,你可能想好好看看如何在線管理你的圖片。當每一秒傳遞減少你的網(wǎng)站的整體轉換并最終營收-它使得你想盡可能優(yōu)化你的圖片和圖片傳輸而變得非常有意義.
使用Cloudinary，我們想在網(wǎng)站與手機應用程序上的一切相關的圖片提供一個結論性的解決方案。通過存貯，你從上傳覆蓋，操縱，優(yōu)化并交付。作為一個開發(fā)者，你不需要再擔心圖像相關的R&D和IT.
Cloudinary 解決了大量的共同的圖片相關的問題。對于尚未使用Cloudinary的開發(fā)者來說，我們認為它很可能有幫助，如果我們列舉了其中的我們往往每天會遇到的與他們如何可以（并應該）來解決的問題。
1.“奢侈”的在瀏覽器端調整圖片大小
我們常常觀察到開發(fā)者所使用的一個快捷方式就是使用瀏覽器端的圖片大小調整，而不是在服務器端就把圖片的大小調整好。
情況常常是一樣的 - 網(wǎng)站中擁有許多特定尺寸的縮略圖，然后圖形的設計發(fā)生了變化. 新的圖形設計要求縮略圖尺寸有一點輕微的變化，而我們的開發(fā)者，有時是隨意，有時則是刻意的，就使用原來的大尺寸圖片，只是針對瀏覽器調整一下圖片的CSS高度和寬度，使圖片看起來是一張縮略圖。
在現(xiàn)代瀏覽器上，最終結果看上去確實是一樣的，但是加載圖片所耗費的帶塊卻是不一樣的. 你的網(wǎng)站訪問這需要浪費珍貴的時間來加載一張不必要的拉圖片，而你則浪費了多余的帶寬去傳輸他們. 對于更老的瀏覽器這一問題會更加的突出，因為他們調整圖片尺寸的算法效率是低于平均水品的。
這一問題比你想象的還要普遍許多，它能在我們日常訪問的許多網(wǎng)站中找到. 例如，訪問 Yahoo 的前頭版頁面，你會注意到“熱點“新聞這里加載的所有縮略圖像素都是你所看到的尺寸的兩倍.
如何解決: 對于開發(fā)者 / 設計者 - 請確保你要發(fā)布的圖片完美的契合需要他們的網(wǎng)站的尺寸. 即使是同一張圖片，也要用不同尺寸的縮略圖來適配不同的頁面, 創(chuàng)建不同尺寸的縮略圖，而不是全都使用同一張大尺寸圖片并依賴瀏覽器去調整它的大小，這樣做是很值得的。
2. 沒必要的高質量JPEG圖片
JPEG圖片確實為web帶來革命性的影響. 多年以來，這一有損壓縮格式讓web開發(fā)者可以值耗費較任何其它競爭對手更低的帶寬來加載帶有高細節(jié)的高分辨率圖像。
而我們仍然不斷看到開發(fā)者和圖形設計師不去嘗試對圖像進行JPEG壓縮. 事實上，在大多數(shù)網(wǎng)站中，你都可以在觀看質量沒有明顯損失的前提下安全吧JPEG質量降低一個檔次。
而85%的 JPEG 圖像質量 似乎很普遍，我們看到許多網(wǎng)站中的質量都普遍是在95%，而一個更低的質量水品，其實可以再不損害整個體驗的情況下大大解決帶寬. 最終結果是更高的帶寬消耗，以及網(wǎng)絡延時給用戶體驗帶來的影響。
上面這兩張圖片質量幾乎一樣，左邊是質量 95% 的 JPEG 大小有 34KB，而右邊 80% 的 JPEG 則只有 17KB, 只要一半的下載時間，且加載的時間是前者的兩倍. 這樣微乎其微的質量損失是值得的。
如何解決: 不要害怕去嘗試更低質量的JPEG. 對于某些網(wǎng)站，我們發(fā)現(xiàn)使用 50% 的 JPEG 質量可以為我們帶來一個非常合理的結果. 而更高質量的 JPEG 當然總是看起來更好，但質量上的提升并不總是能值回高質量圖片所帶來的額外的帶寬和等待時間。
3.錯誤的圖片文件類型
當前的網(wǎng)站是 JPEG、PNG 以及 GIF 三分天下。網(wǎng)站中平均起來 JPEG 和 GIF 占大約 40%，PNG 占剩下的 20%。
關于這三種格式的好的（以及壞的）方面是它們每一個在網(wǎng)站中都有不同的角色。使用錯誤圖片格式是浪費訪問者的時間以及你自己的錢。
在 Cloudinary 中，我們最常見的錯誤是使用PNG來投遞照片。對于PNG的通常的誤解是它是無損的格式，并認為它是照片最可能的替代品。通常來說這沒錯，也確實沒必要做優(yōu)化。只需要一點點PNG文件大小就可以獲得質量相當?shù)母哔|量JPEG圖片。
左邊的是PNG圖片，它有110KB大小。右邊是一個JPEG圖片，看起來差不多，但是只有15KB大小。
怎么破：要時刻注意什么圖片格式適合于內容顯示。PNG應該被用于計算機生成的圖片（圖表、logo等），或者你需要圖片中有部分透明（圖片覆蓋）。JPEG應該被用于顯示抓取的圖片。GIF應該在要顯示動畫時用（使用Jjax載入動畫等）。要注意這些是通常的原則，PNG幾乎在所有的方面都要勝過GIF。
4.發(fā)表未經優(yōu)化的圖片
我們知道PNG是無損格式，但是你知道它可以進一步壓縮嗎？發(fā)表同樣精細的圖片，免費的PNG壓縮工具可以將PNG大小減少達到50%。精細程度相差無幾的圖片，只有一半大小可以大大提高網(wǎng)站的響應速度。然而，許多開發(fā)者和網(wǎng)站設計者卻跳過了這一步，發(fā)表了未經優(yōu)化圖片。
怎么破：PNGCrush和OptiPNG是兩個開源圖片優(yōu)化庫，如果你還沒有用過，你確實應該用用了。如果你不需要自動優(yōu)化進程，你可以前往雅虎的smush。它提供手動壓縮PNG服務。
5.忘記刪除圖片冗余的meta數(shù)據(jù)
許多現(xiàn)代網(wǎng)站允許訪問者上傳照片。無論它是用戶的輪廓圖還是近期旅行的共享照片，這些都帶有現(xiàn)代相機的原始信息，很可能引入許多meta信息到照片中。
meta數(shù)據(jù)在EXIF/IPTC格式中，包含大量的相機和照片信息，包括相機型號、日期和時間信息、光圈、快門速度、焦長、測光模式、ISO、全球定位和許多其他信息片段。
大多數(shù)情況下，脫掉meta信息都是一個很棒的主意。對于隱私保護和減少文件尺寸來說都很好。不幸的是，我們很少看到開發(fā)者花時間清除meta信息，這增加了帶寬同時也損害了用戶的瀏覽體驗。
怎么破：確保你清除了你的圖片以及用戶上傳的照片中的meta信息。如果這些信息是必要的，確保它的可用范圍，而不是作為你的圖片的一部分。提示：即使圖片的meta信息對你的網(wǎng)站來說不是必須的，但是有一個信息片段，那就是圖片的原始攝影方向，對于正確顯示照片來說是很關鍵的。當清除Exif信息時，要確保你在Exif信息基礎上將圖片旋轉到了正確的方向。
6.直接從服務器發(fā)送圖片
一旦你的網(wǎng)站內容就位了，你的下一個目標就是確保你的所有網(wǎng)站圖片盡可能快的分發(fā)給你的訪問者。
在Cloudinary中，一個最常見的網(wǎng)站問題是，開發(fā)者在他們自己的服務器中存儲圖片，而且通常和他們的網(wǎng)站在同一機器上。這里發(fā)生了兩件事：
第一，你的服務器忙著發(fā)表圖片而不是專注于發(fā)表你的獨一無二的網(wǎng)站內容；
第二，你錯過了最驚人的圖像分發(fā)解決方案之一——內容分發(fā)網(wǎng)絡（Content Delivery Networks）。
如何解決: 內容分發(fā)網(wǎng)絡是很容易使用的服務，它管理者你網(wǎng)站的圖片，比你網(wǎng)站自身管理這些圖片的發(fā)布要快很多. CDN 依賴于遍布于全世界的超大數(shù)量的服務器，或者說 "邊界". 當訪問者瀏覽你的網(wǎng)站是，它們會自動路由到最近的邊界文職, 這樣圖片就能以及盡可能快的速度發(fā)布，大幅減少延遲. CDN依據(jù)所需的帶寬收費，稍微比主機服務商的帶框比較貴, 不過如今的CDN價格已經實惠到相當值得一用.
有許多CDN服務提供商可供選擇. 只要注冊就能開始享受其好處. Amazon 的 CloudFront 算是一個好的開始.
7. 靜態(tài)圖標單個分開傳送
除了圖片和縮略圖之外, 網(wǎng)站還有圖標和輔助圖像(auxiliary image). Logo, 箭頭, 星形, 符號, 標志, 這些都能提高網(wǎng)站的用戶體驗. 組成按鈕, 陰影, 邊框的圖片片段, 以及其他圖片片段, 可以讓你根據(jù)美工的要求, 動態(tài)創(chuàng)建各種部件(widget).
一個網(wǎng)站的小圖片多到你無法相信. 拿 Google 的搜索結果頁面來說. 你要是經常 Google, 可能對它的簡潔界面還有印象。 幾乎看不到圖標, 對吧? 大錯特錯。Google 搜索結果頁面的小圖標 80 個都不止 (!)
