jpg、png、gif圖片格式的淺析

原文地址：圖片格式與設計那點事兒

以前面試時被面試官問到了jpg、gif、png格式的區別，當時就扯了一些，感受都是扯淡，上網搜了下，分享一篇文章

 

第一次寫技術博客，有不盡如人意的地方，還請見諒和指正。

爲何想整理這方面的類容，我以爲就像油畫家要了解他的顏料和畫布、雕塑家要了解他的石材同樣，做爲網頁設計師也應該對圖片格式的特性有必定了解，這樣才能更好的表達你的創意和想法。

除此以外，咱們在平時工做中也會遇到許多與圖片格式相關的問題。好比設計師會奇怪爲何有些頁面的產出物老是無法達到設計稿那樣的品質和效果，什麼樣的設計才更適合Web頁面；頁面重構師和前端工程師則想知道在切圖的時候應採用什麼圖片格式、如何進行參數設置才能達到品質和性能的最優化。

有時候咱們可能會由於一張格式不正確的圖片而致使設計品質的降低以及頁面性能的下降。瞭解圖片格式的特性就是爲解答這些困惑從而讓咱們設計的產品更好、更快。

本文主要包括如下幾方面內容：

         一、基本概念

1. • 矢量圖與位圖
   • 有損壓縮與無損壓縮

         二、實際應用

1. • 何時應該使用PNG
   • 何時應該使用JPG
   • 總結

        三、思考與實踐四、附錄-Photoshop中各類參數的含義及設置技巧

1. • 什麼樣的設計更適合Web頁面？
   • 咱們還能夠作些什麼？

一、基本概念

要了解圖片格式的特性，首先得從一些基本概念開始。這部份內容讀起來可能會比較枯燥，但若是你耐着性子讀完它，相信會獲益匪淺。

 

矢量圖與位圖

矢量圖-完美的幾何圖形

矢量圖是經過組成圖形的一些基本元素，如點、線、面，邊框，填充色等信息經過計算的方式來顯示圖形的。就比如咱們在幾何學裏面描述一個圓能夠經過它的圓心位置和半徑來描述，固然還能夠經過邊框的粗細、顏色以及填充的顏色等數據去描述它的樣式。而電腦在顯示的時候則經過這些數據去繪製出咱們定義的圖像。

矢量圖的優勢在於文件相對較小，而且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現天然度高的寫實圖像。

須要強調說明的是咱們在web頁面上所使用的圖像都是位圖，即使有些稱爲矢量圖形（如矢量icon等）也是指經過矢量工具進行繪製而後再轉成位圖格式在web上使用的（區別於像素繪製的圖形）。

位圖-神奇的拼圖

位圖又叫像素圖或柵格圖，它是經過記錄圖像中每個點的顏色、深度、透明度等信息來存儲和顯示圖像。一張位圖就比如一幅大的拼圖，只不過每一個拼塊都是一個純色的像素點，當咱們把這些不一樣顏色的像素點按照必定規律排列在一塊兒的時候，就造成了咱們所看到的圖像。因此當咱們放大一幅像素圖時，能看到這些拼片同樣的像素點（以下圖）。

位圖的優勢是利於顯示色彩層次豐富的寫實圖像。缺點則是文件大小較大，放大和縮小圖像會失真。

儘管咱們在web頁面中所使用的JPG、PNG、GIF格式的圖像都是位圖，即他們都是經過記錄像素點的數據來保存和顯示圖像，但這些不一樣格式的圖像在記錄這些數據時的方式卻不同，這就是涉及到有損壓縮和無損壓縮的區別。

有損壓縮與無損壓縮

有損壓縮-你看到的不必定是真實的

按照個人理解有損壓縮就是在存儲圖像的時候並不徹底真實的記錄圖像上每一個像素點的數據信息，它會根據人眼觀察現實世界的特性（人眼對光線的敏感度比對顏色的敏感度要高，生物實驗證實當顏色缺失時人腦會利用與附近最接近的顏色來自動填補缺失的顏色）對圖像數據進行處理，去掉那些圖像上會被人眼忽略的細節，而後使用附近的顏色經過漸變或其餘形式進行填充。這樣既能大大下降圖像信息的數據量，又不會影響圖像的還原效果。

JPG是咱們最多見的採用有損壓縮對圖像信息進行處理的圖片格式。JPG在存儲圖像時會把圖像分解成8*8像素的柵格（如上圖），而後對每一個柵格的數據進行壓縮處理，當咱們放大一幅圖像的時候，就會發現這些8*8像素柵格中不少細節信息被去除，而經過一些特殊算法用附近的顏色進行填充（爲了讓你們看得更清楚我將圖像的壓縮比率調到很低）。這也是爲何咱們用JPG存儲圖像有時會產生塊狀模糊的緣由。

無損壓縮-最精確的拼圖

相對有損壓縮而言無損壓縮則會真實的記錄圖像上每一個像素點的數據信息，但爲了壓縮圖像文件的大小會採起一些特殊的算法。無損壓縮的壓縮原理是先判斷圖像上哪些區域的顏色是相同的，哪些是不一樣的，而後把這些相同的數據信息進行壓縮記錄，（例如一片藍色的天空之須要記錄起點和終點的位置就能夠了），而把不一樣的數據另外保存（例如天空上的白雲和漸變等數據）。

PNG是咱們最多見的一種採用無損壓縮的圖片格式。無損壓縮在存儲圖像前會先判斷圖像上哪些地方是相同的哪些地方是不一樣的，爲此須要對圖像上全部出現的顏色進行索引（如上圖），咱們把稱這些顏色稱爲索引色。索引色就比如繪製這幅圖像的「調色版」，PNG在顯示圖像的時候則會用「調色版」上的這些顏色去填充相應的位置。

這裏你們可能會疑惑既然PNG採用的是無損壓縮爲何咱們保存的PNG格式圖片還會有失真呢？這是由於無損壓縮只是說它的壓縮方式會盡量真實的還原圖像，但從它的壓縮原理咱們能夠知道它是經過索引圖像上相同區域的顏色進行壓縮和還原的，這就意味着只有在圖像上出現的顏色數量小於咱們能夠保存的顏色數量時，咱們才能真實的記錄和還原圖像，不然就會丟失一些圖像信息（PNG8最多隻能索引256種顏色，因此對於顏色較多的圖像不能真實還原；PNG24則能夠保存1600多萬種顏色，基本可以真實還原咱們人類肉眼所能夠分別的全部顏色；PNG格式最多能夠保存48位顏色通道）。而對於有損壓縮來講，無論圖像上的顏色多少，都會損失圖像信息。

JPG和PNG

關於JPG和PNG的基本信息介紹這裏就不贅述了，有興趣詳細瞭解的同窗能夠去這裏：
什麼是JPG、什麼是PNG。另外這裏咱們也不對GIF進行討論，是由於PNG就是爲取代GIF而生的，並且PNG的壓縮算法也要優於GIF，因此只要不是須要動畫效果的地方強烈建議都採用PNG格式圖片。

這裏咱們不妨把JPG和PNG的一些特性進行一個簡單對比：

格式	壓縮模式	交錯支持	透明支持	動畫支持
JPG	有損壓縮	支持	不支持	不支持
PNG	無損壓縮	支持	支持	不支持

JPG的特性

1. 一、支持攝影圖像或寫實圖像的高級壓縮，而且可利用壓縮比例控制圖像文件大小。
2. 二、有損壓縮會使圖像數據質量降低，而且在編輯和從新保存JPG格式圖像時，這種降低損失會累積。
3. 三、JPG不適用於所含顏色不多、具備大塊顏色相近的區域或亮度差別十分明顯的較簡單的圖片。

PNG的特性

1. 一、能在保證最不失真的狀況下儘量壓縮圖像文件的大小。
2. 二、PNG用來存儲灰度圖像時，灰度圖像的深度可多到16位，存儲彩色圖像時，彩色圖像的深度可多到48位，而且還可存儲多到16位的α通道數據。
3. 三、對於須要高保真的較複雜的圖像，PNG雖然能無損壓縮，但圖片文件較大，不適合應用在Web頁面上。

PNG8與PNG24

提到PNG格式就不得不提到PNG8和PNG24，這種叫法並不是官方定義，不過因爲廣泛使用已經被你們普遍接受了。經過前面的介紹咱們知道PNG採用無損壓縮是經過索引色去存儲和還原圖像的，PNG8和PNG24後面的數字則是表明這種PNG格式最多能夠索引和存儲的顏色值。」8″表明2的8次方也就是256色，而24則表明2的24次方大概有1600多萬色。

不只如此，PNG8還支持1位的布爾透明通道，所謂布爾透明指的是要麼徹底透明要麼徹底不透明。而PNG24則支持8位（256階）的alpha通道透明，也就是說能夠存儲從徹底透明到徹底不透明一共256個層級的透明度（即所謂的半透明）。

格式	最高支持色彩通道	索引色編輯支持	透明支持
PNG8	256色	支持	支持布爾透明
PNG24	約1600萬色	不支持	支持8位（256階）alpha透明

可能經過以上特性的對比你們還不能很直觀的理解在實際應用中到底因該選擇什麼格式的圖片文件，咱們不妨結合上面的基本概念經過幾個例子去給你們說明。

二、實際應用

何時應該使用PNG

示例1

下圖是淘寶網最多見的一個圖片即「馬上購買」按鈕，這裏我嘗試用JPG和PNG8格式分別進行保存，能夠看到保存的結果有兩個值得注意的地方：

1. 一、JPG保存的文件大小是PNG保存的文件大小的2倍
2. 二、JPG不只文件更大而且還出現了噪點（如圖中紅色方框標註的）

那麼是什麼緣由形成這樣的差別呢？

首先咱們能夠看出「馬上購買」這個按鈕是在photoshop中用矢量工具繪製出來的，其漸變填充是很是規則的線性漸變，文字顏色和描邊等都是採用純色，因此這個圖像所包含的色彩信息很是有限。根據前面咱們介紹的無損壓縮的特性，當用PNG存儲這個圖像時，只須要保存不多的色彩信息就能夠真實還原這個圖像。而對於JPG格式來講大小主要決定於圖像的顏色層次，因此在這種顏色較少但對比強烈的狀況下，反而不能很好的壓縮文件大小。

另外根據有損壓縮的壓縮算法JPG會在圖像中經過漸變或其餘方式填充一些被刪除的數據信息來對圖像進行壓縮，圖中紅色和白色的地方因爲色差較大，JPG在壓縮過程當中就會填充一些額外雜色進去，反而影響的圖像的質量。這也是爲何JPG不利於存儲大塊顏色相近區域以及亮度差別十分明顯的圖像的緣由。

示例2

咱們再來看另一個應用場景，下圖是在淘寶彩票頁面使用的一個Banner圖像。一樣用PNG8和JPG進行了保存，能夠發現當用PNG8保存時不只保證了圖像的質量且圖像文件的大小僅有8.3K，而當用JPG 100%保存時文件大小則增長到44.2K，若是不經放大可能還看不出具體的差別，但實際和前面同樣也會出現沒必要要的噪點。若是咱們要達到PNG8的壓縮率採用JPG 45%進行保存，則圖像會出現較嚴重的失真。

由此咱們能夠得出結論，具有如下條件的圖像更適合用PNG8格式進行存儲：

1. 一、圖像上顏色較少，而且主要以純色或者平滑的漸變色進行填充。
2. 二、具有較大亮度差別以及強烈對比的簡單圖像（如「馬上購買」按鈕中的背景和文字）。

根據經驗具有上述條件的圖像通常是使用photoshop或其餘軟件中的矢量工具進行繪製而後再保存成位圖的圖像。

何時應該使用JPG

示例1

從JPG的特性介紹咱們知道JPG更適合用來存儲攝影或寫實圖像，因此咱們不妨先拿一張攝影做品作嘗試。

下圖是一副巴士車的照片，咱們嘗試用JPG 60%（左上）、PNG8 256色 無仿色（右上）、PNG8 256色 擴散仿色（左下）、PNG32（右下）分別進行了存儲。能夠看出當用JPG存儲圖像時不只可以達到最大的壓縮率，也能儘可能保證原圖的還原效果。而採用PNG8進行保存時圖像文件大小更大，失真也較嚴重。只有在PNG24的格式下才能保證品質，然而文件大小卻比JPG要大不少。

產生這種結果的緣由也與JPG和PNG各自的壓縮算法有關。

對於攝影或者寫實做品，因爲受環境光線的影響，圖像上的色彩層次十分豐富。好比巴士車上的紅色區域因爲反光、陰影以及透視效果會造成明暗、深淺各異的區域，若是用PNG去保存，則須要不一樣明暗度的紅色去存儲這個區域。對於整張圖片來講，PNG8的256色沒法徹底索引圖像上出現的全部顏色，因而在存儲時就會丟失許多顏色而產生失真。若是要保證圖像的效果，則須要色彩範圍更廣的PNG24進行存儲，相應的文件大小也會增長。

而JPG的壓縮算法則更利於對真實世界中這些複雜的色彩變化進行壓縮處理，從而在儘可能壓縮文件大小的狀況下比較好的還原圖像的視覺效果。

示例2

那麼是否是隻有在存儲照片的時候才須要用到JPG呢？咱們不妨來看另一個例子。

下圖是最近比較火爆的某微博頁面，在這裏咱們能夠選擇不一樣的風格，每種風格都會有一個很是有特點的背景圖片。咱們嘗試用不一樣圖片格式對背景進行保存時能夠發現：當用JPG進行保存時（直接背景另存爲）文件大小僅36.3K；而用PNG8 256色無仿色去保存時大小增長到57.7K，不只如此因爲顏色的缺失在圖像上還出現了一些帶鋸齒的色塊；爲了下降這些色塊對圖像質量的影響咱們對PNG8增長了擴散仿色的效果，此時文件大小達到了156.3K；而當採用PNG24徹底不失真的保存時文件大小是231.9K。

儘管這幅背景圖也是經過photoshop製做，但咱們能夠發現因爲在圖像上採用了不少的真實素材（好比白雲、螞蟻、綠葉等），而這些真實素材和攝影圖像同樣也會存在很是豐富的色彩層次，因此也不適合用PNG格式進行保存。這個時候咱們就應該採用JPG格式。

由此咱們能夠得出結論：對於寫實的攝影圖像或是顏色層次很是豐富的圖像採用JPG的圖片格式保存通常能達到最佳的壓縮效果。

根據經驗咱們在頁面中使用的商品圖片、採用人像或者實物素材製做的廣告Banner等圖像更適合採用JPG的圖片格式保存。

總結

因而可知在存儲圖像時採用JPG仍是PNG主要依據圖像上的色彩層次和顏色數量進行選擇。通常層次豐富顏色較多的圖像採用JPG存儲，而顏色簡單對比強烈的則須要採用PNG。但也會有一些特殊狀況，例若有些圖像儘管色彩層次豐富，但因爲圖片尺寸較小，上面包含的顏色數量有限時，也能夠嘗試用PNG進行存儲。而有些矢量工具繪製的圖像因爲採用較多的濾鏡特效也會造成豐富的色彩層次，這個時候就須要採用JPG進行存儲了。

另外還有一個原則就是用於頁面結構的基本視覺元素，如容器的背景、按鈕、導航的背景等應該儘可能用PNG格式進行存儲，這樣才能更好的保證設計品質。而其餘一些內容元素，如廣告Banner、商品圖片等對質量要求不是特別苛刻的，則能夠用JPG去進行存儲從而下降文件大小。

三、思考與實踐

什麼樣的設計更適合web頁面？

慎用較「重」的視覺設計元素

Web2.0時代網頁設計的一大趨勢就是愈來愈「輕」。除了對那些高光和圓角效果的審美疲勞以外，設計師們也開始意識到好的設計應該是內容與形式的完美結合，而非形式的堆砌。因此設計師在應用那些較「重」的視覺效果時，必定要想清楚這樣作的目的和意義，以及是否與產品的特色和受衆的氣質相契合。

「輕量「設計一個比較典型的例子就是國內某知名網站，幾乎沒有採用任何須要圖片的視覺元素，而是經過簡單的CSS樣式去實現，這樣不只可以突出內容，更能提高頁面的訪問速度。因此我十分強烈的建議視覺設計師也掌握必定的html和css知識（尤爲是CSS3實現了不少過去須要圖片才能實現的效果，例如圓角和漸變），這樣在作設計的時候可以全面的去考慮產品效果。

下面這個電子商務網站則採用過多無心義的視覺元素堆砌，不只沒有實現很好的設計效果，反而因爲須要太多的圖片元素而影響了頁面的性能。

若是因爲產品須要在設計中不得不使用較」重「的視覺元素，咱們也能夠根據圖片格式的特色選擇適當的表現形式以達到更好的效果。

例如在下面這個例子中，第一個Banner應用了更適合PNG格式的設計風格（較多純色和簡單漸變的應用）不只能達到熱烈、突出的視覺效果，在保證圖片質量的同時也更好的壓縮了文件大小；而第二個Banner因爲應用了過於複雜的漸變色和強烈對比，而且在局部區域採用太多的高光和陰影效果，致使圖片的色彩層次過多，不論採用PNG仍是JPG格式保存都沒法實現圖像質量和文件大小的最優化。

固然舉這個例子並非要設計師在作設計的時候過度考慮頁面性能問題，而是要清楚不一樣設計形式的效果和實現成本，在設計過程當中多問本身爲何要這樣作？

內容和形式的分離

對於一些比較強調視覺效果的特殊產品，好比活動推廣頁面或Mini Site。咱們也能夠利用圖片格式和一些前端知識對設計進行優化，比較經常使用的一種設計方法就是內容和形式的分離。

以下面一些國外比較流行的設計風格，以及前面提到的微博網站，都是經過大幅的背景圖去進行意境的傳達和睦氛的渲染。這樣作的一個好處就是能把須要用到圖片的視覺元素進行集中的壓縮優化，同時又不會因爲加載太慢而影響用戶的訪問速度（前端實現時通常會用相近的背景色先進行填充，而後在逐步顯示背景圖）。

我的認爲好的視覺設計最重要是意境傳達和睦氛渲染，使用高光、陰影等濾鏡效果的目的也僅僅是爲了達到質感上的統一從而更好的去傳達意境和渲染氣氛，因此切忌爲了質感而質感。即使是爲了體現設計品質也不必定非要使用炫麗的濾鏡，相較而言優美的佈局和精巧的結構纔是體現品質的關鍵！

經過較小的視覺犧牲換取較大的性能提高

有時候爲了提高頁面的加載速度達到更好的用戶體驗，不得不對設計進行優化。這個時候利用咱們對圖片格式知識掌握就能夠更有目的性的去進行優化。

例以下圖是淘寶「雙十一」大促活動的一個頁頭設計，因爲頁面訪問量很是大而且要使用較多的商品圖片，不得不對頁頭設計進行優化以提高性能。這個時候咱們就能夠去掉一些不過重要的高光、漸變和陰影效果，從而大大下降文件大小。

咱們還能夠作些什麼？

Sprite圖片二次優化

因爲目前國內不少互聯網公司沒有頁面重構師這一職位，因此頁面切圖和靜態代碼實現基本都是前端工程師去完成。爲提升頁面性能目前廣泛採用的實現方式是將與頁面結構相關的須要用到圖片的視覺元素集中在一個PNG圖片上，而後經過CSS樣式將其應用到頁面中，咱們稱這個圖片爲Sprite圖片。因爲這個圖片上常常要集中較多的視覺元素，在用PNG格式存儲時不免會產生失真而影響圖片質量。這個時候就須要視覺設計師幫助前端開發工程師對Sprite圖片進行優化，這樣作的好處是不只能提高圖片質量，還能達到減少文件大小的效果，可謂一箭雙鵰。

下圖是一個優化前的Sprite圖片，因爲視覺元素過多PNG8沒法真實保存全部的顏色信息，因而便會產生顏色的缺失和雜色的產生（如局部放大圖所示）。

在前端工程師完成頁面的靜態代碼以後，視覺設計師能夠將定位好的Sprite圖片進行像素級的優化，去掉沒必要要的雜色，而且用已存在的索引色對缺失的地方進行補充，這樣不只能壓縮文件大小，還能提高設計品質。

Sprite圖片的優化方式有不少種，好比經過索引色排序進行顏色的刪減和替換，或是直接經過像素描繪進行優化。設計師能夠根據具體的場景進行選擇和處理。

以上設計和優化的方法只是我在工做中一些經驗的積累和總結，我的感受每個點展開來都有不少值得研究和討論的地方，限於篇幅有限不能繼續深刻。關於圖片優化的高級技巧有兩篇比較經典的文章推薦給你們：Clever PNG Optimization Techniques、Clever JPEG Optimization Techniques。

四、附錄-Photoshop中各類參數的含義及設置技巧

PNG8的參數設置

減低顏色深度算法與顏色

指定用於生成顏色查找表的方法，以及想要在顏色查找表中使用的顏色數量。能夠選擇如下減低顏色深度算法之一：

1. 一、可感知：經過爲人眼比較靈敏的顏色賦以優先權來建立自定顏色表。
2. 二、可選擇：建立一個顏色表，此表與」可感知」顏色表相似，但對大範圍的顏色區域和保留 Web 顏色有利。此顏色表一般會生成具備最大顏色完整性的圖像。「可選擇」是默認選項。
3. 三、隨樣性：經過從圖像的主要色譜中提取色樣來建立自定顏色表。例如，只包含綠色和藍色的圖像產生主要由綠色和藍色構成的顏色表。大多數圖像的顏色集中在色譜的特定區域。
4. 四、受限 (Web)：使用 Windows 和 Mac OS 8 位（256 色）調板通用的標準 216 色顏色表。該選項確保當使用 8 位顏色顯示圖像時，不會對顏色應用瀏覽器仿色。（該調板也稱爲 Web 安全調板。） 使用 Web 調板可能會建立較大的文件，所以，只有當避免瀏覽器仿色是優先考慮的因素時，才建議使用該選項。
5. 五、自定：使用用戶建立或修改的調色板。若是打開現有的 GIF 或 PNG-8 文件，它將具備自定調色板。使用」存儲爲 Web 和設備所用格式」對話框中的」顏色表」調板可自定顏色查找表。
6. 六、黑白、灰度、Mac OS、Windows使用一組調色板。

建議：通常狀況下默認選擇「可選擇」項便可。

仿色方法和仿色

肯定應用程序仿色的方法和數量。」仿色」是指模擬計算機的顏色顯示系統中未提供的顏色的方法。

較高的仿色百分比使圖像中出現更多的顏色和更多的細節，但同時也會增大文件大小。爲了得到最佳壓縮比，請使用可提供所需顏色細節的最低百分比的仿色。

若圖像所包含的顏色主要是純色，則在不該用仿色時一般也能正常顯示。包含連續色調（尤爲是顏色漸變）的圖像，可能須要仿色以防止出現顏色條帶現象。

能夠選擇如下幾種仿色方法之一：

1. 一、擴散：應用與」圖案」仿色相比一般不太明顯的隨機圖案。仿色效果在相鄰像素間擴散。
2. 二、圖案：使用相似半調的方形圖案模擬顏色表中沒有的任何顏色。
3. 三、雜色：應用與」擴散」仿色方法類似的隨機圖案，但不在相鄰像素間擴散圖案。使用」雜色」仿色方法時不會出現接縫。

建議：通常只在圖片顏色過多產生失真的狀況下才須要選擇仿色。建議選擇擴散仿色，能夠適當調節仿色的百分比以達到最佳的效果。仿色度越高文件大小也越大。

透明度和雜邊

肯定如何優化圖像中的透明像素。

1. 一、要使徹底透明的像素透明並將部分透明的像素與一種顏色相混合，請選擇」透明度」，而後選擇一種雜邊顏色。
2. 二、要使用一種顏色填充徹底透明的像素並將部分透明的像素與同一種顏色相混合，請選擇一種雜邊顏色，而後取消選擇」透明度」。
3. 三、要選擇雜邊顏色，請單擊」雜邊」色板，而後在拾色器中選擇一種顏色。或者，也能夠從」雜邊」菜單中選擇一個選項：」吸管」（使用吸管樣本框中的顏色）、」前景色」、」背景色」、」白色」、」黑色」或」其它」（使用拾色器）。

建議：強烈建議由視覺設計師根據實際應用場景在保存以前就處理好透明圖像的背景。

交錯

PNG、GIF這兩種圖像格式都提供了一種功能，讓圖像可以更快地顯示。圖像能夠以一種特殊方式存儲，顯示時先大概顯示圖像的草圖，當文件所有下載後再填充細節。這起到一種頗有意義的心理效果，由於這樣令人們有東西可看，而沒必要坐着乾等大型圖像慢慢顯示在屏幕上。

建議：對於尺寸和文件大小相對較大的圖片建議勾選此項。

JPG的參數設置

品質

從」品質級別」菜單中選取一個選項，或者在」品質」文本框中指定一個值。」品質」設置越高，壓縮算法保留的細節越多。可是，使用高」品質」設置比使用低」品質」設置生成的文件大。查看幾種品質設置下的優化圖像，肯定品質和文件大小之間的最佳平衡點。

品質設置技巧

1. 一、不要存100%品質的JPG格式圖片。由於100%並不必定是最高的品質，而是一個優化算法的極限值，因此會增長沒必要要的文件大小。建議存儲95%品質的圖片就能夠最大限度的下降失真。
2. 二、謹慎使用50%品質如下的壓縮率。使用50%如下品質存儲時會採用額外的壓縮算法而致使圖片失真更嚴重，尤爲是對於有高對比度的圖片。

優化

選擇」優化」建立文件大小稍小的加強型 JPEG。建議使用」優化 JPEG」格式以得到最大文件壓縮量；可是，一些較舊的瀏覽器不支持此特性。

建議：建議勾選此項，目前基本已經不存在不支持改功能的瀏覽器。

連續

選擇」連續」建立在 Web 瀏覽器中連續顯示的圖像。圖像將顯示爲一系列的疊加，使查看者在整個圖像下載完畢以前，可以看到圖像的低分辨率版本。連續 JPEG 須要更多的內存用於查看，一些瀏覽器不支持該選項。

建議：勾選此項在某些狀況下可壓縮文件大小（圖片大小大於10k時），某些狀況下會增大文件大小，建議在保存是根據實際狀況決定。不過IE6及更早版本的IE瀏覽器不支持JPG連續顯示，而是在圖片徹底加載後一次成像，用戶體驗上可能還不如不使用連續的逐步成像要好，因此建議慎選此項。

模糊

指定應用於圖像的模糊量。」模糊」選項應用與」高斯模糊」濾鏡相同的效果，並容許進一步壓縮文件以得到更小的文件大小。建議使用 0.1 到 0.5 之間的設置。

ICC 配置文件

選擇」ICC 配置文件」將圖片的 ICC 配置文件與文件保留在一塊兒。ICC 配置文件由某些瀏覽器用於色彩校訂。（請參閱Photoshop中設置色彩管理。）

雜邊

指定原稿圖像中透明像素的填充色：點按」雜邊」色板，而後在拾色器中選擇一種顏色。從」雜邊」菜單中選取選項。原稿圖像中徹底透明的像素由選中的顏色填充，原稿圖像中部分透明的像素與選中的顏色相混合。