網站使用者體驗：圖片格式的選擇與使用者體驗

仲介交易 HTTP://www.aliyun.com/zixun/aggregation/6858.html">SEO診斷 淘寶客 雲主機 技術大廳

這是我10年的時候寫的一篇博客，偶爾翻出來，覺得挺好玩的。 貌似當時是因為莫名其妙的去看了jpeg的壓縮演算法，但是看的雲裡霧裡。 進而想到為啥要出這麼多圖片的格式呢?他們肯定各有所長。 而在軟體發展的時候B/S專案用什麼格式、C/S專案用什麼格式、logo圖片用什麼格式、背景圖片用什麼格式等等。 所以寫了一篇文字。 今天拿出來，重新編輯一下，不知道各位是怎麼想的，老肥非常懇切的希望與您交流。

要寫這個東西，我們先設定一個範圍，我們對比就拿常見的gif、png、jpeg三種格式來說說。

首先我們看一下三種格式的對比。

以上是對於三種常見格式的對比，其實還有bmp等格式，但是對於我們在做設計的時候這種格式其實應用不是特別多，所以暫就不怎麼講了，不過坦率的說這個格式還是不錯的，因為這玩意它不壓縮檔，但是比同樣的一張圖其他格式的大很多， 所以在頁面上其實用的比較少的。 而jpeg格式還有一種jpg的寫法，很多人都以為這是一回事，不過如果從單純使用角度也算是一回事，實際上jpg是使用jpeg檔交換格式存儲的編碼影像檔副檔名。 而jpeg是一種壓縮標準。

那麼明白了這三種格式的定義、優點、缺點，我們什麼時候該使用這三種格式的圖片呢?

老肥建議如果你的圖片色彩較為單一、只是由色塊或者文字組成的時候可以考慮使用gif，因為這樣可以減少很大的體積。 但是反過來說png可以說是gif格式的替代品，而且著實表現很優秀。 同樣的表現，png的更小。 所以這種情況下你還是能用png就別用gif了。 有人說了，你說這麼多廢話就直接說讓我們用png好了。 但是要考慮一點，如果你設計的產品面對的使用者他們通常採用的瀏覽器比較老套或者一些舊的行動裝置，比如非智慧機等。 或者說圖像品質較差的機器。 那你還是得用gif，因為這些老物件不支援png。 gif最多不會多於256種顏色。 如果你的圖片有很多過渡色、漸變色等依然得選擇png。

那jpeg和png對比呢?

jpeg適合儲存有很多顏色的圖片，因為通過壓縮後可以在網路上較快地載入。 那麼圖片要是含有圖形或者文字的話可以考慮用png，反之亦然。 否則jpg壓縮以後就會變得比較模糊。

對於jpeg其實咱得單獨拿出來說說，有些同學可能知道可能不知道，這玩意其實有兩種保存方式，一種是標準型，用鳥語講就是Baseline JPEG，還有一種是漸進型也就是Progressive JPEG。 這是一對雙胞胎，什麼都一樣，但是縱使是我們生活中的雙胞胎，很多都一樣也必然有不一樣的地方，這哥倆不一樣的地方就是他~們~的~顯~示~方~式~不~同。

標準型的jpeg檔存儲方式是按照從上到下的掃描方式存儲的。 每一行順序的保存在檔中。 打開這個檔的時候，就按照存儲時候的順序從上到下一行一行的顯示。 直到所有的都打開。 所以如果你的檔很大或者使用者網路一般、去想像一下效果吧。 其實這種顯示方式沒啥太大的有點。 所以推薦後者。

而漸進型的是多次掃描。 在你打開的時候會先顯示整個圖片的輪廓。 然後多次掃描，圖片主見清晰。 這個好處無需多言，同時使用者在使用的時候可以根據輪廓大致知道這個圖片是什麼。 如果你的圖片很大，可以考慮用這種。

對比兩種方式，看看後者，這樣你的使用者體驗不就提升很多了麼?其實只是你保存的時候一個小動作是不是?但是對於使用者來講，那個體驗是什麼?前者：什麼破玩意啊，半天出不來，要不就是一條條的，關掉關掉關掉!後者：哎，出來個框了， 等一下，越來越清晰，激動啊!而這個，是不是也和我們在研究使用者體驗時，跟進度條的道理差不多呢?

當然如果你的圖片是JPEG的標準型的話，你想轉化成漸進型，可以這樣做：在ps中打開圖片後，

【存儲為web所用格式】，然後勾選【連續】就是漸進型了。

寫在最後，其實這篇文章無論你是設計師還是產品經理我覺得都可以看一下，雖然是從使用的維度上來說設計師應用更多一些。 但是我們是透過現象看實質。 因為你的圖片如何使用會對你的產品的使用者體驗產生很大的影響。 這個無需多言，我相信不同產品的設計師肯定都會有自己的感受。 所以我還是給這篇文章歸於使用者體驗這個範疇的。 作為產品經理的我們，這一點基本的知識應該去明確。 老肥堅定的認為，只有心中具有完美主義傾向的產品經理才有可能設計出真正好的產品，那種經常覺得「湊合吧，可以了」，這樣的產品經理做不出什麼好東西，我也不想做，也不喜歡。

ps：想深入探討的同學可以參考這篇文章，很不錯HTTP://ued.taobao.com/blog/2010/12/jpg_png/#2-1