無(wú)論是哪個(gè)網(wǎng)站，圖片都是極其重要的一個(gè)部分。據統計顯示，圖片已經(jīng)占到網(wǎng)站總帶寬的60%。在處理前沿網(wǎng)站設計時(shí)更加明顯。在一個(gè)圖像豐富的社交網(wǎng)站上使用類(lèi)圖釘的布局，這個(gè)數字能高達85%。

不幸的是帶寬很貴。對于高流量的網(wǎng)站，帶寬很可能是你IT花費的元兇，遠遠超越虛擬主機和存儲費用。另外，如此大量的流量需要花時(shí)間，所以在瀏覽你的網(wǎng)站時(shí)，訪(fǎng)問(wèn)者很可能要花很長(cháng)時(shí)間來(lái)等待圖片的載入。

由于加載時(shí)間過(guò)長(cháng)，縱觀(guān)從一端與訪(fǎng)客遺棄的IT成本,你可能想好好看看如何在線(xiàn)管理你的圖片。當每一秒傳遞減少你的網(wǎng)站的整體轉換并最終營(yíng)收-它使得你想盡可能優(yōu)化你的圖片和圖片傳輸而變得非常有意義.

使用Cloudinary，我們想在網(wǎng)站與手機應用程序上的一切相關(guān)的圖片提供一個(gè)結論性的解決方案。通過(guò)存貯，你從上傳覆蓋，操縱，優(yōu)化并交付。作為一個(gè)開(kāi)發(fā)者，你不需要再擔心圖像相關(guān)的RD和IT.

Cloudinary 解決了大量的共同的圖片相關(guān)的問(wèn)題。對于尚未使用Cloudinary的開(kāi)發(fā)者來(lái)說(shuō)，我們認為它很可能有幫助，如果我們列舉了其中的我們往往每天會(huì )遇到的與他們如何可以（并應該）來(lái)解決的問(wèn)題。

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

我們常常觀(guān)察到開(kāi)發(fā)者所使用的一個(gè)快捷方式就是使用瀏覽器端的圖片大小調整，而不是在服務(wù)器端就把圖片的大小調整好。

情況常常是一樣的 - 網(wǎng)站中擁有許多特定尺寸的縮略圖，然后圖形的設計發(fā)生了變化. 新的圖形設計要求縮略圖尺寸有一點(diǎn)輕微的變化，而我們的開(kāi)發(fā)者，有時(shí)是隨意，有時(shí)則是刻意的，就使用原來(lái)的大尺寸圖片，只是針對瀏覽器調整一下圖片的CSS高度和寬度，使圖片看起來(lái)是一張縮略圖。

在現代瀏覽器上，最終結果看上去確實(shí)是一樣的，但是加載圖片所耗費的帶塊卻是不一樣的. 你的網(wǎng)站訪(fǎng)問(wèn)這需要浪費珍貴的時(shí)間來(lái)加載一張不必要的拉圖片，而你則浪費了多余的帶寬去傳輸他們. 對于更老的瀏覽器這一問(wèn)題會(huì )更加的突出，因為他們調整圖片尺寸的算法效率是低于平均水品的。

這一問(wèn)題比你想象的還要普遍許多，它能在我們日常訪(fǎng)問(wèn)的許多網(wǎng)站中找到. 例如，訪(fǎng)問(wèn) Yahoo 的前頭版頁(yè)面，你會(huì )注意到熱點(diǎn)新聞這里加載的所有縮略圖像素都是你所看到的尺寸的兩倍.

如何解決:對于開(kāi)發(fā)者 / 設計者 - 請確保你要發(fā)布的圖片完美的契合需要他們的網(wǎng)站的尺寸. 即使是同一張圖片，也要用不同尺寸的縮略圖來(lái)適配不同的頁(yè)面, 創(chuàng )建不同尺寸的縮略圖，而不是全都使用同一張大尺寸圖片并依賴(lài)瀏覽器去調整它的大小，這樣做是很值得的。

2. 沒(méi)必要的高質(zhì)量JPEG圖片

JPEG圖片確實(shí)為web帶來(lái)革命性的影響. 多年以來(lái)，這一有損壓縮格式讓web開(kāi)發(fā)者可以值耗費較任何其它競爭對手更低的帶寬來(lái)加載帶有高細節的高分辨率圖像。

而我們仍然不斷看到開(kāi)發(fā)者和圖形設計師不去嘗試對圖像進(jìn)行JPEG壓縮. 事實(shí)上，在大多數網(wǎng)站中，你都可以在觀(guān)看質(zhì)量沒(méi)有明顯損失的前提下安全吧JPEG質(zhì)量降低一個(gè)檔次。

而85%的 JPEG 圖像質(zhì)量似乎很普遍，我們看到許多網(wǎng)站中的質(zhì)量都普遍是在95%，而一個(gè)更低的質(zhì)量水品，其實(shí)可以再不損害整個(gè)體驗的情況下大大解決帶寬. 最終結果是更高的帶寬消耗，以及網(wǎng)絡(luò )延時(shí)給用戶(hù)體驗帶來(lái)的影響。

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

如何解決:不要害怕去嘗試更低質(zhì)量的JPEG. 對于某些網(wǎng)站，我們發(fā)現使用 50% 的 JPEG 質(zhì)量可以為我們帶來(lái)一個(gè)非常合理的結果. 而更高質(zhì)量的 JPEG 當然總是看起來(lái)更好，但質(zhì)量上的提升并不總是能值回高質(zhì)量圖片所帶來(lái)的額外的帶寬和等待時(shí)間。

3.錯誤的圖片文件類(lèi)型

當前的網(wǎng)站是 JPEG、PNG 以及 GIF 三分天下。網(wǎng)站中平均起來(lái) JPEG 和 GIF 占大約 40%，PNG 占剩下的 20%。

關(guān)于這三種格式的好的（以及壞的）方面是它們每一個(gè)在網(wǎng)站中都有不同的角色。使用錯誤圖片格式是浪費訪(fǎng)問(wèn)者的時(shí)間以及你自己的錢(qián)。

在 Cloudinary 中，我們最常見(jiàn)的錯誤是使用PNG來(lái)投遞照片。對于PNG的通常的誤解是它是無(wú)損的格式，并認為它是照片最可能的替代品。通常來(lái)說(shuō)這沒(méi)錯，也確實(shí)沒(méi)必要做優(yōu)化。只需要一點(diǎn)點(diǎn)PNG文件大小就可以獲得質(zhì)量相當的高質(zhì)量JPEG圖片。

左邊的是PNG圖片，它有110KB大小。右邊是一個(gè)JPEG圖片，看起來(lái)差不多，但是只有15KB大小。

怎么破：要時(shí)刻注意什么圖片格式適合于內容顯示。PNG應該被用于計算機生成的圖片（圖表、logo等），或者你需要圖片中有部分透明（圖片覆蓋）。JPEG應該被用于顯示抓取的圖片。GIF應該在要顯示動(dòng)畫(huà)時(shí)用（使用Jjax載入動(dòng)畫(huà)等）。要注意這些是通常的原則，PNG幾乎在所有的方面都要勝過(guò)GIF。

4.發(fā)表未經(jīng)優(yōu)化的圖片

我們知道PNG是無(wú)損格式，但是你知道它可以進(jìn)一步壓縮嗎？發(fā)表同樣精細的圖片，免費的PNG壓縮工具可以將PNG大小減少達到50%。精細程度相差無(wú)幾的圖片，只有一半大小可以大大提高網(wǎng)站的響應速度。然而，許多開(kāi)發(fā)者和網(wǎng)站設計者卻跳過(guò)了這一步，發(fā)表了未經(jīng)優(yōu)化圖片。

怎么破：PNGCrush和OptiPNG是兩個(gè)開(kāi)源圖片優(yōu)化庫，如果你還沒(méi)有用過(guò)，你確實(shí)應該用用了。如果你不需要自動(dòng)優(yōu)化進(jìn)程，你可以前往雅虎的smush。它提供手動(dòng)壓縮PNG服務(wù)。

上面是一個(gè)雅虎smush使用樣例。它起作用了。

5.忘記刪除圖片冗余的meta數據

許多現代網(wǎng)站允許訪(fǎng)問(wèn)者上傳照片。無(wú)論它是用戶(hù)的輪廓圖還是近期旅行的共享照片，這些都帶有現代相機的原始信息，很可能引入許多meta信息到照片中。

meta數據在EXIF/IPTC格式中，包含大量的相機和照片信息，包括相機型號、日期和時(shí)間信息、光圈、快門(mén)速度、焦長(cháng)、測光模式、ISO、全球定位和許多其他信息片段。

大多數情況下，脫掉meta信息都是一個(gè)很棒的主意。對于隱私保護和減少文件尺寸來(lái)說(shuō)都很好。不幸的是，我們很少看到開(kāi)發(fā)者花時(shí)間清除meta信息，這增加了帶寬同時(shí)也損害了用戶(hù)的瀏覽體驗。

怎么破：確保你清除了你的圖片以及用戶(hù)上傳的照片中的meta信息。如果這些信息是必要的，確保它的可用范圍，而不是作為你的圖片的一部分。提示：即使圖片的meta信息對你的網(wǎng)站來(lái)說(shuō)不是必須的，但是有一個(gè)信息片段，那就是圖片的原始攝影方向，對于正確顯示照片來(lái)說(shuō)是很關(guān)鍵的。當清除Exif信息時(shí)，要確保你在Exif信息基礎上將圖片旋轉到了正確的方向。

6.直接從服務(wù)器發(fā)送圖片

一旦你的網(wǎng)站內容就位了，你的下一個(gè)目標就是確保你的所有網(wǎng)站圖片盡可能快的分發(fā)給你的訪(fǎng)問(wèn)者。

在Cloudinary中，一個(gè)最常見(jiàn)的網(wǎng)站問(wèn)題是，開(kāi)發(fā)者在他們自己的服務(wù)器中存儲圖片，而且通常和他們的網(wǎng)站在同一機器上。這里發(fā)生了兩件事：

第一，你的服務(wù)器忙著(zhù)發(fā)表圖片而不是專(zhuān)注于發(fā)表你的獨一無(wú)二的網(wǎng)站內容；

第二，你錯過(guò)了最驚人的圖像分發(fā)解決方案之一內容分發(fā)網(wǎng)絡(luò )

如何解決: 內容分發(fā)網(wǎng)絡(luò )是很容易使用的服務(wù)，它管理者你網(wǎng)站的圖片，比你網(wǎng)站自身管理這些圖片的發(fā)布要快很多. CDN 依賴(lài)于遍布于全世界的超大數量的服務(wù)器，或者說(shuō) 邊界. 當訪(fǎng)問(wèn)者瀏覽你的網(wǎng)站是，它們會(huì )自動(dòng)路由到最近的邊界文職, 這樣圖片就能以及盡可能快的速度發(fā)布，大幅減少延遲. CDN依據所需的帶寬收費，稍微比主機服務(wù)商的帶框比較貴, 不過(guò)如今的CDN價(jià)格已經(jīng)實(shí)惠到相當值得一用.

有許多CDN服務(wù)提供商可供選擇. 只要注冊就能開(kāi)始享受其好處.Amazon 的 CloudFront 算是一個(gè)好的開(kāi)始.

7. 靜態(tài)圖標單個(gè)分開(kāi)傳送

除了圖片和縮略圖之外, 網(wǎng)站還有圖標和輔助圖像(auxiliary image). Logo, 箭頭, 星形, 符號, 標志, 這些都能提高網(wǎng)站的用戶(hù)體驗.組成按鈕, 陰影, 邊框的圖片片段,以及其他圖片片段, 可以讓你根據美工的要求,動(dòng)態(tài)創(chuàng )建各種部件(widget).

一個(gè)網(wǎng)站的小圖片多到你無(wú)法相信. 拿 Google 的搜索結果頁(yè)面來(lái)說(shuō). 你要是經(jīng)常 Google, 可能對它的簡(jiǎn)潔界面還有印象。 幾乎看不到圖標, 對吧? 大錯特錯。Google 搜索結果頁(yè)面的小圖標 80 個(gè)都不止(!)

如何解決：我們強烈建議對全站的圖片積極使用緩存，如果可以的話(huà)設置圖片的'Expires'HTTP頭。除了圖像URL的指紋之外，這樣可以立即提升你網(wǎng)站的性能。

10.在所有的輸送介質(zhì)中使用相同的圖像尺寸

你的網(wǎng)站正被許多不同的設備瀏覽。近年來(lái)，隨著(zhù)手機和平板電腦用戶(hù)量的崛起，看一下你網(wǎng)站的流量分析，其顯示了來(lái)自這里設備訪(fǎng)客量的大幅上升。

網(wǎng)站是否有移動(dòng)訪(fǎng)客，或者你是否打算為你的網(wǎng)站內容提供一個(gè)移動(dòng)版本，你還剩一個(gè)決定如何發(fā)送圖像，移動(dòng)設備上的相同圖像但在臺式機分辨率就太低了。

我們?？吹介_(kāi)發(fā)者們圖省事，即為不同備的分辨率提供相同的圖像，在客戶(hù)端縮放圖像。盡管圖像看起來(lái)效果很好，但用戶(hù)在加載大尺寸圖像上浪費了時(shí)間，你也要支付額外的帶寬費用。這對3G用戶(hù)和漫游用戶(hù)是特別不公平，他們需要支付大量高分辨率圖片的額外費用。

相對的情況是使用最低的標準，在所有設備中使用非常低分辨率的圖像，這使得你的網(wǎng)站在更新更高分辨率的設備上表現地很糟。

如何解決：解決的方式很簡(jiǎn)單-通過(guò)user-agent或客戶(hù)端的Javascript代碼鑒別訪(fǎng)客的移動(dòng)設備和分辨率。獲取了準確的分辨率后，在服務(wù)器檢索的最適合的圖像。這當然需要你提供一套原始圖像的縮略圖。已經(jīng)有一些不錯的JavaScript包將這一過(guò)程自動(dòng)化。

總結

本文中提到的這些最常見(jiàn)的網(wǎng)站圖片處理問(wèn)題, 其實(shí)也是我們在 Cloudinary 上最常碰到的問(wèn)題.& 并不是說(shuō)問(wèn)題只有這么多, 我們只是盡量把影響效率較大的問(wèn)題提出來(lái), 并給出通俗的解釋, 好讓你以此為研究起點(diǎn), 找到合適的解決方案。