如何選擇網頁上最適合使用的圖檔格式？－下篇

延續上篇(點擊我前往)，除了JPG與PNG外，我們為大家帶來更多在網頁上常用的圖檔格式介紹，現在就讓我們繼續看下去吧!

SVG

副檔名：.svg

什麼是 SVG？

SVG又稱為可縮放向量圖形，可以在不損失品質的情況下調整影像大小。它不像點陣圖依樣使用像素，而是像方程式那樣勾勒出形狀和線條的輪廓，這讓它們可以不被解析度限制，非常適合用在需要以不同尺寸顯示的圖形。

SVG的主要功能之一是支援互動性和動畫，這讓設計師可以建立動畫及可互動的動態圖形。 SVG還支援透明度，非常適合用在logo、圖標和其他需要疊加在不同背景上的圖形。

SVG優點

▲SVG 影像可以在不損失品質的情況下放大或縮小，這使其成為響應式設計和建立需要以不同尺寸顯示的圖形的理想選擇。

▲SVG檔案通常比JPEG或PNG等其他格式小，這讓它在網頁上載入速度更快，且消耗的儲存空間更少。

▲SVG 支援互動性和動畫，允許設計師建立動畫和可即時互動的動態圖形。

SVG的缺點

▲創建複雜的SVG圖形可能非常耗時，並且需要較強的設計技能。

▲SVG不支援PNG或GIF等其他格式有支援的某些視覺效果，例如陰影或光輝。

▲雖然SVG檔案通常比其他格式小，但在同一頁面上建立多個複雜的SVG圖形可能會影響頁面載入時間和網站效能。

何時使用SVG？

▲SVG是logo和圖標的理想格式，因為它們通常以不同的尺寸和解析度顯示。SVG可以在不損失品質的情況下進行縮放，看起來都很清晰。

▲不包含紋理的插圖。

▲SVG 支援互動性和動畫的能力使其成為在網站上建立動態動畫的優質選擇。

WEBP

格式和副檔名： .webp

什麼是 WEBP？

WEBP是由 Google 開發的現代點陣圖檔格式，與網路上使用的舊格式（如JPEG和PNG）相比，它提供了更好的壓縮品質。 WEBP影像同時使用無損和有損壓縮，允許較小的檔案大小，而不會犧牲太多品質，因此它可以加快網頁載入時間並減少頻寬使用。

WEBP的優點

▲WEBP作為圖檔格式提供比JPEG和PNG更好的壓縮，在減少檔案大小的同時保持良好的圖像品質。它可以幫助提高網站效能並減少頻寬使用。

▲與PNG圖檔一樣，WEBP支援透明度，允許將圖像疊加在不同的背景上，而沒有可見的邊框。

▲WEBP壓縮方法的靈活性可讓您根據您的需求調整影像品質和檔案大小之間的最佳平衡。

▲WEBP大多數時候受網頁瀏覽器支援（Internet Explorer 除外）。

WEBP的缺點

▲較舊的瀏覽器不支援WEBP。

▲某些影像編輯軟體如Figma可能本身不支援WEBP，需要額外的插件或轉換工具。

何時使用WEBP？

▲如果您想要使用 JPG 且支援WEBP時。

▲需要兼顧良好壓縮和品質的網路影像時，由於WEBP卓越的壓縮能力使其成為希望在不犧牲太多圖像品質的情況下優化載入時間和減少頻寬使用的網站的絕佳選擇。

▲對於具有透明度的圖像 - 當瀏覽器支援可用時，WEBP對透明度的支援使其成為 PNG 的合適替代品。

▲對於現代 Web 應用程式 - 如果您正在開發面向現代瀏覽器的 Web 應用程序，WEBP可以幫助優化您的圖像並提高整體效能。

AVIF

格式和副檔名： .avif

什麼是 AVIF？

AVIF（AV1圖像檔案格式）是由開放媒體聯盟開發的現代點陣圖檔格式。與JPEG和PNG等舊格式相比，它的目的是減少檔案大小並提供更好的壓縮和品質。AVIF使用AV1編解碼器，該編解碼器提供無損和有損壓縮，允許在不犧牲影像品質的情況下縮小檔案大小，這使AVIF成為現代瀏覽器中網頁圖像的優質選擇，因為它可以縮短載入時間並減少頻寬使用。

AVIF的優點

▲AVIF提供比JPEG、PNG甚至WEBP更好的壓縮，進而在保持高品質的同時減少檔案大小。

▲與PNG和WEBP相同，AVIF支援透明度並允許影像疊加在不同的背景上且沒有可見邊框。

▲AVIF 支援高動態範圍 (HDR)和寬色域，與其他格式相比可提供更豐富的色彩和更細緻的影像。

AVIF 的缺點

▲並非所有瀏覽器都支援 AVIF，如:Internet Explorer, Safari, and Edge。

▲某些影像編輯軟體可能本身不支援AVIF，需要額外的插件或轉換工具。與WEBP的情況相同 ，雖然AVIF經過了良好的優化，但將其複製到Figma時卻毫無用處。

▲與其他格式相比，AVIF的高級壓縮技術可能會導致編碼和解碼時間較慢，這可能會影響某些情況下的效能。

何時使用 AVIF？

▲當需要使用優良壓縮品質例如照片時，AVIF卓越的壓縮使其成為在不犧牲圖像品質的情況下優化載入時間和減少頻寬使用優良選擇。

▲當瀏覽器支援可用時，AVIF對透明度的支援使其成為PNG和WEBP的最佳替代品。

▲如果您正在開發現代瀏覽器的網路應用程序，使用AVIF可以幫助優化您的圖像並提高整體效能。

其他圖檔格式

ICO

格式和副檔名： .ico

什麼是 ICO？

ICO主要用於創建小圖標，例如出現在網頁瀏覽器中連結旁邊的favicon。 ICO檔可以包含多種圖示大小和顏色深度，從而可以在不同裝置和解析度上更好地縮放和顯示。

HEIF/HEIC

格式與副檔名： .heif、.heic

什麼是 HEIF/HEIC？

HEIF（高效影像格式）與JPEG等舊格式相比，旨在提供更好的壓縮和品質。 HEIC是HEIF的變異體，它使用 HEVC（高效視訊編碼）編解碼器進行壓縮。這兩種格式都旨在提供較小的檔案大小，而不犧牲影像品質。HEIF/HEIC主要由Apple裝置使用，其僅受safari支援。

JPG XL

格式與副檔名： .jxl

什麼是 JPG XL？

JPG XL是由JPEG小組開發的現代影像格式，與JPEG和PNG等舊格式相比，它提供更好的壓縮和品質。 JPG XL使用無損和有損壓縮的組合，允許較小的檔案大小而不犧牲影像品質。作為一種新的圖像格式，JPG XL尚未得到網頁瀏覽器的廣泛支援，但隨著瀏覽器支援的增加，它有可能成為網頁圖檔的熱門選擇。

網路圖片有眾多格式，最常見的圖檔格式包括JPEG、PNG和WEBP，但有一些圖檔格式能更貼近您的需求同時兼顧您的網站效能、使用者體驗和永續性，選擇合適的圖檔格式能夠確保您的網站在速度、品質和可訪問性方面發揮最佳效能，進而帶來更好的使用者體驗。