請使用本主題,了解匯出影像和 GIF 動畫的各種選項。

網頁圖像格式

網頁圖像格式可以是點陣圖 (點陣) 或向量格式。點陣圖格式 (GIF、JPEG 和 PNG) 與解析度有關,也就是說,點陣圖影像的尺寸以及影像品質將會隨著不同的顯示器解析度而改變。向量格式 (SVG 和 SWF) 與解析度無關,因此可以放大及縮小,而不會對影像品質造成任何影響。向量格式也可以包含點陣資料。 

JPEG 最佳化選項

JPEG 是壓縮相片之類的連續色調影像的標準格式。將影像最佳化為 JPEG 格式需仰賴失真壓縮,這種方式會選擇性地放棄資料。

web_optimization
最佳化設定 A.「檔案格式」選單 B.「壓縮品質」選單 C.「最佳化」選單

品質

決定壓縮的層級。「品質」設定越高,壓縮規則保留的細節就越多,不過,使用高「品質」設定所產生的檔案大小,會比使用低「品質」設定大。請用多種品質設定檢視最佳化的影像,判斷哪種設定可以達到品質和檔案大小的最佳平衡點。

最佳化

使用稍微小一點的檔案大小,建立增強的 JPEG。最大檔案壓縮時建議使用「最佳化 JPEG」格式;但是,某些舊版的瀏覽器並不支援這項功能。

漸進式

在網頁瀏覽器中以漸進的方式顯示影像。影像會逐次顯示解析度由低到高的影像,讓檢視者可以在影像完全下載之前,先看到影像的低解析度版本。「漸進式」選項需要使用「最佳化 JPEG」格式。

註解:

「漸進式 JPEG」在檢視時需要較多的記憶體 (RAM),有些瀏覽器並不支援這項功能。

模糊

指定要套用至影像的模糊程度。這個選項會套用與「高斯模糊」濾鏡相同的效果,而且可以增大檔案的壓縮程度,因而產生較小的檔案。所以建議使用的數值是 0.1 到 0.5。

嵌入色彩描述檔 (Photoshop) 或 ICC 描述檔 (Illustrator)

於最佳化檔案中保留色彩描述檔。某些瀏覽器會使用色彩描述檔來執行色彩校正。

邊緣調合

指定要以何種色彩為之前在原始影像中為透明的像素填色。按一下「邊緣調合」色票以選取檢色器中的顏色,或是從「邊緣調合」選單中選取選項:「滴管顏色」(使用滴管樣本方框中的顏色)、「前景顏色」、「背景顏色」、「白色」、「黑色」或「其他」(使用檢色器)。

原始影像中完全透明的像素會填入選定的顏色,而原始影像中部分透明的像素則漸變為選定的顏色。

GIF 和 PNG-8 最佳化選項

GIF 是在壓縮具有單純色彩和清晰細節的影像 (如線條圖、標誌或具有文字的圖例) 時,使用的標準格式。類似於 GIF 格式,PNG-8 格式有效率的壓縮色彩的純色區域,並保留清晰的細節。

PNG-8 和 GIF 檔案支援 8 位元色彩,所以它們最多可以顯示 256 色。決定使用哪一個顏色的程序稱為索引,所以 GIF 和 PNG-8 格式的影像有時也稱之為索引色影像。將影像轉換為索引色時,會建立色彩查詢表以儲存並索引影像中的色彩。如果原始影像中的顏色沒有出現在色彩查閱表中,應用程式會選擇查詢表中最接近的顏色,或是使用可使用的顏色組合,模擬此顏色。

除了下列選項以外,您也可以調整影像之色彩表中的顏色數量。請參閱自訂 GIF 和 PNG-8 影像的色彩表

GIF_preset
GIF 選項

失真 (僅適用於 GIF)

選擇性地放棄資料,壓縮檔案大小。越高的「失真」設定值會導致放棄越多資料。您通常可套用 5-10 的「失真」值,有時甚至可以高達 50,而不會降低影像品質。「失真」選項可減少 5% 到 40% 的檔案大小。

註解:

您在使用「失真」選項時,不能同時用「交錯式」選項、「雜色」或「圖樣混色」演算法。

色彩減少規則和顏色

指定產生色彩查詢表的方法,以及要存在於色彩查詢表中的顏色數量。您可以選取下列其中一個色彩減少規則︰

感應式 以人眼較能感應的顏色為優先,建立自訂的色彩表。

選擇性 建立與「感應式」色彩表類似的色彩表,但較偏向大範圍的顏色,並會保留網頁色彩。這種色彩表所產生的影像,通常都具有最高的顏色完整性。「選擇性」是預設選項。

最適化 從影像中的主要顏色光譜中取樣,建立自訂的色彩表。例如,只由綠色和藍色構成的影像,會製造出主要由綠色和藍色組成的色彩表。大多數的影像都會將顏色集中在光譜的特定區域。

限制性 (網頁) 使用常用於 Windows 的標準 216 色色彩表,和 Mac OS 的 8 位元 (256 色) 色盤。這個選項可以確保當影像使用 8 位元色彩顯示時,不會有瀏覽器混色套用至色彩中 (這個色盤通常也稱為網頁安全色盤)。使用網頁色盤會產生比較大的檔案,所以建議您只在避免瀏覽器混色重要性極高的時候,才使用這種方式。

自訂 使用使用者建立或修改過的色盤。如果開啟已存在的 GIF 或 PNG-8 檔案,則會有自訂的色盤。

註解:

使用「儲存為網頁及裝置用」對話方塊中的「色彩表」浮動視窗,自訂色彩查閱表。

黑白、灰階、Mac OS、Windows 使用一組色盤的顏色。

混色方法和混色

決定應用程式混色的方法和數量。混色是指模擬電腦色彩顯示系統中所沒有的顏色的方法。較高的混色百分比會在影像中建立顏色較多和細節較多的外觀,但是也會增加檔案大小。如果要進行最佳化壓縮,請使用能提供您所需色彩細部的最低混色百分比。如果影像主要是由純色構成,無混色的效果可能會比較好。具有連續色調顏色的影像 (特別是顏色漸層) 可能需要混色,才能避免顏色出現條紋狀。

swb_gif_dither
0% 混色 (左圖) 和 100% 混色 (右圖) 的 GIF 影像

您可以選取下列其中一個混色方法:

擴散 套用隨機的圖樣,通常會比「圖樣」混色不明顯。混色效果會擴散到相鄰的像素。

圖樣 套用類似半色調的方形圖樣,以模擬不在色彩表中的任何顏色。

雜色 套用與「擴散」混色方法類似的隨機圖樣,但是不會將圖樣擴散到相鄰的像素上。使用「雜色」混色時不會出現接縫。

透明度和邊緣調合

決定如何最佳化影像中的透明像素。

  • 若要使完全透明的像素呈現透明,並將部分透明的像素與某種顏色混合,請選取「透明」並選取一種邊緣調合顏色。

  • 若要將完全透明的像素填滿某種顏色,並將部分透明的像素與相同顏色混合,請選取一種邊緣調合顏色並取消選取「透明」。

  • 若要選取邊緣調合顏色,請按一下「邊緣調合」色票,並在檢色器中選取顏色;或者,從「邊緣調合」選單中選取選項:「滴管顏色」(使用滴管樣本方框中的顏色)、「前景顏色」、「背景顏色」、「白色」、「黑色」或「其他」(使用檢色器)。

註解:

「前景顏色」和「背景顏色」選項僅可在 Photoshop 中使用。

swb_transparency_matte
透明和修邊的範例

A. 原始影像 B. 選取邊緣調合顏色的透明度 C. 選取無邊緣調合的透明度 D. 取消選取邊緣調合顏色的透明度

透明混色

如果選取「透明度」選項,可以為部分透明的像素選擇一種混色的方法:

  • 「無透明混色」不會對影像中部分透明的像素套用任何混色。

  • 「擴散透明混色」會套用隨機的圖樣,通常不會比「圖樣」混色明顯。混色效果會擴散到相鄰的像素。如果選取這個運算規則,請指定「混色」百分比,以控制套用到影像中的混色量。

  • 「圖樣透明混色」會對部分透明的像素套用網屏般的方形圖樣。

  • 「雜色透明混色」會套用與「擴散」運算規則類似的隨機圖樣,但是不會將圖樣擴散到相鄰的像素上。使用「雜色」運算規則不會造成任何接縫。

swb_pattern_dither
圖樣範例,分別為「透明混色」(左圖) 以及套用到網頁背景後 (右圖) 的樣子。

交錯

在瀏覽器中顯示低解析度版本的影像,同時仍下載完整的影像。「交錯式」可讓影像下載的時間看起來比較短,而且讓檢視者知道影像確實正在下載。但「交錯式」也會讓影像檔案稍大一些。

網頁靠齊

指定將顏色調移成網頁色盤上最接近的顏色時的容許度等級 (並防止瀏覽器中的顏色發生混色)。較高的數值調移的顏色會較多。

最佳化 GIF 和 PNG 影像中的透明度

透明度使得網頁能夠建立非矩形影像。背景透明保留影像中的透明像素。

如此可允許網頁圖形的背景,以顯示影像的透明區域。背景邊緣調合透過填色或漸變透明像素及可與網頁背景相符的邊緣調合色,模擬透明度。如果網頁背景是純色,而且您知道所用顏色時,背景邊緣調合的效果最好。

請使用「儲存為網頁及裝置用」對話方塊中的「透明度」和「邊緣調合」選項,指定如何最佳化 GIF 和 PNG 影像中的透明像素。

  • (GIF 和 PNG-8) 若要使完全透明的像素呈現透明,並將部分透明的像素與某種顏色混合,請選取「透明」並選取一種邊緣調合顏色。
  • 若要將完全透明的像素填滿某種顏色,並將部分透明的像素與相同顏色混合,請選取一種邊緣調合顏色並取消選取「透明」。
  • (GIF 和 PNG-8) 若要使所有透明度在 50% 以上的像素完全透明、所有透明度在 50% 或以下的像素完全不透明,請選取「透明」,然後從「邊緣調合」選單中選取「無」。
  • (PNG-24) 若要儲存具有多重透明度的影像 (最多可有 256 種透明層次),請選取「透明」。由於具有多重透明度的影像可以與任何背景色混合,因此會停用「邊緣調合」選項。

註解:

在不支援 PNG-24 透明度的瀏覽器中,可能會將透明像素顯示在預設的背景色上,例如灰色。

若要選取邊緣調合顏色,請按一下「邊緣調合」色票,並在檢色器中選取顏色;或者,從「邊緣調合」選單中選取選項:「滴管顏色」(使用滴管樣本方框中的顏色)、「前景顏色」、「背景顏色」、「白色」、「黑色」或「其他」(使用檢色器)。

註解:

「前景顏色」和「背景顏色」選項僅可在 Photoshop 中使用。

檢視最佳化切片的色彩表

切片的色彩表會顯示在「儲存為網頁及裝置用」對話方塊的「色彩表」面板中。

請選取以 GIF 或 PNG-8 格式進行最佳化的切片。所選取切片的色彩表便會顯示在「儲存為網頁及裝置用」的色彩表中。

如果影像有多重的切片,則切片之間的色彩表顏色可能會有變化 (可以先將切片連結在一起以避免這種情況發生)。如果您選取的多重切片使用不同的色彩表,那麼色彩表會是空白的,而且它的狀態列會顯示「混合式」的訊息。

自訂 GIF 和 PNG-8 影像的色彩表

您可以使用「儲存為網頁及裝置用」對話方塊中的色彩表,自訂最佳化 GIF 和 PNG-8 影像中的顏色。減少顏色數量通常可保持影像品質,同時減少影像的檔案大小。

您可以在色彩表中增加或刪除顏色、將選取的顏色調移成網頁安全色彩,以及鎖定選取的顏色以避免這些顏色從色盤中消失。

排序色彩表

從「色彩表」浮動視窗選單選擇排序順序:

  • 「未排序」會恢復原始的排序順序。
  • 「依色相排序」是依標準色輪上的顏色位置 (以 0 到 360 間的度數表示) 排序。中性色的色相指定為 0,位置以紅色標明。
  • 「依明度排序」是依顏色的明度或亮度排序。
  • 「依接受度排序」是依色彩在影像中的出現頻率排序。

在色彩表中加入新顏色

您可以新增在建立色彩表時所遺漏的顏色。在動態的色彩表中增加顏色,會將色盤中的顏色調移為最接近新顏色。在固定的或「自訂」的色彩表中新增顏色,會在色盤中加入額外的顏色。

  1. 如果目前在色彩表中已選取了任何顏色,請選擇「色彩表」浮動視窗選單中的「取消選取全部顏色」。

  2. 請執行下列任一項動作來選擇一個顏色:

    • 按一下「儲存為網頁及裝置用」對話方塊中的「滴管顏色」方框,並從檢色器中選擇顏色。

    • 在「儲存為網頁及裝置用」對話方塊中選取「檢色滴管」工具,並按一下影像。

  3. 請執行下列其中一項:

    • 在色彩表中,按一下「新增顏色」選項。

    • 選取「色彩表」浮動視窗選單中的「新增顏色」。

    • 若要從色彩表切換到「自訂」色盤,請在增加新顏色時,按住 Ctrl 鍵 (Windows) 或 Command 鍵 (Mac OS)。

      增加的顏色會顯示在色彩表右下角的小白色方形中,代表該顏色已經鎖定 如果色彩表是動態的,原始的顏色會顯示在左上角,新的顏色會顯示在右下角。

選取色彩表中的顏色

在「色彩表」中所選取的顏色周圍出現白色邊框。

  • 若要選取顏色,請按一下「色彩表」中的顏色。
  • 若要在色彩表中選取多個顏色,按住 Shift 鍵並按一下其他的顏色。所有在第一個和第二個選取顏色間的顏色都會被選取。若要選取不連續的顏色群組,請按住 Ctrl 鍵 (Windows) 或 Command 鍵 (Mac OS) 並按一下您想要選取的每一個顏色。「色彩表」浮動視窗選單亦提供選取顏色的命令。
  • 若要選取預覽影像中的顏色,請使用「儲存為網頁及裝置用」中的「滴管」工具按一下預覽影像。按 Shift 鍵加滑鼠按鍵,即可選取其他顏色。
  • 若要取消選取全部顏色,請從「色彩表」浮動視窗選單中選擇「取消選取全部顏色」。

調移顏色

您可以將色彩表中選取的顏色,變更為其他的 RGB 顏色數值。在重新產生最佳化影像時,選取的顏色會更改為它在影像中所顯示的任何新顏色。

  1. 請在色彩表中按兩下,顯示預設的檢色器。

  2. 請選取顏色。

    原始的顏色會顯示在色票的左上角,新的顏色會顯示在右下角。色票右下角的小型方形代表該顏色已被鎖定。如果調移成網頁安全色彩,色票的中央會出現小的白色菱形。

  3. 若要將調移的顏色回復為原始顏色,請執行下列其中一個動作:

    • 按兩下調移顏色的色票。檢色器中會選取原始的顏色。按一下「確定」即可復原顏色。

    • 若要回復色彩表中的所有調移顏色 (包括網頁調移顏色),請從「色彩表」浮動視窗選單選擇「解除全部色彩調移」。

將顏色調移成最接近的網頁色盤相等色

若要保護顏色,使其在瀏覽器中不會被混色,您可以將其調移成網頁色盤中最接近的顏色。這可以確保在只能顯示 256 色的 Windows 或 Macintosh 作業系統上,顯示在瀏覽器中的色彩不會混色。

  1. 請在最佳化的影像或色彩表中選取一個或多個顏色。

  2. 請執行下列其中一項:

    • 在「色彩表」浮動視窗中,按一下「網頁調移」按鈕。

    • 從「色彩表」浮動視窗選單中,選擇「調移/解除調移選取的顏色到/從網頁調色盤」。原來的顏色會顯示在色票的左上角,新的顏色則會顯示在右下角。色票中央的小型白色菱形 代表該顏色為網頁安全色;色票右下角的小型方形則代表該顏色已被鎖定。

  3. 若要設定調移的容許度,請輸入「網頁靠齊」值。較高的數值調移的顏色會較多。

  4. 若要回復網頁調移顏色,請執行下列其中一個動作:

    • 選取色彩表中的網頁調移顏色,然後按一下「色彩表」浮動視窗中的「網頁調移」按鈕。

    • 若要回復色彩表中的所有網頁調移顏色,請從「色彩表」浮動視窗選單中選取「解除全部色彩調移」。

將顏色對應到透明

您可以將現有的顏色對應到透明,即可在最佳化的影像中加入透明度。

  1. 請在最佳化的影像或色彩表中選取一個或多個顏色。

  2. 請執行下列其中一項:

    • 在「色彩表」浮動視窗中,按一下「對應透明度」按鈕

    • 從「色彩表」浮動視窗選單中,選擇「對應/解除對應選取的顏色到/從透明」。

      每一個對應的顏色中有一半會顯示透明格點 。色票右下角的小型方形代表該顏色已被鎖定。

  3. 若要將透明回復為原始的顏色,請執行下列其中一個動作:

    • 選取要回復的顏色,然後按一下「對應透明」按鈕 ,或是從「色彩表」浮動視窗選單中選擇「對應/解除對應選取的顏色到/從透明」。

    • 若要回復所有對應透明度的顏色,請選擇「解除對應全部透明色」。

鎖定或解除鎖定顏色

您可以鎖定色彩表中選取的顏色,以避免這些顏色在減少顏色數目時被刪除,並可以避免它們在應用程式中進行混色。

註解:

鎖定顏色並不能避免顏色在瀏覽器中進行混色。

  1. 請在色彩表中選取一個或多個顏色。

  2. 請進行下列任一項動作以鎖定顏色︰

    • 按一下「鎖定」按鈕

    • 從「色彩表」浮動視窗選單中選擇「鎖定/解除鎖定選取的顏色」。

    每一個鎖定顏色的右下角都會出現白色的方形

  3. 請進行下列任一項動作以解除鎖定顏色︰

    • 按一下「鎖定」按鈕

    • 從「色彩表」浮動視窗選單中選擇「鎖定/解除鎖定選取的顏色」。

    色票中的白色方形會消失。

刪除選取的顏色

您可以從色彩表中刪除選取的顏色,減少影像的檔案大小。在顏色刪除後,先前包含該顏色的最佳化影像區域,會用色盤中剩下的最接近顏色重新演算。

刪除顏色後,色彩表會自動更改為「自訂」色盤。這是因為當您重新最佳化影像時,「最適化」、「感應式」和「選擇性」色盤會自動地將刪除的顏色加回色盤中,而「自訂」色盤不會在重新最佳化影像時有所更改。

  1. 請在色彩表中選取一個或多個顏色。

  2. 請執行下列任一項動作來刪除顏色︰

    • 按一下「刪除」圖示

    • 從「色彩表」浮動視窗選單中選取「刪除顏色」。

儲存色彩表

您可以從最佳化的影像中儲存色彩表,以用於其他影像,也可以載入在其他應用程式中建立的色彩表。一旦將新的色彩表載入影像後,最佳化影像中的顏色就會更改,以反映新色彩表中的顏色。

  1. 從「色彩表」浮動視窗選單中選取「儲存色彩表」。

  2. 為色彩表命名,並選擇將儲存色彩表的位置。依預設,色彩表檔案的副檔名為 .act (代表 Adobe 色彩表)。

    如果想要在選取 GIF 或 PNG 影像的「最佳化」選項時存取色彩表,請將色彩表儲存在 Photoshop 應用程式檔案夾內的「最佳化色彩」檔案夾中。

  3. 按一下「儲存」。

    註解:

    當您重新載入色彩表時,所有的調移顏色都將顯示為完整的色票,而且會取消鎖定。

載入色彩表

  1. 從「色彩表」浮動視窗選單中選取「載入色彩表」。

  2. 瀏覽到包含您想載入之色彩表的檔案,可能是 Adobe 色彩表檔案 (.act)、Adobe 色票檔案 (.aco) 或 GIF 檔案 (用來載入檔案的嵌入色彩表)。

  3. 按一下「開啟」。

PNG-24 最佳化選項

PNG-24 適合用來壓縮連續色調的影像;但是,它所產生的檔案會比 JPEG 格式大很多。使用 PNG-24 的優點在於它最多可保留影像中 256 種透明的層次。

透明度和邊緣調合

決定如何最佳化影像中的透明像素。請參閱最佳化 GIF 和 PNG 影像中的透明度

PNG_24
PNG-24 選項

交錯

在瀏覽器中顯示低解析度版本的影像,同時仍下載完整的影像。「交錯式」可讓影像下載的時間看起來比較短,而且讓檢視者知道影像確實正在下載。但「交錯式」也會讓影像檔案稍大一些。

更多說明主題

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策