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