|
2、實際應用
什么時候應該使用PNG
示例1
下圖是淘寶網(wǎng)最常見的一個圖片即“立刻購買”按鈕，這里我嘗試用JPG和PNG8格式分別進行保存，可以看到保存的結果有兩個值得注意的地方：
1、JPG保存的文件大小是PNG保存的文件大小的2倍
2、JPG不僅文件更大并且還出現(xiàn)了噪點（如圖中紅色方框標注的）
那么是什么原因造成這樣的差異呢？
首先我們可以看出“立刻購買”這個按鈕是在photoshop中用矢量工具繪制出來的，其漸變填充是非常規(guī)則的線性漸變，文字顏色和描邊等都是采用純色，所以這個圖像所包含的色彩信息非常有限。根據(jù)前面我們介紹的無損壓縮的特性，當用PNG存儲這個圖像時，只需要保存很少的色彩信息就可以真實還原這個圖像。而對于JPG格式來說大小主要決定于圖像的顏色層次，所以在這種顏色較少但對比強烈的情況下，反而不能很好的壓縮文件大小。
另外根據(jù)有損壓縮的壓縮算法JPG會在圖像中通過漸變或其他方式填充一些被刪除的數(shù)據(jù)信息來對圖像進行壓縮，圖中紅色和白色的地方由于色差較大，JPG在壓縮過程中就會填充一些額外雜色進去，反而影響的圖像的質量。這也是為什么JPG不利于存儲大塊顏色相近區(qū)域以及亮度差異十分明顯的圖像的原因。
示例2
我們再來看另外一個應用場景，下圖是在淘寶彩票頁面使用的一個Banner圖像。同樣用PNG8和JPG進行了保存，可以發(fā)現(xiàn)當用PNG8保存時不僅保證了圖像的質量且圖像文件的大小僅有8.3K，而當用JPG 100%保存時文件大小則增加到44.2K，如果不經(jīng)放大可能還看不出具體的差異，但實際和前面一樣也會出現(xiàn)不必要的噪點。如果我們要達到PNG8的壓縮率采用JPG 45%進行保存，則圖像會出現(xiàn)較嚴重的失真。
出處：taobaoued
責任編輯：bluehearts
上一頁 圖片格式與設計 [3] 下一頁 圖片格式與設計 [5]
|
第 1 頁 
第 4 頁 圖片格式與設計 [4]
