必讀指南：點陣V.S向量的差別？常用圖檔格式種類分析

點陣圖與向量圖

只要使用「放大」之術，立刻見真章！

● 點陣：放大會有鋸齒邊、像素化，整體有點模糊不清
● 向量：無限放大還是很平滑

為什麼放大就能判別呢？因為 點陣圖 是由像素一小格一小格的正方形所組成的，而 向量圖則是由路徑與曲線的演算法構成的，設計師一定知道的AI(Illustrator)就是向量圖形設計軟體喔！

常用檔案格式類別

點陣圖

1. 1 jpeg 聯合專家組： 又稱jpg，失真壓縮比率較高，所以當檔案尺寸越小，畫質會差

2. 2 png 可攜式網路圖片： 無失真壓縮，檔案容量比jpg大，若想使用去背圖片，一定要存png檔，jpg無法儲存有透明狀態的圖片。

3. 3 tiff 標籤圖檔格式： 檔案尺寸偏大，會將所有不同圖層化存為一張圖片，使用於傳統影像印刷。

4. 4 bmp Windows點陣圖： 為Microsoft Windows程式使用的格式，可保留圖檔原始色彩像素，故檔案容量占比極大。

5. 5 gif 圖形交換格式： 顏色儲存越多，檔案容量越大，設計上若有漸層色會有落差，會變成一階一階的不圓滑，常看見的逐格動畫多為此檔案格式喔！

6. 6 WebP ： 可用失真或無失真壓縮，為Google推出的新格式，比一般點陣圖檔案容量更小，可使用於網頁，但尚未全面普及。

向量圖

1. 1 ai Adobe Illustrator： 製作印刷物建議用此軟體，可開啟任何向量檔案並編輯，亦可開啟pdf，為Adobe Illustrator專屬的檔案格式。

2. 2 svg 可縮放向量圖形： 用XML格式呈現，可用向量軟體開啟與編輯，亦可製作動畫。是出現於網頁圖檔的常勝軍

3. 3 pdf 可攜式文件格式： 檔案通常包含多頁面以及連結，若轉為pdf輸出印刷會有較大的色差，以及可用Adobe Illustrator開啟。

網頁使用圖檔注意事項

分享製作網頁時，偶爾會遇到的小問題！於製作網頁的軟體Figma（不知道的可以來這篇文章看看： figma小補充 ），輸出svg檔案時，偶爾圖檔會壞掉，主要可能是路徑過於複雜，可請設計師開啟Ai (Illustrator)另存提供即可。網頁的圖檔容量越小越好，因圖檔容量過大時，網頁載入時間也會有差！而當網頁載入時間過長，可能就會發現跳出率提高，使用者不願再進入你的網站瀏覽更多！（可以檢視跳出率高的原因 由此去）

另外分享線上轉檔格式軟體！有需要的朋友可以使用喔！

https://www.aconvert.com/tw/image/
https://www.iloveimg.com/zh-tw/convert-to-jpg

小補充：HEIC圖檔

如果你是果粉的話，說不定還不知道（亂講話），以前iphone預設的照片格式為HEIC，所以你一定經歷過把照片放到電腦卻開啟不了的窘境，不過只有在原況照片會儲存為此檔案格式，想要分享一下電腦MAC的桌布你不知道要放什麼嗎？透過設定HEIC為桌布，能隨著時間自動變不一樣的風景！怎麼看都看不膩，分享給大家三個網站：）

1. HEIC桌布參考一
2. HEIC桌布參考二
3. HEIC桌布參考三