Q1:在製作操作說明之網頁上如何選擇適當圖檔格式顯示螢幕畫面?

鄭子璉(微軟MVP)

A1

  在網頁上使用圖片時,過去多半都只選用GIF或JPG兩種圖檔格式,在大部分的情況下,使用PNG圖檔格式會使檔案大小更小,並且更美觀。

  在說明之前,先舉一個小範例,例如製作一個Excel操作範例畫面,請開啟Excel 2003後,按下鍵盤上[Print Screen],在Windows XP/2003下,開啟小畫家,點選選單[編輯][貼上],並把畫面另存為screen.bmp,如此即可順利將螢幕操作畫面保存下來。接下來開始比較三種圖檔格式,為了確保不受其他圖檔格式干擾,請每次都先開啟screen.bmp後,分別存成GIF、JPG及PNG圖檔格式,為了便於比較,僅下表僅列出三種圖檔格式左上角寬×長為100×200 pixel的部分:

圖檔格式GIFJPGPNG
檔案大小165,232 bytes121,419 bytes94,876 bytes
圖檔內容
特性說明 適用於美工插畫、線條稿,標誌符號等這種有大塊相同顏色的圖案。
圖檔格式有版權問題,目前學術使用可免付版權費,支援動畫效果,為無失真壓縮,有2、4、16、256色限制,超過256色需進行減色運算將總顏色降至256色。
適用於全彩、漸層或色彩連續變換之圖案,如相片。
圖檔格式無版權問題,為破壞性壓縮,壓縮比越大,檔案越小,但圖形失真情況越嚴重,若背景或填色大量採用照片或圖樣貼圖時,則以本格式較為合適。
適用於美工插畫、線條稿,標誌符號等這種有大塊相同顏色的圖案。
圖檔格式無版權問題,為無失真壓縮,無顏色數限制,並支援256階的透明效果,舊版本軟體多數不支援,要新版本軟體才支援。
註:檔案大小可能會因螢幕字型、螢幕尺寸、螢幕顏色數而略有不同

  首先,先比較檔案大小,由上表明顯得知,PNG圖檔格式所佔位元組最小,在網際網路上,可以較少的位元組傳遞圖形,可減少瀏覽網頁或電子郵件所需等待時間,若需插入Office文件,亦可降低文件之檔案大小,為三種通用圖檔格式中檔案最小格式。其次比較圖形時,發現GIF圖有網點般的雜點存在,JPG圖形在字型、線條或框線等,可看出明顯的破裂或是暈開的情形,但是前述兩圖檔格式的缺點並不會出現在PNG圖檔格式中,為三種通用圖檔格式中最美觀格式。

  綜合上述圖檔大小及美觀的前提下,PNG圖檔格式在網頁應用或是其他延伸應用中是較佳的格式,此外,亦適用於其他形式的圖檔散佈,如崁入於Office文件、電子郵件或提供印製單位的海報圖檔等,均可參考採用本篇所談及格式,在下列兩種除外情況下,建議平時以PNG圖檔格式為主。

  除外情況:

1. 須製作動畫GIF圖檔

  若有特殊需求必須製作動畫GIF格式時,由於PNG圖檔並不支援動畫,所以仍須以GIF格式製作,若要提昇圖片美觀程度,建議可先將Windows系統由全彩降為256色後操作,大部分軟體在進行減色運算將全彩降為256色時,會類似本例有網點參雜圖上,先將系統降為256色時,則不需進行減色運算,而系統在繪製畫面時,會自動進位到最接近顏色,故畫面不會出現雜點,且因無雜點,利於壓縮計算,相同畫面可以得到較小且較美觀的圖檔。

2. 以照片或複雜漸層色為主

  由於PNG屬非破壞性壓縮,以照片或複雜漸層色為主之圖檔經PNG壓縮後仍十分龐大,這時檔案大小與不易察覺的破損情形在取捨時,多數仍以檔案大小為優先,所以仍採用JPG圖檔格式。


註:引用時請載明出處。
鄭子璉,「華陀問診 在製作操作說明之網頁上如何選擇適當圖檔格式顯示螢幕畫面」,RUN!PC,第 128 期,台北,第 40 - 42 頁,民國 93 年 9 月。