JPG、GIF、PNG 教學卓越中心、電算中心 2009/10/09 (五)A 我來自 “世新校園授權圖庫” edited by Wang

近日 e-mail 退件例子 (1) From: "Mail Manager" mailmanager@cc.shu.edu.tw To: "世新oo所" ooooo@cc.shu.edu.tw Sent: Wednesday, October 07, 2009 12:21 PM Subject: [拒絕傳送] 99摮詨僑摨行??牧??(98/10/13??鈭?- 您的信件大小為 514.99 KB， 而寄給 faculty 的信件最大上限為 100 KB 請將您的信件縮小後再寄一次，謝謝合作！ 電算中心 敬啟

近日 e-mail 退件例子 (2) From: “Mail Manager” mailmanager@cc.shu.edu.tw To: “世新oo所" ooooo@cc.shu.edu.tw Sent: Wednesday, October 07, 2009 11:38 AM Subject: [拒絕傳送] 99摮詨僑摨行??牧??嚗迭餈?撖?摰 您的信件大小為 118.15 KB， 而寄給 all-users 的信件最大上限為 100 KB 請將您的信件縮小後再寄一次，謝謝合作！ 電算中心 敬啟

近日 e-mail 退件例子 (3) From: “Mail Manager” mailmanager@cc.shu.edu.tw To: “oo學系” ooooo@cc.shu.edu.tw Sent: Thursday, October 08, 2009 9:50 AM Subject: [拒絕傳送] 98學年度「培養卓越菁英主播小龍計畫 您的信件大小為 102.20 KB， 而寄給 all-users 的信件最大上限為 100 KB 請將您的信件縮小後再寄一次，謝謝合作！ 電算中心 敬啟

e-mail 的大小？ 1 + 約 30% 該如何估算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 1 + 約 30%

【方案１】 郵件不要太大以免被退件之解決方案 適當的圖檔格式 gif? jpg? 【方案２】 【方案３】 不要把 Word 裡的一堆 文字 Copy 後貼進 e- mail 【方案３】 圖片 (或檔案) 採超連結 方式，不要直接嵌進e- mail 本場次重點

視該圖檔需要多少色彩？色彩如何分佈？ 《雲門舞集舞作》數位典藏計畫 http://cloudgate.e-lib.nctu.edu.tw/

圖檔格式的選擇？   ?

圖檔格式的選擇？  ?

格式存錯了，再另存一次？ （上錯天堂投錯胎） 捨棄的資訊、細節再也回不來！ 圖片來源：維基網站 希望得到香脆的結果， 可以選擇用 “蒸” 的嗎？ 圖片來源：維基網站 一開始就該用炸的食物，若不小心先蒸了， 之後再炸它， 味道會和直接炸的一樣嗎？

【問】不壓縮的全彩點陣圖有多大？ 長 x 寬 x 色彩深度 例： 1024 x 768 x 3 Bytes = 2.25 MB 例： 400 x 400 x 3 Bytes = 468.75 KB 超過 100 KB… 既然不壓縮的檔很大，那就壓縮吧 …

色彩深度 (位元) 1 位元 黑 白 黑白 2 色變化 8 位元 灰 階 256 色灰階變化 16 位元 高 彩 65,536 種色彩變化 24 位元 全 彩 16,777,216 種色彩變化 --------------------------------------- 8 位元 索引色 最多 256 種色彩

三大網頁圖檔格式的火拼 JPG 索引色 全彩 GIF 8 PNG 24 PNG

色彩深度 -- 1 位元 (bit) 21=2 黑白 2 色變化

色彩深度 -- 2 位元 (bits) 22=4 黑灰白 4 階變化 色階還很明顯地不連續

28=256 色彩深度 -- 8 位元 (bits) 如為灰階, 有256 階變化 連續色調 ﹙和觀看距離之遠近有關﹚ 當您的眼睛 已分辨不出一階階時 連續色調 ﹙和觀看距離之遠近有關﹚

【灰階】與【黑白】

28=256 8 bits = 1 Byte 24 bits = 3 Bytes

28 x 28 x 28 =16,777,216 (1千6百多萬) 色彩深度 -- 24 位元 (bits) R G B 攝影：陳吉鵬 R　　G　　B 28 x 28 x 28 =16,777,216 (1千6百多萬) 色光三原色 各用 256 階 表示其強度 8 bits = 1 Byte 24 bits = 3 Bytes

索引色 index color ：8 位元 最多 256 色 從 2 色到最多 256 色 網頁上常用的 GIF 檔 就是屬於這種。 因為顏色少，所以 檔案可以壓縮到很小。

索引色 可以從1千6百多萬色中，任意挑選出所要顏色 8 色 (14 K) 4 色 (10 K)

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

練習

何時適合 GIF、PNG-8？

當 1:1 時 「圖」清楚到讓你以為就是「字」 【網頁選單】（是字？是圖？） http://tutor.shu.edu.tw/ 世新 http://www.shu.edu.tw/index.asp 政大 http://www.nccu.edu.tw/ 師大 http://www2.ntnu.edu.tw/ http://tutor.shu.edu.tw/ 註：PowerPoint 不是 1:1

例：抓 Word 圖 http://cc.shu.edu.tw/~cte/ gallery/ccli/e- mail/20070506_reply_jenn ifer_r3.htm

例：抓對話框 Alt PrintScren +

例：抓 PowerPoint 圖  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 ?

to GIF or to PNG-8？

GIF、PNG 的壓縮 712 Bytes 439 Bytes 77712 1777 Bytes 530 Bytes

練習檔

PNG-8？ PNG-24？

JPG、GIF、PNG24

JPG、GIF、PNG24

PNG 24 的舞台：簡報檔、Flash… 請更改投影片背景色 以便清楚看到效果…

PNG 24 的舞台：簡報檔、Flash… 更改投影片背景為不同色後 可清楚比較結果…

PNG 24 的舞台：簡報檔、Flash… 請更改投影片背景色 以便清楚看到效果…

PNG 24 的舞台：簡報檔、Flash… 更改投影片背景為不同色後 可清楚比較結果…

練習

GIF 圖形交替格式(Graphics Interchange Format) 三大網頁圖檔格式 少講一個很重要的：最多 256 色！ GIF 圖形交替格式(Graphics Interchange Format) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示索引色圖像和影像常用的檔案格式。 GIF 是一種 LZW 壓縮的格式，可以最小化檔案大小和 電子傳輸的時間。 GIF 格式可以保留索引色影像中的透明，但卻不能支援 Alpha 色版。 本段直接摘自 Photoshop 7 說明

三大網頁圖檔格式 JPEG 靜態影像壓縮標準 (Joint Photographic Experts Group) 是全球資訊網和其他線上服務上，在超文字標記語言 (HTML) 文件中顯示照片和其他連續色調影像常用的格 式。BMP 格式支援「CMYK」、「RGB」和「灰階」色 彩模式，且不支援 Alpha 色版。 與 GIF 格式不同的是，JPEG 會保留 RGB 影像中所有的 顏色資訊，但會選擇性地放棄資料以壓縮檔案大小。 JPEG 影像會在開啟時自動地解除壓縮。較高的壓縮層 級會導致影像的品質較低，而較低的壓縮層級會導致影 像品質較佳。 在多數的情況下，「最大」的品質選項製造的結果，與 原始影像幾乎沒有差別。 本段直接摘自 Photoshop 7 說明

三大網頁圖檔格式 PNG 可攜式網路圖案 (Portable Network Graphics) 有兩種： PNG 8 和 PNG 24 PNG 可攜式網路圖案 (Portable Network Graphics) 是研發出來的另一種無專利的格式 (除 GIF 外的另 一種格式)，可以用來進行無減色壓縮和在全球資訊 網上顯示影像。 與 GIF 不同的是：PNG 支援 24 位元影像，並且可 以製造沒有鋸齒邊緣的背景透明。 但是，有些網頁瀏覽器不支援 PNG 影像。 PNG 格式支援沒有 Alpha 色版的「RGB」、「索 引色」、「灰階」和「點陣圖」模式影像。PNG 可 以保留灰階和 RGB 影像中的透明。 本段直接摘自 Photoshop 7 說明

比較

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

將 .ai 的向量圖，存成網頁使用之格式 Illustrator CS 版介面

一 切 順 利 PNG 24 PNG 8