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

2022-12-26 17:56:30 來源/作者： / 己有：47人學(xué)習(xí)過

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

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

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

1.實物圖傾向用jpg/jpeg格式；

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

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

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

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

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

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

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

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

于是今天做了個實驗，將原圖為800*800px-96dpi-75KB的圖壓縮到220*220px-96dpi-6.6KB，

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

而在PS CC16.0版本中這個選項沒有了！

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

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

1.把800*800尺寸的圖改成220*220，這個大家都會，此處略。

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

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

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

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

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

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

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

1、基本概念

位圖

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

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

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