網(wǎng)頁圖片為了達(dá)到更快的加載速度，就必須要進(jìn)行圖片壓縮，那么怎么壓縮圖片是最好的呢？我們來一起研究一下。

最近在做webapp，發(fā)現(xiàn)產(chǎn)品圖的大小無論怎么壓縮都還是有20-30KB，這樣的大小在搜索列表頁可不是個(gè)小數(shù)目。經(jīng)我們的后臺(tái)提醒，說京東上有一張產(chǎn)品圖  220*220px-96dpi-6.62KB~~為了一探究竟，我做了如下實(shí)驗(yàn)！

在前端網(wǎng)頁中，關(guān)于產(chǎn)品圖和banner圖的壓縮，有一個(gè)總體的結(jié)論：

1.實(shí)物圖傾向用jpg/jpeg格式；

2.具備較大亮度差異及強(qiáng)烈對(duì)比的圖像傾向于png格式。

注:本文章最后詳細(xì)說面了上面的結(jié)論。

但是這篇文章也提出一個(gè)觀點(diǎn):“jpg格式中，謹(jǐn)慎使用50%品質(zhì)以下的壓縮率”

乍一看50%以下的壓縮率好像是雷區(qū)（我一直被這句話忽悠了）....

所以我一直用一個(gè)在線壓縮圖片的網(wǎng)址來壓縮圖片:https://tinypng.com

在要求不高的情況下，是非常好用的。根據(jù)圖片內(nèi)容、大小的不同，壓縮率在60%-90%不等。

隨便找?guī)讖垐D，100-200KB的圖，壓縮到20-30KB已經(jīng)上天了，真心好奇220*220-96dpi-6.6KB是怎么做到的！

-----------------------------------------------------分割線------------------------------------------------------

于是今天做了個(gè)實(shí)驗(yàn)，將原圖為800*800px-96dpi-75KB的圖壓縮到220*220px-96dpi-6.6KB，

這里需要注意，必須是使用PS的這個(gè)功能(截圖版本:PS CS6 13.0):

而在PS CC16.0版本中這個(gè)選項(xiàng)沒有了！

----------------------------------------------------- 開整 ------------------------------------------------------

先附上原圖屬性的截圖，這3張圖都是從京東上直接down下來的。

1.把800*800尺寸的圖改成220*220，這個(gè)大家都會(huì)，此處略。

2.通過ps“存儲(chǔ)為web所用格式..”其實(shí)只要把存儲(chǔ)品質(zhì)選到40左右（我為了測(cè)試，發(fā)現(xiàn)39這個(gè)值生成的文件大小最接近原圖）這時(shí)候再點(diǎn)擊上圖下面的“存儲(chǔ)”按鈕。就大功告成了

此例中，220*220-96dpi的圖能壓縮到6KB，并且在手機(jī)端幾乎看不出來100品質(zhì)和40品質(zhì)的區(qū)別，換句話說，僅僅犧牲了一點(diǎn)肉眼很難分辨的清晰度，換來了更小的圖片大小。

這篇文章純屬用來告誡自己不要想當(dāng)然，網(wǎng)上一些所謂的“結(jié)論”，并不一定使用所有情況。

----------------------------------------------------- 補(bǔ)充知識(shí) ------------------------------------------------------

《京東后臺(tái)圖片優(yōu)化技巧》作者：PointNet

文檔主要包括以下幾方面內(nèi)容：

1. 基本概念
   • 位圖
2. 實(shí)際應(yīng)用
   • 什么時(shí)候應(yīng)該使用PNG
   • 什么時(shí)候應(yīng)該使用JPG
   • 總結(jié)
3. Photoshop中各種參數(shù)的含義及設(shè)置技巧

1、基本概念

• 位圖

位圖又叫像素圖或柵格圖，它是通過記錄圖像中每一個(gè)點(diǎn)的顏色、深度、透明度等信息來存儲(chǔ)和顯示圖像。一張位圖就好比一幅大的拼圖，只不過每個(gè)拼塊都是一個(gè)純色的像素點(diǎn)，當(dāng)我們把這些不同顏色的像素點(diǎn)按照一定規(guī)律排列在一起的時(shí)候，就形成了我們所看到的圖像。所以當(dāng)我們放大一幅像素圖時(shí)，能看到這些拼片一 樣的像素點(diǎn)（如下圖）。在web頁面中所使用的JPG、PNG、GIF格式的圖像都是位圖。

優(yōu)點(diǎn)：利于顯示色彩層次豐富的寫實(shí)圖像。

缺點(diǎn)：文件大小較大，放大和縮小圖像會(huì)失真。

• JPG和PNG

JPG和PNG的一些特性對(duì)比：

格式

壓縮模式

交錯(cuò)支持

透明支持

動(dòng)畫支持

JPG

有損壓縮

支持

不支持

不支持

PNG

無損壓縮

支持

支持

不支持

JPG的特性

    1、支持?jǐn)z影圖像或?qū)憣?shí)圖像的高級(jí)壓縮，并且可利用壓縮比例控制圖像文件大小。

    2、有損壓縮會(huì)使圖像數(shù)據(jù)質(zhì)量下降，并且在編輯和重新保存JPG格式圖像時(shí)，這種下降損失會(huì)累積。

    3、JPG不適用于所含顏色很少、具有大塊顏色相近的區(qū)域或亮度差異十分明顯的較簡(jiǎn)單的圖片。

PNG的特性

    1、能在保證最不失真的情況下盡可能壓縮圖像文件的大小。

    2、PNG用來存儲(chǔ)灰度圖像時(shí)，灰度圖像的深度可多到16位，存儲(chǔ)彩色圖像時(shí)，彩色圖像的深度可多到48位，并且還可存儲(chǔ)多到16位的α通道數(shù)據(jù)。

3、對(duì)于需要高保真的較復(fù)雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應(yīng)用在Web頁面上。

PNG8與PNG24

提到PNG格式可分為PNG8和PNG24，兩者后面的數(shù)字則是代表這種PNG格式最多可以索引和存儲(chǔ)的顏色值。”8″代表2的8次方也就是256色，而24則代表2的24次方大概有1600多萬色。

PNG8還支持1位的布爾透明通道，所謂布爾透明指的是要么完全透明要么完全不透明。而PNG24則支持8位（256階）的alpha通道透明，也就是說可以存儲(chǔ)從完全透明到完全不透明一共256個(gè)層級(jí)的透明度（即所謂的半透明）。

格式

最高支持色彩通道

索引色編輯支持

透明支持

PNG8

256色

支持

支持布爾透明

PNG24

約1600萬色

不支持

支持8位（256階）alpha透明

• GIF

由于GIF現(xiàn)在使用率偏低，常適用于GIF動(dòng)畫，由于PNG本身是開發(fā)者為了代替GIF而衍生出的圖片格式，所以透明圖片建議采用PNG8。

GIF文件的數(shù)據(jù)，是一種基于LZW算法的連續(xù)色調(diào)的無損壓縮格式。其壓縮率一般在50%左右，它不屬于任何應(yīng)用程序。 GIF格式的另一個(gè)特點(diǎn)是其在一個(gè)GIF文件中可以存多幅彩色圖像，如果把存于一個(gè)文件中的多幅圖像數(shù)據(jù)逐幅讀出并顯示到屏幕上，就可構(gòu)成一種最簡(jiǎn)單的動(dòng)畫。

2、實(shí)際應(yīng)用

• 什么時(shí)候應(yīng)該使用PNG

案例1：

下圖為京東商城header部分用JPG和PNG8格式分別進(jìn)行保存，可以看到保存的結(jié)果有兩個(gè)值得注意的地方：

1、JPG保存的文件大小比是PNG保存的文件大

2、JPG文件出現(xiàn)了噪點(diǎn)

 

造成結(jié)果的原因分析：

1、 首先我們發(fā)現(xiàn)文字顏色和描邊等都是采用純色， 圖像所包含的色彩信息非常有限。當(dāng)用PNG存儲(chǔ)這個(gè)圖像時(shí)，只需要保存很少的色彩信息就可以真實(shí)還原這個(gè)圖 像。而對(duì)于JPG格式來說大小主要決定于圖像的顏色層次，所以在這種顏色較少但對(duì)比強(qiáng)烈的情況下，反而不能很好的壓縮文件大小。

案例2：

下圖用PNG8和JPG進(jìn)行了保存，發(fā)現(xiàn)當(dāng)用PNG8保存時(shí)不僅保證了圖像的質(zhì)量且圖像文件的大小僅有8.3K，而當(dāng)用JPG 100%保存時(shí)文件大小則增加到44.2K，如果不經(jīng)放大可能還看不出具體的差異，但實(shí)際和前面一樣也會(huì)出現(xiàn)不必要的噪點(diǎn)。如果我們要達(dá)到PNG8的壓縮 率采用JPG 45%進(jìn)行保存，則圖像會(huì)出現(xiàn)較嚴(yán)重的失真。

 

結(jié)論 具備以下條件的圖像更適合用PNG8格式進(jìn)行存儲(chǔ)：

1、圖像上顏色較少，并且主要以純色或者平滑的漸變色進(jìn)行填充。

2、具備較大亮度差異以及強(qiáng)烈對(duì)比的簡(jiǎn)單圖像（如“立刻購買”按鈕中的背景和文字）。

• 什么時(shí)候應(yīng)該使用JPG

案例1：

下圖用JPG 60%（左上）、PNG8 256色 無仿色（右上）、PNG8 256色 擴(kuò)散仿色（左下）、PNG32（右下）分別進(jìn)行了存儲(chǔ)。可以看出當(dāng)用JPG存儲(chǔ)圖像時(shí)不僅能夠達(dá)到最大的壓縮率，也能盡量保證原圖的還原效果。而采用PNG8進(jìn)行保存時(shí)圖像文件大小更大，失真也較嚴(yán)重。只有在PNG24的格式下才能保證品質(zhì)，然而文件大小卻比JPG要大很多。

造成結(jié)果的原因分析：

產(chǎn)生這種結(jié)果的原因也與JPG和PNG各自的壓縮算法有關(guān)。

1、對(duì)于攝影或者寫實(shí)作品，由于受環(huán)境光線的影響，圖像上的色彩層次十分豐富。比如巴士車上的紅色區(qū)域由于反光、陰影以及透視效果會(huì)形成明暗、深淺各異的區(qū)域，如果用PNG去保存，則需要不同明暗度的紅色去存儲(chǔ)這個(gè)區(qū)域。對(duì)于整張圖片來說，PNG8的256色無法完全索引圖像上出現(xiàn)的所有顏色，于是在存儲(chǔ)時(shí)就會(huì)丟失許多顏色而產(chǎn)生失真。如果要保證圖像的效果，則需要色彩范圍更廣的PNG24進(jìn)行存儲(chǔ)，相應(yīng)的文件大小也會(huì)增加。

2、JPG的壓縮算法則更利于對(duì)真實(shí)世界中這些復(fù)雜的色彩變化進(jìn)行壓縮處理，從而在盡量壓縮文件大小的情況下比較好的還原圖像的視覺效果。

 

案例2

下圖中用不同圖片格式對(duì)背景進(jìn)行保存時(shí)可以發(fā)現(xiàn)：當(dāng)用JPG進(jìn)行保存時(shí)（直接背景另存為）文件大小僅36.3K；用PNG8 256色無仿色去保存時(shí)大小增加到57.7K，不僅如此由于顏色的缺失在圖像上還出現(xiàn)了一些帶鋸齒的色塊；為了降低這些色塊對(duì)圖像質(zhì)量的影響我們對(duì)PNG8增加了擴(kuò)散仿色的效果，此時(shí)文件大小達(dá)到了156.3K；而當(dāng)采用PNG24完全不失真的保存時(shí)文件大小是231.9K。

造成結(jié)果的原因分析：

我們可以發(fā)現(xiàn)由于在圖像上采用了很多的真實(shí)素材（比如白云、螞蟻、綠葉等），而這些真實(shí)素材和攝影圖像一樣也會(huì)存在非常豐富的色彩層次，所以也不適合用PNG格式進(jìn)行保存。這個(gè)時(shí)候我們就應(yīng)該采用JPG格式。

 

 

 

結(jié)論 具備以下條件的圖像更適合用JPG格式進(jìn)行存儲(chǔ)：

對(duì)于寫實(shí)的攝影圖像或是顏色層次非常豐富的圖像采用JPG的圖片格式保存一般能達(dá)到最佳的壓縮效果。

 

總結(jié)

在存儲(chǔ)圖像時(shí)采用JPG還是PNG主要依據(jù)圖像上的色彩層次和顏色數(shù)量進(jìn)行選擇。一般層次豐富顏色較多的圖像采用JPG存儲(chǔ)，而顏色簡(jiǎn)單對(duì)比強(qiáng)烈的則需要采用PNG。但也會(huì)有一些特殊情況，例如有些圖像盡管色彩層次豐富，但由于圖片尺寸較小，上面包含的顏色數(shù)量有限時(shí)，也可以嘗試用PNG進(jìn) 行存儲(chǔ)。而有些矢量工具繪制的圖像由于采用較多的濾鏡特效也會(huì)形成豐富的色彩層次，這個(gè)時(shí)候就需要采用JPG進(jìn)行存儲(chǔ)了。

另外還有一個(gè)原則就是用于頁面結(jié)構(gòu)的基本視覺元素，如容器的背景、按鈕、導(dǎo)航的背景等應(yīng)該盡量用PNG格式進(jìn)行存儲(chǔ)，這樣才能更好的保證設(shè)計(jì)品質(zhì)。而其他一些內(nèi)容元素，如廣告Banner、商品圖片等對(duì)質(zhì)量要求不是特別苛刻的，則可以用JPG去進(jìn)行存儲(chǔ)從而降低文件大小。

3、Photoshop中各種參數(shù)的含義及設(shè)置技巧

• PNG8的參數(shù)設(shè)置

減低顏色深度算法與顏色

指定用于生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數(shù)量。可以選擇以下減低顏色深度算法之一：

1. 可感知：通過為人眼比較靈敏的顏色賦以優(yōu)先權(quán)來創(chuàng)建自定顏色表。
2. 可選擇：創(chuàng)建一個(gè)顏色表，此表與”可感知”顏色表類似，但對(duì)大范圍的顏色區(qū)域和保留 Web 顏色有利。此顏色表通常會(huì)生成具有最大顏色完整性的圖像。“可選擇”是默認(rèn)選項(xiàng)。
3. 隨樣性：通過從圖像的主要色譜中提取色樣來創(chuàng)建自定顏色表。例如，只包含綠色和藍(lán)色的圖像產(chǎn)生主要由綠色和藍(lán)色構(gòu)成的顏色表。大多數(shù)圖像的顏色集中在色譜的特定區(qū)域。
4. 受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）調(diào)板通用的標(biāo)準(zhǔn) 216 色顏色表。該選項(xiàng)確保當(dāng)使用 8 位顏色顯示圖像時(shí)，不會(huì)對(duì)顏色應(yīng)用瀏覽器仿色。（該調(diào)板也稱為 Web 安全調(diào)板。） 使用 Web 調(diào)板可能會(huì)創(chuàng)建較大的文件，因此，只有當(dāng)避免瀏覽器仿色是優(yōu)先考慮的因素時(shí)，才建議使用該選項(xiàng)。
5. 自定：使用用戶創(chuàng)建或修改的調(diào)色板。如果打開現(xiàn)有的 GIF 或 PNG-8 文件，它將具有自定調(diào)色板。使用”存儲(chǔ)為 Web 和設(shè)備所用格式”對(duì)話框中的”顏色表”調(diào)板可自定顏色查找表。
6. 黑白、灰度、Mac OS、Windows使用一組調(diào)色板。

PS：一般情況下默認(rèn)選擇“可選擇”項(xiàng)即可。

仿色方法和仿色

確定應(yīng)用程序仿色的方法和數(shù)量。”仿色”是指模擬計(jì)算機(jī)的顏色顯示系統(tǒng)中未提供的顏色的方法。

較高的仿色百分比使圖像中出現(xiàn)更多的顏色和更多的細(xì)節(jié)，但同時(shí)也會(huì)增大文件大小。為了獲得最佳壓縮比，請(qǐng)使用可提供所需顏色細(xì)節(jié)的最低百分比的仿色。

若圖像所包含的顏色主要是純色，則在不應(yīng)用仿色時(shí)通常也能正常顯示。包含連續(xù)色調(diào)（尤其是顏色漸變）的圖像，可能需要仿色以防止出現(xiàn)顏色條帶現(xiàn)象。

可以選擇以下幾種仿色方法之一：

1. 擴(kuò)散：應(yīng)用與”圖案”仿色相比通常不太明顯的隨機(jī)圖案。仿色效果在相鄰像素間擴(kuò)散。
2. 圖案：使用類似半調(diào)的方形圖案模擬顏色表中沒有的任何顏色。
3. 雜色：應(yīng)用與”擴(kuò)散”仿色方法相似的隨機(jī)圖案，但不在相鄰像素間擴(kuò)散圖案。使用”雜色”仿色方法時(shí)不會(huì)出現(xiàn)接縫。

ps：一般只在圖片顏色過多產(chǎn)生失真的情況下才需要選擇仿色。建議選擇擴(kuò)散仿色，可以適當(dāng)調(diào)節(jié)仿色的百分比以達(dá)到最佳的效果。仿色度越高文件大小也越大。

透明度和雜邊

確定如何優(yōu)化圖像中的透明像素。

1. 要使完全透明的像素透明并將部分透明的像素與一種顏色相混合，請(qǐng)選擇”透明度”，然后選擇一種雜邊顏色。
2. 要使用一種顏色填充完全透明的像素并將部分透明的像素與同一種顏色相混合，請(qǐng)選擇一種雜邊顏色，然后取消選擇”透明度”。
3. 要選擇雜邊顏色，請(qǐng)單擊”雜邊”色板，然后在拾色器中選擇一種顏色。或者，也可以從”雜邊”菜單中選擇一個(gè)選項(xiàng)：”吸管”（使用吸管樣本框中的顏色）、”前景色”、”背景色”、”白色”、”黑色”或”其它”（使用拾色器）

 

交錯(cuò)

PNG、GIF這兩種圖像格式都提供了一種功能，讓圖像能夠更快地顯示。圖像可以以一種特殊方式存儲(chǔ)，顯示時(shí)先大概顯示圖像的草圖，當(dāng)文件全部下載后再填充細(xì)節(jié)。這起到一種很有意義的心理效果，因?yàn)檫@樣使人們有東西可看，而不必坐著干等大型圖像慢慢顯示在屏幕上。

ps：對(duì)于尺寸和文件大小相對(duì)較大的圖片建議勾選此項(xiàng)。

• JPG的參數(shù)設(shè)置

品質(zhì)

從”品質(zhì)級(jí)別”菜單中選取一個(gè)選項(xiàng)，或者在”品質(zhì)”文本框中指定一個(gè)值。”品質(zhì)”設(shè)置越高，壓縮算法保留的細(xì)節(jié)越多。但是，使用高”品質(zhì)”設(shè)置比使用低”品質(zhì)”設(shè)置生成的文件大。查看幾種品質(zhì)設(shè)置下的優(yōu)化圖像，確定品質(zhì)和文件大小之間的最佳平衡點(diǎn)。

品質(zhì)設(shè)置技巧

1. 不要存100%品質(zhì)的JPG格式圖片。因?yàn)?00%并不一定是最高的品質(zhì)，只是一個(gè)數(shù)值上的優(yōu)化底線，最終你會(huì)得到一個(gè)不合理的大文件。事實(shí)上把質(zhì)量設(shè)置在95以上就已經(jīng)足以防止丟失信息了。
   在質(zhì)量上有個(gè)分水嶺，這就是我們通常建議JPG質(zhì)量最好是在60-80的原因。
2. 謹(jǐn)慎使用50%品質(zhì)以下的壓縮率。當(dāng)在Photoshop中把質(zhì)量設(shè)置低于51的時(shí)候，它就會(huì)執(zhí)行另一個(gè)叫做 “降色采樣（原文：color down-sampling）”的優(yōu)化算法，它會(huì)在8個(gè)像素周圍平均采樣，這樣會(huì)在邊緣產(chǎn)生雜色。
   使用50%以下品質(zhì)存儲(chǔ)時(shí)會(huì)采用額外的壓縮算法而導(dǎo)致圖片失真更嚴(yán)重，尤其是對(duì)于有高對(duì)比度的圖片。

 

圖例（左為質(zhì)量50右為質(zhì)量51）

優(yōu)化

選擇”優(yōu)化”創(chuàng)建文件大小稍小的增強(qiáng)型 JPEG。建議使用”優(yōu)化 JPEG”格式以獲得最大文件壓縮量；但是，一些較舊的瀏覽器不支持此特性。

ps：建議勾選此項(xiàng)，目前基本已經(jīng)不存在不支持改功能的瀏覽器。

連續(xù)

選擇”連續(xù)”創(chuàng)建在 Web 瀏覽器中連續(xù)顯示的圖像。圖像將顯示為一系列的疊加，使查看者在整個(gè)圖像下載完畢之前，能夠看到圖像的低分辨率版本。連續(xù) JPEG 需要更多的內(nèi)存用于查看，一些瀏覽器不支持該選項(xiàng)。

ps：勾選此項(xiàng)在某些情況下可壓縮文件大�。▓D片大小大于10k時(shí)），某些情況下會(huì)增大文件大小，建議在保存是根據(jù)實(shí)際情況決定。不過IE6及更早版本的IE瀏覽器不支持JPG連續(xù)顯示，而是在圖片完全加載后一次成像，用戶體驗(yàn)上可能還不如不使用連續(xù)的逐步成像要 好，所以建議慎選此項(xiàng)。

模糊

指定應(yīng)用于圖像的模糊量。”模糊”選項(xiàng)應(yīng)用與”高斯模糊”濾鏡相同的效果，并允許進(jìn)一步壓縮文件以獲得更小的文件大小。建議使用 0.1 到 0.5 之間的設(shè)置。

ICC 配置文件

選擇”ICC 配置文件”將圖片的 ICC 配置文件與文件保留在一起。ICC 配置文件由某些瀏覽器用于色彩校正。（請(qǐng)參閱Photoshop中設(shè)置色彩管理。）

雜邊

指定原稿圖像中透明像素的填充色：點(diǎn)按”雜邊”色板，然后在拾色器中選擇一種顏色。從”雜邊”菜單中選取選項(xiàng)。原稿圖像中完全透明的像素由選中的顏色填充，原稿圖像中部分透明的像素與選中的顏色相混合。