一圖搞懂JPG、PNG、GIF、SVG圖片檔案格式使用時機

2019.08.12 04:35PM
Bridge, Bridge–tunnel, Extradosed bridge, Cable-stayed bridge, Energy, cloudM New York Bowery, Metropolitan area, Sky, Electrical cable, sky, Sky, Transport, Cloud, Architecture, Horizon, Freight transport, Bridge, Sea, Vacation, Fixed link

如果本身就是從事設計相關行業,大概也多少能夠區分各種不同的檔案格式,最簡易的分法就是依照製作的軟體來判別:Photoshop軟體製作會得到點陣圖檔案,illustrator會得到向量檔案,但其他像是GIF、SVG等等分類更細的檔案格式。但若問你要在哪種情況下使用何種圖片格式,就讓人一頭霧水了。

在UX Collective網站上有一位UX設計師Allen Hsu,將4種圖片格式JPG、PNG、GIF、SVG利用很詼諧幽默的方式,教導我們這些麻瓜們在什麼情況下該用什麼檔案格式,雖然不是真的完全適用所有情況,但簡單的方式讓人一目瞭然最基礎的區分法。

簡單的圖片辨識指南:
JPG:用在尺寸較大的照片,以減少文件大小。
PNG:有效減少圖片檔案大小以及保留照片透明元素。
SVG:向量檔,縮放不失真。
GIF:可以製作小型動態圖片檔案。

User experience design, Portable Network Graphics, Design, , Design change, User Experience, Prototype, GIF, Image, JPEG, auto part, Text, Font, Line, Design, Auto part, Diagram, Illustration
▲利用選擇題了解JPG、PNG、GIF、SVG使用時機。

20 則回應

  • 怎麼沒有tif檔?
    2019-08-15
  • 小張浴室自拍照=🔥🔥🔥🔥
    2019-08-14
  • 🔥🔥🔥🔥🔥
    2019-08-14
  • 賴正廷
    2019-08-13
    • 賴正廷 QGIS的point symbol有支援svg喔 你可以試試看~
      2019-08-13
    • 李佳勳 我剛有看到耶 呵呵
      2019-08-13
  • 最常用的應該是jpg和png
    2019-08-13
  • 🔥🔥🔥🔥
    2019-08-13
  • 我最喜歡swf了 可以有互動的圖片
    2019-08-13
  • 我都用bmp(大誤)
    2019-08-13
  • 陳思尹....
    2019-08-12
  • 🔥🔥🔥🔥🔥我不想看到,你知道該怎麼做了😁
    2019-08-12
  • 把w他w燒w了w
    2019-08-12
  • 燒了是哪招?
    2019-08-12
  • 是LOGO嗎?把它燒了?(為什麼🤔)
    2019-08-12
    • 當然也會有製作成兩種配色的情況 印刷一種 數位一種 ,不過大多是會當成增加細節去製作(增加立體感之類的) 鮮少有會跳色系的情況(好比紅→藍)
      2019-08-15
    • LOGO用途廣,好比 玻璃貼、刺繡、包包標籤 或印刷品 等等 漸層色會受限LOGO能夠使用的地方
      (而且向量圖製作的漸層色是由電腦計算,印刷技術在色域上不可能比電腦廣,因此在印刷品上很容易出現斷層)
      2019-08-15
    • 因為不是向量檔吧(放大縮小邊邊會有鋸齒)
      2019-08-12
    • Steve Lu 好像也是。 多數LOGO都是單一色,除了在宣傳影片的LOGO可能會有漸層。
      2019-08-12
    • 作者討厭漸層Logo吧,誰喜歡呢
      2019-08-12