這是我10年的時候?qū)懙囊黄┛?，偶爾翻出來，覺得挺好玩的。貌似當(dāng)時是因?yàn)槟涿畹娜タ戳薺peg的壓縮算法，但是看的云里霧里。進(jìn)而想到為啥要出這么多圖片的格式呢？他們肯定各有所長。而在軟件開發(fā)的時候B/S項(xiàng)目用什么格式、C/S項(xiàng)目用什么格式、logo圖片用什么格式、背景圖片用什么格式等等。所以寫了一篇文字。今天拿出來，重新編輯一下，不知道各位是怎么想的，老肥非常懇切的希望與您交流。

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

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

以上是對于三種常見格式的對比，其實(shí)還有bmp等格式，但是對于我們在做設(shè)計的時候這種格式其實(shí)應(yīng)用不是特別多，所以暫就不怎么講了，不過坦率的說這個格式還是不錯的，因?yàn)檫@玩意它不壓縮文件，但是比同樣的一張圖其他格式的大很多，所以在頁面上其實(shí)用的比較少的。而jpeg格式還有一種jpg的寫法，很多人都以為這是一回事，不過如果從單純使用角度也算是一回事，實(shí)際上jpg是使用jpeg文件交換格式存儲的編碼圖像文件擴(kuò)展名。而jpeg是一種壓縮標(biāo)準(zhǔn)。

那么明白了這三種格式的定義、優(yōu)點(diǎn)、缺點(diǎn)，我們什么時候該使用這三種格式的圖片呢？

老肥建議如果你的圖片色彩較為單一、只是由色塊或者文字組成的時候可以考慮使用gif，因?yàn)檫@樣可以減少很大的體積。但是反過來說png可以說是gif格式的替代品，而且著實(shí)表現(xiàn)很優(yōu)秀。同樣的表現(xiàn)，png的更小。所以這種情況下你還是能用png就別用gif了。有人說了，你說這么多廢話就直接說讓我們用png好了。但是要考慮一點(diǎn)，如果你設(shè)計的產(chǎn)品面對的用戶他們通常采用的瀏覽器比較老套或者一些舊的移動設(shè)備，比如非智能機(jī)等?；蛘哒f圖像質(zhì)量較差的機(jī)器。那你還是得用gif，因?yàn)檫@些老物件不支持png。gif最多不會多于256種顏色。如果你的圖片有很多過渡色、漸變色等依然得選擇png。

那jpeg和png對比呢？

jpeg適合儲存有很多顏色的圖片，因?yàn)橥ㄟ^壓縮后可以在網(wǎng)絡(luò)上較快地加載。那么圖片要是含有圖形或者文字的話可以考慮用png，反之亦然。否則jpg壓縮以后就會變得比較模糊。

對于jpeg其實(shí)咱得單獨(dú)拿出來說說，有些同學(xué)可能知道可能不知道，這玩意其實(shí)有兩種保存方式，一種是標(biāo)準(zhǔn)型，用鳥語講就是Baseline JPEG，還有一種是漸進(jìn)型也就是Progressive JPEG。這是一對雙胞胎，什么都一樣，但是縱使是我們生活中的雙胞胎，很多都一樣也必然有不一樣的地方，這哥倆不一樣的地方就是他~們~的~顯~示~方~式~不~同。

標(biāo)準(zhǔn)型的jpeg文件存儲方式是按照從上到下的掃描方式存儲的。每一行順序的保存在文件中。打開這個文件的時候，就按照存儲時候的順序從上到下一行一行的顯示。直到所有的都打開。所以如果你的文件很大或者用戶網(wǎng)絡(luò)一般、去想象一下效果吧。其實(shí)這種顯示方式?jīng)]啥太大的有點(diǎn)。所以推薦后者。

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

對比兩種方式，看看后者，這樣你的用戶體驗(yàn)不就提升很多了么？其實(shí)只是你保存的時候一個小動作是不是？但是對于用戶來講，那個體驗(yàn)是什么？前者：什么破玩意啊，半天出不來，要不就是一條條的，關(guān)掉關(guān)掉關(guān)掉！后者：哎，出來個框了，等一下，越來越清晰，激動??！而這個，是不是也和我們在研究用戶體驗(yàn)時，跟進(jìn)度條的道理差不多呢？

當(dāng)然如果你的圖片是JPEG的標(biāo)準(zhǔn)型的話，你想轉(zhuǎn)化成漸進(jìn)型，可以這樣做：在ps中打開圖片后，

【存儲為web所用格式】，然后勾選【連續(xù)】就是漸進(jìn)型了。

寫在最后，其實(shí)這篇文章無論你是設(shè)計師還是產(chǎn)品經(jīng)理我覺得都可以看一下，雖然是從使用的維度上來說設(shè)計師應(yīng)用更多一些。但是我們是透過現(xiàn)象看實(shí)質(zhì)。因?yàn)槟愕膱D片如何使用會對你的產(chǎn)品的用戶體驗(yàn)產(chǎn)生很大的影響。這個無需多言，我相信不同產(chǎn)品的設(shè)計師肯定都會有自己的感受。所以我還是給這篇文章歸于用戶體驗(yàn)這個范疇的。作為產(chǎn)品經(jīng)理的我們，這一點(diǎn)基本的知識應(yīng)該去明確。老肥堅(jiān)定的認(rèn)為，只有心中具有完美主義傾向的產(chǎn)品經(jīng)理才有可能設(shè)計出真正好的產(chǎn)品，那種經(jīng)常覺得“湊合吧，可以了”，這樣的產(chǎn)品經(jīng)理做不出什么好東西，我也不想做，也不喜歡。

ps：想深入探討的同學(xué)推薦《圖片格式與設(shè)計那點(diǎn)事兒》一文閱讀。

本文系作者老肥獨(dú)家授權(quán)發(fā)布，轉(zhuǎn)載請注明來源于人人都是產(chǎn)品經(jīng)理，且保留原文鏈接。