儲(chǔ)存知識(shí)，關(guān)于保存圖片時(shí)圖片壓縮的相關(guān)知識(shí)

網(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