圖檔格式選擇 JPG, GIF, PNG (8) , PNG (24)

Presentation on theme: "圖檔格式選擇 JPG, GIF, PNG (8) , PNG (24)"— Presentation transcript:

1 E-mail 圖檔格式選擇 JPG, GIF, PNG (8) , PNG (24)
教學卓越中心 2013/12 我們來自 “世新校園授權圖庫” edited by CTE

2 【困擾】 all-users 信件 因超過 100 KB 而迭遭退件打擊

3 我是照片， 對啦，我就是 大家常用的 JPG！
常見原因之一是：圖檔格式不適當 許多人喜歡存 JPG，但它未必適合每種圖檔性質 世新校園授權圖庫 我的重點是 “文字” 也請把我存成 PNG 謝謝！ 我是照片， 對啦，我就是 大家常用的 JPG！ 我是 “色塊” 請把我存成 PNG 謝謝！ 這文字在 PPT 裡不是很清晰，但在網頁或 裡會跟「真字」 一樣清晰。

4 【狀況】不適合存 JPG 的，卻存為 JPG 例如：都是文字、色塊時 結果： 糊糊的， 且檔案大

5 【狀況】不適合存 JPG 的，卻存為 JPG 例如：文字、色塊、圖案、 漸層

6 【狀況】存成 JPG 時，品質過低 JPG 壓縮到文字幾乎已無法閱讀

7 圖檔格式的選擇？依該圖色彩狀況 選對了 沒選對 選對了

8 for 網頁用圖檔格式 姑且不管 all-users 信件 100 KB 的限制 先來瞭解網頁用 (含 e-mail) 的圖檔格式 For
網頁用 圖檔格式

9 網頁用的圖檔格式 GIF 圖形交替格式 (Graphics Interchange Format)
JPEG 靜態影像壓縮標準，適合照片。 (Joint Photographic Experts Group) GIF 圖形交替格式 (Graphics Interchange Format) 最多 256 色，可以有 1 色透明。適合色塊、 圖案。 PNG 可攜式網路圖案 (Portable Network Graphics) PNG 有兩種： PNG 8 和 PNG 24

10 網頁用的圖檔格式 檔案格式 色彩深度 透明度 JPG 無 GIF 周圍常一圈白白的 PNG (8) （同上） PNG (24)
漸漸透明，很平順 全彩，224 28 28 全彩，224 8 位元 索引色 最多 256 種色彩 24 位元 全　彩 16,777,216 種色彩變化

11 全彩、256 色 224 ＝ 16,777,216 28 ＝256 〝一千六百多萬色〞數字太長了 「 24 位元」比較好講。 俗稱「全彩」
〝一千六百多萬色〞數字太長了 「 24 位元」比較好講。 俗稱「全彩」 28 ＝256 8 位元 又叫「索引色」

12 實例效果比較

13 JPG、GIF/PNG(8)、PNG(24) 更改投影片背景色 可清楚看到效果…

14 JPG、GIF/PNG(8)、PNG(24) JPG PNG 8 GIF 更改投影片背景色 可清楚看到效果… PNG 24

15 JPG、GIF/PNG(8)、PNG(24)

16 JPG、GIF/PNG(8)、PNG(24) JPG GIF PNG 8 PNG 24

17 投影片「背景色」與圖檔原來背景色相同時 圖片來源：故宮網站

18 投影片「背景色」與圖檔原來背景色不同時 圖片來源：故宮網站 PNG 24 PNG 8 GIF

19 檔案大小舉例： PNG (8): 26 KB JPG (60%): 34 KB

20 JPG 和 PNG (8) 以字體和圖案為主時，適合 PNG (8) 照片為主時，適合 JPG
GIF 和 PNG(8) 外觀效果一樣 但 PNG(8) 檔案比較小 所以兩者作選擇時，建議 PNG(8) 「文字」存成「圖檔」時，會清楚到誤以為還是〝文字〞 【例】英語系以《Write to Learn》線上系統，促進新生的「英文作文」能力 照片為主時，適合 JPG JPG 和 PNG(24) 都是全彩 PNG(24) 很完美，但檔案比較大，適合作備份 all-users 信件上限是100 KB， 所以內嵌於 時通常不使用 PNG (24) 採連結方式或另開網頁時則可考慮 【例】可汗學院 (1)：教室有牆、教育無界，24 小時「網路家教」

21 所以… 要嘛 PNG (8) 要嘛 JPG 至於 GIF，除非是動畫，否則不建議 GIF 動畫 圖片來源：Google 首頁

22 儲存圖檔的軟體 PowerPoint Photoshop Illustrator 較簡單，有時效果較差
可存成 PNG 後，再到 Photoshop 重存 以下二者可較仔細設定 Photoshop Illustrator PowerPoint Photoshop Illustrator

23 SHU 儲存圖檔：PowerPoint PowerPoint 也可存圖檔， 但 GIF 效果較差，PNG 是 24，沒有 PNG (8)
這是圖檔了 SHU 這還是文字 GIF PNG 24 JPG 選取後， 按右鍵， 選 「另存成圖片」

24 在 Photoshop「儲存為網頁用」格式
1. 選檔案格式 看這樣好不好 2. 該格式相關設定 例如 JPG要設壓縮品質 這會影響到檔案大小 3. 查看檔案大小

25 在 Illustrator 「儲存為網頁用」 格式
1. 選格式 看這樣好不好 2. 設寬度 按 [套用] 從向量圖轉存時 寬高愛設多寬就多寬 3. 查看檔案大小

26 注意事項： JPG 越存會越差 儘量拿原始的製作檔來重設長寬、儲存選項 避免一再拿上一手的 JPG 重存。 變 差

27 注意事項： 一開始就要選對格式， 不要拿已存錯的檔來改存。 因此，手上要保留最原來的檔 （如：照片、psd、ai、ppt (x)…）
一開始就要選對格式， 不要拿已存錯的檔來改存。 例如應該存成 png，卻存成 jpg 請不要拿 jpg 來另存 請拿原始製作檔 (例如 psd) 來重新設定儲存 因此，手上要保留最原來的檔 （如：照片、psd、ai、ppt (x)…）

28 校園授權圖庫 本校校園授權圖庫：照片類 61 類，各舉 4 例，共 244 例 本校校園授權圖庫：向量圖案類 (19 輯) 照片類 向量圖

29 祝 順 利