疑慮：
圖檔存儲為web格式，該用什麼格式儲存呢？png？jpg？壓縮比例該為多大？css spript的優劣？有時候我們可能會因為一張格式不正确的圖檔而導緻設計品質的下降以及頁面性能的降低。了解圖檔格式的特性就是為解答這些困惑進而讓我們設計的産品更好、更快。
文章轉載自淘寶UED,原文位址：http://ued.taobao.com/blog/2010/12/jpg_png/ 作者：平四
===================================================================================
作者原文：
第一次寫技術部落格，有不盡如人意的地方，還請見諒和指正。
為什麼想整理這方面的類容，我覺得就像油畫家要了解他的顔料和畫布、雕塑家要了解他的石材一樣，作為網頁設計師也應該對圖檔格式的特性有一定了解，這樣才能更好的表達你的創意和想法。
除此之外，我們在平時工作中也會遇到許多與圖檔格式相關的問題。比如設計師會奇怪為什麼有些頁面的産出物總是沒法達到設計稿那樣的品質和效果，什麼樣的設計才更适合Web頁面；頁面重構師和前端工程師則想知道在切圖的時候應采用什麼圖檔格式、如何進行參數設定才能達到品質和性能的最優化。
有時候我們可能會因為一張格式不正确的圖檔而導緻設計品質的下降以及頁面性能的降低。了解圖檔格式的特性就是為解答這些困惑進而讓我們設計的産品更好、更快。
本文主要包括以下幾方面内容：
- 1、基本概念
- 矢量圖與位圖
- 有損壓縮與無損壓縮
- 2、實際應用
- 什麼時候應該使用PNG
- 什麼時候應該使用JPG
- 總結
- 3、思考與實踐4、附錄-Photoshop中各種參數的含義及設定技巧
- 什麼樣的設計更适合Web頁面？
- 我們還可以做些什麼？
1、基本概念
要了解圖檔格式的特性，首先得從一些基本概念開始。這部分内容讀起來可能會比較枯燥，但如果你耐着性子讀完它，相信會獲益匪淺。
矢量圖與位圖
矢量圖-完美的幾何圖形
矢量圖是通過組成圖形的一些基本元素，如點、線、面，邊框，填充色等資訊通過計算的方式來顯示圖形的。就好比我們在幾何學裡面描述一個圓可以通過它的圓心位置和半徑來描述，當然還可以通過邊框的粗細、顔色以及填充的顔色等資料去描述它的樣式。而電腦在顯示的時候則通過這些資料去繪制出我們定義的圖像。
矢量圖的優點在于檔案相對較小，并且放大縮小不會失真。缺點則是這些完美的幾何圖形很難表現自然度高的寫實圖像。
需要強調說明的是我們在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透明 |
可能通過以上特性的對比大家還不能很直覺的了解在實際應用中到底因該選擇什麼格式的圖檔檔案，我們不妨結合上面的基本概念通過幾個例子去給大家說明。
2、實際應用
什麼時候應該使用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去進行存儲進而降低檔案大小。
3、思考與實踐
什麼樣的設計更适合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。
4、附錄-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中設定色彩管理。）
雜邊
指定原稿圖像中透明像素的填充色：點按”雜邊”色闆，然後在拾色器中選擇一種顔色。從”雜邊”菜單中選取選項。原稿圖像中完全透明的像素由選中的顔色填充，原稿圖像中部分透明的像素與選中的顔色相混合。