1 / 46

JPG 、 GIF 、 PNG

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?? 鈭 ?-

thi
Download Presentation

JPG 、 GIF 、 PNG

An Image/Link below is provided (as is) to download presentation Download Policy: Content on the Website is provided to you AS IS for your information and personal use and may not be sold / licensed / shared on other websites without getting consent from its author. Content is provided to you AS IS for your information and personal use only. Download presentation by click this link. While downloading, if for some reason you are not able to download a presentation, the publisher may have deleted the file from their server. During download, if you can't get a presentation, the file might be deleted by the publisher.

E N D

Presentation Transcript

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

  2. 近日 e-mail 退件例子 (1) • 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請將您的信件縮小後再寄一次，謝謝合作！電算中心 敬啟

  3. 近日 e-mail 退件例子 (2) • 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請將您的信件縮小後再寄一次，謝謝合作！電算中心 敬啟

  4. 近日 e-mail 退件例子 (3) • 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請將您的信件縮小後再寄一次，謝謝合作！電算中心 敬啟

  5. e-mail 的大小？ • 該如何估算e-mail 的檔案大小？… • http://cc.shu.edu.tw/~www/week_qa/qa/q_20051224_e-mail_size.htm • 在本校寄給 all-users 的信件最大上限為 100 KB 的情況下，我們該如何縮小 e-mail 的大小？ • http://cc.shu.edu.tw/~www/week_qa/qa/q_20061114_e-mail_smgmt.htm 1 + 約30%

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

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

  8. 圖檔格式的選擇？   ?

  9. 圖檔格式的選擇？  ?

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

  11. 【問】不壓縮的全彩點陣圖有多大？ • 長 x 寬 x 色彩深度 例：1024 x 768 x 3 Bytes = 2.25MB 例：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種色彩

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

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

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

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

  17. 【灰階】與【黑白】

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

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

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

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

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

  23. 練習

  24. 何時適合 GIF、PNG-8？

  25. 當1:1時「圖」清楚到讓你以為就是「字」 • 【網頁選單】（是字？是圖？） • 世新 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

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

  27. 例：抓對話框 Alt + PrintScren

  28. 例：抓 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 ?

  29. to GIFor toPNG-8？

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

  31. 練習檔

  32. PNG-8？PNG-24？

  33. JPG、GIF、PNG24

  34. JPG、GIF、PNG24

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

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

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

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

  39. 練習

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

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

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

  43. 比較

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

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

  46. 一切順利 PNG 24 PNG 8

More Related