當WEBP不能用時JPG最適合相片， PNG適合透明圖形，SVG適合圖標、標誌，WEBP和AVIF適合需要兼顧品質和壓縮的圖像。透過了解這些圖檔格式及其各自的優缺點，我們可以讓網頁裡的圖像看起來清楚且載入速度快，進而帶來更好的使用者體驗。讓我們來看看這篇有關網頁圖檔格式的整理吧！

關於點陣圖及向量圖我們之前的文章有介紹過，若有興趣可以點擊前往，這邊就簡單說明:點陣圖和向量圖之間的主要區別在於解析度。點陣圖適合需要細節和各種顏色的影像，例如照片。向量圖則適合創建簡單和複雜的插圖、圖標和其他需要平滑線條並且可以在不影響品質的情況下調整大小的圖形。

在介紹適合網頁的圖檔格式前，我們先剔除了一些圖檔格式:

▲TIFF（標籤圖檔格式）-一種高品質無損格式，常用於專業攝影、列印和存檔。由於檔案較大，不適合在網頁上使用。

▲BMP（點陣圖）- 一種未壓縮的無損格式，用於較舊的應用程式和某些類型的影像處理。由於BMP檔案較大，不適合在網頁上使用。

▲EPS（Encapsulated PostScript）- 一種向量圖檔格式，主要用於列印和圖形設計目的，不適合在網頁上使用。

▲AI - Adobe Illustrator軟體中使用的專有格式，用於建立和編輯向量圖。不適合在網頁上使用。

▲PSD-Adobe Photoshop中用於建立和編輯影像的專有格式。由於檔案較大且需要特定軟體才能開啟和編輯，不適合在網頁上使用。

▲RAW - 相機特定的未壓縮格式，包含未處理的感測器資料。RAW影像主要給專業攝影師用於編輯，由於檔案大小和相容性問題，不適合在網頁上使用。

我們先排除了上述的圖檔格式，因為它們有些不適合網頁使用，有些是需要特定軟體進行檢視和編輯的專有格式。

JPG

副檔名： .jpg、.jpeg、.jpe、.jif

什麼是 JPG 和 JPEG？

JPEG（聯合影像專家小組）是一種常用的壓縮點陣檔案格式，非常適合照片和具有多種顏色的複雜圖形。JPEG 等圖檔格式透過選擇性地除去某些影像資料來實現壓縮，這可能會導致圖像品質下降，我們可以調整壓縮等級以平衡圖像品質和檔案大小。

JPEG圖像是網路中廣泛使用的格式，主流的網頁瀏覽器和圖像編輯軟體都有支援。JPEG和JPG是相同的檔案格式，JPEG代表聯合影像專家小組 ，也就是建立該文件格式的組織，而JPG則是 .jpeg 的縮寫。

JPG的優點

▲處處可見的常用圖像檔案類型，與大多數瀏覽器、軟體和應用程式相容

▲檔案小，可以快速傳輸和快速讀取，方便在網路上查看

▲可壓縮至初始檔案大小的 5%，以便透過網路進行高效傳輸

▲JPEG 編解碼器在 CPU 和 GPU 上速度非常快

JPG 的缺點

▲有損壓縮可能會導致影像品質下降，尤其是嚴重壓縮的圖像

▲邊緣和線條在壓縮過程中可能會降低清晰度

▲可能會造成圖像品質的色調分離和偽影

▲僅支援 1 或 3 個色版

▲不支援透明度保存

什麼時候適合使用JPG？

▲一般來說，大多數情況下都可以將jpg替換為webp格式

▲當您需要顯示高解析度照片時 ，JPG是個很好的選擇，因為它能夠保留高水準的細節和色彩精準性，同時檔案大小依然保持較小

▲當相容性很重要時（例如在IE5上），JPG 被大多數瀏覽器、軟體和應用程式普遍接受，這使它成為網頁圖像的安全選擇

PNG

副檔名：.png

什麼是 PNG？

PNG（便攜式網路圖形）是一種點陣圖檔格式，旨在取代舊的GIF格式。與GIF相比，PNG提供更好的壓縮並支援更多顏色和透明度。它是一種無損圖檔格式，也就是說在壓縮過程中圖像的品質不會像JPG那樣受影響。PNG支援透明度，允許刪除背景並將圖像覆蓋在另一個背景上。

PNG的優勢

▲提供無損壓縮，圖像品質不會像JPE格式那樣降低

▲支援透明度，允許刪除背景並將圖像覆蓋在另一個背景上，在建立圖標和其他圖形時很好用

▲受大多數網頁瀏覽器和圖像編輯軟體支援，使其成為網路圖檔的熱門選擇

▲支援多達1,670萬種顏色，並提供具有平滑色彩漸變和銳利細節的高品質圖像

PNG的缺點

▲與JPE等其他格式相比，PNG檔案的大小較大，且在網頁上載入速度較慢

▲PNG-8最多支援256種顏色，這可能會限制具有複雜配色方案或微妙顏色變化的圖像

▲不適合存照片，因為PNG不是具有大量顏色或細微變化的圖像格式，它可能導致檔案大小過大並降低圖像品質

▲與 GIF不同，PNG不支援動畫，這限制了它作為動畫圖形的功能

什麼時候適合使用PNG？

▲PNG對透明度的支援使其成為需要疊加在不同背景上的圖形（像是logo、圖標等）的絕佳格式

▲PNG 的無損壓縮和對高品質圖像的支援使其成為具有銳利邊緣的圖形（例如圖表或文字較多的圖形）的絕佳選擇

▲PNG-8 支援多達 256 種顏色，這使其成為不需要太多顏色變化的簡單圖形或具有平面顏色的圖像的優良選擇

此篇到這裡告一個段落，點我繼續觀看下篇喔!