JPG 、 GIF 、 PNG

JPG 、 GIF 、 PNG教學卓越中心、電算中心

2009/10/09 (五 )A

我來自 “世新校園授權圖庫”

edited by Wang

2

From: "Mail Manager" mailmanager@cc.shu.edu.twTo: " 世新 oo 所 " ooooo@cc.shu.edu.twSent: Wednesday, October 07, 2009 12:21 PMSubject: [ 拒絕傳送 ] 99 摮詨僑摨行 ?? 牧 ??(98/10/13??鈭 ?-

您的信件大小為 514.99 KB ，而寄給 faculty 的信件最大上限為 100 KB請將您的信件縮小後再寄一次，謝謝合作！

電算中心 敬啟

近日 e-mail 退件例子 (1)

3

From: “Mail Manager” mailmanager@cc.shu.edu.twTo: “ 世新 oo 所 " ooooo@cc.shu.edu.twSent: Wednesday, October 07, 2009 11:38 AMSubject: [ 拒絕傳送 ] 99 摮詨僑摨行 ?? 牧 ?? 嚗迭餈 ? 撖 ?摰

您的信件大小為 118.15 KB ，而寄給 all-users 的信件最大上限為 100 KB請將您的信件縮小後再寄一次，謝謝合作！

電算中心 敬啟

近日 e-mail 退件例子 (2)

4

From: “Mail Manager” mailmanager@cc.shu.edu.twTo: “oo 學系” ooooo@cc.shu.edu.twSent: Thursday, October 08, 2009 9:50 AMSubject: [ 拒絕傳送 ] 98 學年度「培養卓越菁英主播小龍計畫

您的信件大小為 102.20 KB ，而寄給 all-users 的信件最大上限為 100 KB請將您的信件縮小後再寄一次，謝謝合作！

電算中心 敬啟

近日 e-mail 退件例子 (3)

5

該如何估算 e-mail 的檔案大小？…◦ http://cc.shu.edu.tw/~www/week_qa/qa/q_200512

24_e-mail_size.htm

在本校寄給 all-users 的信件最大上限為 100 KB 的情況下，我們該如何縮小 e-mail 的大小？◦ http://cc.shu.edu.tw/~www/week_qa/qa/q_200611

14_e-mail_smgmt.htm

e-mail 的大小？

1 + 約 30%

6

【方案１】◦適當的圖檔格式 gif? jpg?

【方案２】◦ 不要把 Word 裡的一堆

文字 Copy 後貼進 e-mail

【方案３】◦ 圖片 ( 或檔案 ) 採超連

結方式，不要直接嵌進e-mail

郵件不要太大以免被退件之解決方案

本場次重點

《雲門舞集舞作》數位典藏計畫 http://cloudgate.e-lib.nctu.edu.tw/

視該圖檔需要多少色彩？色彩如何分佈？

8

圖檔格式的選擇？

?

9

圖檔格式的選擇？

?

10

格式存錯了，再另存一次？

◦ （上錯天堂投錯胎）◦ 捨棄的資訊、細節再也回不來！

圖片來源：維基網站

希望得到香脆的結果，

可以選擇用 “蒸” 的嗎？

一開始就該用炸的食物，若不小心先蒸了，

之後再炸它，味道會和直接炸的一樣

嗎？

11

長 x 寬 x 色彩深度例：

1024 x 768 x 3 Bytes = 2.25 MB例：

400 x 400 x 3 Bytes = 468.75 KB

【問】不壓縮的全彩點陣圖有多大？

超過 100 KB…

既然不壓縮的檔很大，那就壓縮吧 …

12

1 位元 黑　白 黑白 2 色變化 8 位元 灰　階 256 色灰階變化16 位元 高　彩 65,536 種色彩變化24 位元 全　彩 16,777,216 種色彩變

化---------------------------------------

8 位元 索引色 最多 256 種色彩

色彩深度 ( 位元 )

1313

三大網頁圖檔格式的火拼

GIF

JPG

PNG

PNG

8

24

索引色 全彩

14

色彩深度 -- 1 位元 (bit)

21=2黑白 2 色變化

15

22=4黑灰白 4 階變化

色彩深度 -- 2 位元 (bits)

色階還很明顯地不連續

16

色彩深度 -- 8 位元 (bits)

28=256如為灰階 , 有 256 階變

化

當您的眼睛已分辨不出一階階時

連續色調﹙ 和觀看距離之遠近有關﹚

17

【灰階】與【黑白】

18

28=2568 bits = 1 Byte

24 bits = 3 Bytes

19

28 x 28 x 28

=16,777,216

(1 千 6 百多萬 )

色彩深度 -- 24 位元 (bits)

R 　　 G 　　 B

色光三原色各用 256 階表示其強度

色光三原色各用 256 階表示其強度

8 bits = 1 Byte24 bits = 3 Bytes

20

索引色 index color ： 8 位元

最多 256 色

網頁上常用的 GIF 檔就是屬於這種。因為顏色少，所以檔案可以壓縮到很小。

從 2 色到最多 256 色

21

索引色

4 色 (10 K)8 色 (14 K)

可以從1

千6

百多萬色中，任意挑選出所要顏色

22

索引色

你的 4 色我的 4 色同樣挑四個顏色，我挑的和你挑的未必相同…

23

練習

何時適合 GIF 、 PNG-8 ？

25

http://tutor.shu.edu.tw/

1:1 時「圖」清楚到讓你以為就是「字」

26

http://cc.shu.edu.tw/~cte/gallery/ccli/e-mail/20070506_reply_jennifer_r3.htm

例：抓 Word 圖

27

例：抓對話框

Alt PrintScren+

28

http://cc.shu.edu.tw/~cte/gallery/ccli/e-mail/20061012_for_rhetoric_class.htm

http://cc.shu.edu.tw/~cte/gallery/ccli/e-mail/20061003_rhetoric.htm

例：抓 PowerPoint 圖

?

to GIF or to PNG-8 ？

30

GIF 、 PNG 的壓縮

練習檔

PNG-8 ？PNG-24 ？

33

JPG 、 GIF 、 PNG24

34

JPG 、 GIF 、 PNG24

35

PNG 24 的舞台：簡報檔、 Flash…

請更改投影片背景色以便清楚看到效果…

PNG 24 的舞台：簡報檔、 Flash…

請更改投影片背景色以便清楚看到效果…

37

練習

3838

GIF圖形交替格式 (Graphics Interchange Format) ◦ 是全球資訊網和其他線上服 務上，在超文字標記語言

(HTML) 文件中顯示索引色圖像和影像常用的檔案格式。◦ GIF 是一種 LZW 壓縮的格式，可以最小化檔案大小

和電子傳輸的時間。◦ GIF 格式可以保留索引色影像中的透明，但卻不能支援

Alpha 色版。

三大網頁圖檔格式

本段直接摘自 Photoshop 7 說明

少講一個很重要的：最多 256 色！

3939

JPEG 靜態影像壓縮標準(Joint Photographic Experts Group) ◦ 是全球資訊網和其他線上服 務上，在超文字標記語言

(HTML) 文件中顯示照片和其他連續色調影像常用的格式。BMP 格式支援「 CMYK」、「 RGB」和「灰階」色彩模式，且不支援 Alpha 色版。

◦與 GIF 格式不同的是， JPEG 會保留 RGB 影像中所有的顏色資訊， 但會選擇性地放棄資料以壓縮檔案大小。

◦ JPEG 影像會在開啟時自動地解除壓縮。較高的壓縮層級會導致影像的品質較低，而較低的壓縮層級會導致影像品質較佳。

◦ 在多數的情況下，「最大」的品質選項製造的結果，與原始影像幾乎沒有差別。

三大網頁圖檔格式

本段直接摘自 Photoshop 7 說明

4040

PNG 可攜式網路圖案 (Portable Network Graphics) ◦ 是研發出來的另一種無專利的格式 (除 GIF 外的另一

種格式 ) ，可以用來進行無減色壓縮和在全球資訊網上顯示影像。

◦與 GIF 不同的是： PNG 支援 24 位元影像，並且可以製造沒有鋸齒邊緣的背景透明。

◦但是，有些網頁瀏覽器不支援 PNG 影像。◦ PNG 格式支援沒有 Alpha 色版的「 RGB」、「索引色」、「灰階」和「點陣圖」模式影像。 PNG 可以保留灰階和 RGB 影像中的透明。

三大網頁圖檔格式

本段直接摘自 Photoshop 7 說明

有兩種：PNG 8

和PNG 24

41

比較

42

比較

PNG: 26 KB JPG (60%): 34 KB

43

將 .ai 的向量圖，存成網頁使用之格式

Illustrator CS 版介面

一切順利

PNG 8PNG 24