網站圖片格式選擇：JPEG、PNG、WebP、SVG 全面比較

壓縮方式: 有損壓縮。JPEG 使用離散餘弦轉換(DCT)將影像資料轉換並壓縮,透過調整壓縮品質係數來減少檔案大小。壓縮過程會犧牲部分細節資訊,以換取大幅縮小檔案容量。JPEG 可儲存為漸進式 JPEG(progressive JPEG),使圖片在網路載入時能先顯示模糊的大略輪廓,逐步清晰化,改善用戶在慢速網路下的體驗。

無損特性: 不支援無損壓縮。所有標準 JPEG 圖片皆經過有損壓縮,無法完全還原壓縮前的原始畫質(註:有其他衍生格式如 JPEG-LS、JPEG 2000 提供無損模式,但它們並不屬於一般網頁標準)。

透明度支援: 不支援透明背景。JPEG 沒有 Alpha 通道,無法產生透明或半透明效果。如果需要將圖片疊加在不同背景上,JPEG 不適合,因為透明區域會被填入實色(通常是白色或任意背景色)。

色彩深度: 通常為 24 位元色彩(每個像素的紅、綠、藍各8位元,總計約 1670 萬種色彩)。JPEG 不支援索引色調色盤模式,也不支援額外的透明通道。大多數 JPEG 圖片使用 8 位元/色的色彩深度;較高色深的 JPEG 並不常用在網頁上。

適合內容: 攝影照片和寫實影像。JPEG 擅長呈現色彩豐富、漸層平滑的照片類內容。在照片中適度的細節損失通常不明顯,卻能大幅減小檔案大小。然而,對於需要銳利細節的圖像(例如帶有文字的截圖、線條圖、圖表),JPEG 壓縮會造成模糊或方塊失真,品質不佳,因此不建議使用 JPEG 儲存含有明確邊界或文字的圖形。

壓縮方式: 無損壓縮。PNG 使用無失真的壓縮演算法(基於 DEFLATE 壓縮,例如 zip 壓縮技術)來儲存影像資料,即使多次開啟儲存也不會降低圖片品質。由於無損特性,PNG 能精確保留原始畫素資訊,適合需要原汁原味保真的圖像。

無損特性: 完全無損。PNG 不會因壓縮而犧牲畫質,解壓縮後的圖像與原始圖像像素不差毫釐。這使它非常適合儲存需要精確呈現的圖形,如 UI 截圖、徽標等。另外,PNG 支援索引色模式:可將圖片限制在最多 256 色(稱為 PNG-8),透過調色盤方式大幅縮小檔案,但索引色模式下仍屬無損(只是在減少色彩數)。若需要全彩,PNG 也可使用 真彩色模式(PNG-24,24 位元色彩無透明)或 真彩色含透明(PNG-32,24 位元色彩 + 8 位元 Alpha)。

透明度支援: 完整支援透明和半透明。PNG 是網頁中長期使用的透明圖片格式。特別是 PNG-24/32 格式包含 8 位元的 Alpha 通道,可以呈現細緻的半透明陰影和反鋸齒邊緣效果。這對製作圓角矩形、陰影效果或將圖標疊放在不同背景上非常有用。相較之下,早期的 GIF 只能支援單一色度的透明(不支援半透明),而 PNG 則沒有此限制。

色彩深度: 高度彈性。PNG 支援從 1、2、4、8 位元的低色深(用於索引色、小圖示)到 16 位元/色 的高色深模式。實務上,網頁常用 8 位元/色(每通道)即 24 位元真彩色,再加 8 位元透明通道(總計32位元)即可涵蓋大部分需求。PNG 甚至可儲存 16 位元/色的影像,用於專業相片或醫學影像以保留極高的色彩精度,不過這種高色深 PNG 在一般網站中較少見,因為檔案體積巨大且超出瀏覽器一般需求。

適合內容: 圖示、Logo、截圖等需要高品質或透明背景的圖像。由於無損和支援透明,PNG 非常適合儲存需要銳利邊緣的圖形,例如介面按鈕、圖示、公司商標、文字截圖等。對於含有文字的截圖,PNG 能確保文字邊緣不模糊。需要注意的是,PNG 不適合大型照片或複雜連續色調影像,因為在無損模式下這類圖片檔案體積會相當龐大(往往是 JPEG 的數倍以上),會嚴重影響載入速度。開發者常透過PNG-8模式壓縮簡單圖形:如果一張圖只有少量顏色(例如圖示只有幾種扁平色),使用 256 色調色盤的 PNG-8 既保留無損品質又能顯著縮小容量。

其他特性: PNG 可以選擇隔行掃描(Adam7 interlacing)儲存,讓圖片加載時能粗略顯示後逐步清晰(類似 JPEG 漸進式效果),但一般默認未開啟隔行以避免略增檔案大小。總體來說,PNG 提供了靈活的色彩模式與透明度,是網頁圖形不可或缺的格式之一。

壓縮方式: 同時支援 有損 和 無損 壓縮。WebP 是 Google 推出的現代化影像格式,結合了 JPEG 和 PNG 的優點。

有損 WebP: 採用基於 VP8 視訊編碼的預測式壓縮技術。簡單說,WebP 有損模式像是更聰明的 JPEG:也將圖像分成區塊壓縮,但透過鄰近區塊的像素來「預測」目前區塊內容,再只記錄差異部分,大幅提高壓縮效率。WebP 有損壓縮依然會丟失些微細節,但通常在相同感官品質下,檔案比 JPEG 更小。

無損 WebP: 提供與 PNG 類似的無損壓縮。它使用先進的壓縮技巧(如針對重複資料的替換編碼、獨立色頻道編碼、最近色彩緩存等)來減少檔案大小。在大多數情況下,無損 WebP 能比對應的 PNG 檔更小,但依然保持與原圖像完全相同的品質。

無損特性: 兩者皆支援。開發者可選擇以有損模式壓縮照片類影像,或以無損模式壓縮需要完美保真的圖形。值得一提的是,WebP 即使在有損模式下也可以支援透明(Alpha)!這點是 JPEG 所做不到的。也就是說,WebP 能夠製作帶透明背景的有損圖片,例如帶透明背景的照片,這在以前只能用 PNG(體積大)或 GIF(色彩受限)實現。

透明度支援: 支援完整透明與半透明。無論有損或無損 WebP 都支援 8 位元的 Alpha 通道。因此開發者可放心地用 WebP 來取代 PNG 圖片(例如帶透明背景的圖示),通常能得到更小的檔案。

色彩深度: 24 位元色彩+透明通道。WebP 的色彩與一般 JPEG/PNG 相當,可呈現約 1670 萬種真實色彩,並可附加 8 位元透明通道(總計32位元/像素)。WebP 有損圖像內部採用 YUV 色彩空間(與 JPEG 類似,亮度和色度分離並對色度取樣壓縮),以提高壓縮率;無損 WebP 則使用直接的 RGBA 色彩模型保存每個像素。雖然 WebP 本身未像更新的 AVIF 那樣提供更高每色位深度(10-bit 等),但對於網頁常見的色彩需求已足夠。

檔案大小與效能: WebP 最大的優勢是在相同主觀品質下檔案體積更小。一般而言,有損 WebP 比對等品質的 JPEG 檔案小約 25%~35%;無損 WebP 則比相同圖片的 PNG 檔案小約 20%~30%。這意味著將網站圖片換成 WebP,可以大幅減少圖片總大小,提升載入速度。此外,現代瀏覽器對 WebP 解碼速度快且效率高。實驗顯示,解碼 WebP 所需的記憶體甚至少於解碼 PNG(尤其對有損壓縮的圖片)— 對行動裝置而言,這有助於減輕內存與處理負擔。然而需要注意,WebP 編碼(產生壓縮檔)相對較慢且耗費計算資源,但這只影響到製作圖片的步驟,對用戶端載入無影響。

其他特性: WebP 非常多才多藝,除了靜態圖像外,它還支援動畫(類似 GIF/APNG)。一個 WebP 檔可以包含多幀畫面實現動態效果,而且壓縮效率遠優於 GIF。換言之,WebP 一種格式即可兼容照片、有透明背景的圖形、動畫影像等多種用途,對開發者相當便利。

瀏覽器支援: 現今主流瀏覽器都已支援 WebP。Chrome、Firefox、Edge、Opera 早在幾年前即全面支援。Safari 從 14 版(搭配 macOS Big Sur 或 iOS 14)開始支援 WebP,因此目前最新的桌面與行動 Safari 均已相容。唯獨過時的 IE 瀏覽器不支援 WebP(IE 最後的版本為 11,僅佔極少數市佔且已被官方終止支援)。總的來說,在2025年,絕大多數用戶端都能直接顯示 WebP 圖片。不過,考量極少數舊版瀏覽器或特殊用戶端(例如某些電子郵件客戶端、老舊應用內嵌瀏覽元件)可能不認識 WebP,開發者在實務上通常會提供 JPEG/PNG 後備以確保萬無一失,下文將介紹如何使用 picture 提供相容性。

適合內容: 適用於各種類型的圖像。WebP 有損模式非常適合照片,無損模式適合圖示、徽標等圖形,加上透明與動畫能力,WebP 幾乎可以覆蓋所有傳統 JPEG、PNG、GIF 的應用場景。如果專案瀏覽環境允許,我們可以考慮盡量使用 WebP 來減少圖片體積。唯一需要留意的是製作與部署流程:由於要提供後備格式,網站可能需要額外的圖片版本或轉換步驟,但許多建置工具已能自動轉換 JPEG/PNG 為 WebP,使開發者使用上更加輕鬆。

圖像原理: SVG 是基於 XML 的向量圖形格式。與前面幾種點陣圖(Raster)格式不同,SVG 不是由像素陣列構成的圖像檔案,而是一系列描述圖形的指令集合。換言之,SVG 檔案內容其實是文字(XML程式碼),定義了要繪製的線條、曲線、形狀、顏色等。瀏覽器解析這些指令後,動態地繪製出對應的圖形。因此,SVG 可以無損縮放到任意大小而不失真——因為放大時只是重新計算幾何形狀並渲染,而不像位圖那樣放大會出現馬賽克。

壓縮方式: SVG 本質上是文字格式,但可透過壓縮傳輸來減小體積。常見做法是讓伺服器對 SVG 啟用 GZIP 壓縮(SVG 文件非常適合被文字壓縮),或者直接將檔案副檔名改為 .svgz(已預先壓縮的SVG)。這種壓縮對圖像本身品質沒有影響。由於 SVG 紀錄的是向量資訊,並不存在類似 JPEG 的有損壓縮;所有繪製出來的圖形理論上都是精確的。ただし,若 SVG 中嵌入了位圖影像(SVG 容許 image 元素載入像素圖)或應用了濾鏡特效,檔案大小和呈現品質仍受那些位圖或效果影響。

透明度支援: 天生支援透明。一個 SVG 圖形背景預設是透明的(除非明確畫了個有填色的背景形狀)。SVG 中的每個繪製元素也都可以設定填充透明度或線條不透明度。因此,用 SVG 製作圖示、Logo 可以直接疊加在任意底色的網頁上而無需考慮背景色問題。此外,SVG 也支援複雜的色彩漸層和半透明效果,透過定義樣式可實現各種透明度變化。

色彩與細節: SVG 使用樣式(類似 CSS)或屬性來定義圖形的顏色、描邊等,因此色彩並非被量化為固定位元深度。理論上,SVG 能呈現裝置所支援的所有色彩。對於非常複雜的漸層或色彩效果,可以透過SVG的漸層定義或濾鏡來實現。不過,需要注意SVG適合幾何圖形,並不擅長表現像照片那樣的寫實細節(可以想像用無數多邊形去逼近照片,雖可行但極其低效)。若強行將照片轉成 SVG(除非使用 image 直接內嵌位圖),得到的會是一個結構龐大的檔案,而且瀏覽器繪製速度也可能變慢。因此,SVG 最適用於可用簡潔圖形構成的影像,例如插畫、圖示、icon、Logo、關係圖或資訊圖表等。

檔案大小: 對於結構簡單或中等複雜度的圖形,SVG 檔案往往非常小,比對應解析度下的 PNG 檔案還小很多。這是因為相同圖形用程式碼描述可能只要幾行文字,但若存成像素圖則需要為每個像素儲存顏色資訊。舉例來說,一個 100×100 像素的簡單圖示,保存為 PNG 可能要上萬個像素資料,而保存為 SVG 也許只需十幾個指令節點。隨著圖形複雜度增加,SVG 檔案大小會上升(包含更多指令和座標),在極端情況下如果圖形非常複雜(例如包含成千上萬個節點),SVG 檔案可能比位圖還大,而且瀏覽器繪製那麼多向量指令也需要較多計算。一般網站常用的 SVG(如 icon 圖示、Logo)都屬於簡單範疇,透過適當優化 SVG 程式碼(移除冗餘空白、壓縮路徑資料等),可以讓 SVG 取得極佳的體積優勢。

瀏覽器支援: 現代瀏覽器對 SVG 支援度良好。Chrome、Firefox、Safari、Edge 等皆可直接在網頁中呈現 SVG。不僅可透過 img 引用 SVG 檔案,還能將 svg 標籤直接寫在 HTML 中 inline 使用(內嵌 SVG 可以與 CSS/JS 互動)。行動裝置瀏覽器對 SVG 的支援同樣成熟。因此,在2025年的網站開發中,放心使用 SVG 吧!唯一需要注意的是舊版 IE 瀏覽器(IE8 及更早)不支援直譯 SVG,如果必須照顧極舊的瀏覽器,開發者可能需要在後端將 SVG 轉成 PNG 作為替代。但目前大多數情況下,IE8 已極少見,所以 SVG 在實務上已無太大相容性顧慮。

適合內容: Logo、Icon、插圖、圖表等向量圖形。總之,任何能用矢量繪製的圖像,用 SVG 都是理想的選擇:它縮放自如、永不失真、通常檔案很小、還可以進行 CSS 樣式調整或動畫(例如讓 icon 變色、旋轉等)。SVG 不適合照片或複雜陰影質感的圖像,那些情況下建議使用高品質 JPEG/WebP 等點陣圖格式。

網站的載入速度與圖片的檔案大小直接相關。良好的圖片格式選擇可以在保持畫質的同時大幅縮減檔案體積,提高頁面加載效率。以下是效能相關的比較與建議:

檔案大小差異: 針對相同圖像內容,格式不同會導致檔案大小差異很大。一般而言,JPEG 檔案對照片類影像有極高的壓縮效率,能在畫質尚可的情況下使照片檔案非常小,但對純色塊或線條圖效果差;PNG 因為無損,所以對照片的壓縮遠遠不如 JPEG,有時同一張照片 PNG 可能比 JPEG 大數倍以上,但對簡單圖形 PNG 可以透過調色盤優化得很小;WebP 則幾乎在各類情境下都表現出更佳的壓縮率,無論照片或圖示檔案通常都比傳統格式更小;SVG 對於可用向量描述的圖形,其檔案通常極小,但無法用於照片壓縮(照片若轉成 SVG 反而幾乎無法載入)。因此,選擇格式時應根據圖片的內容做判斷:照片類用 JPEG/WebP,圖形類用 PNG/WebP/SVG。

載入數量與請求數: 除了單張圖片大小,多張圖片的情況也要注意請求數量對效能的影響。如果網站上有大量小圖示(例如社群按鈕、功能圖標),使用 SVG 特別有優勢:因為可以將多個圖示整合在一個 SVG 檔案中(如 SVG sprite),或直接內嵌 SVG 代碼在 HTML,省去大量 HTTP 請求。傳統上也有使用 CSS Sprite 拼合多個 PNG 圖的方法來減少請求數。HTTP/2 雖然減輕了多連線請求的負擔,但圖片過多依然可能拖累初次渲染。因此,盡量精簡圖片數量或合併圖示也是提升效能的重要手段。

進階技巧: 無論哪種格式,開發者都應注意圖片的實際解析度與壓縮品質設定。過大的實體尺寸或未經壓縮優化的圖片會導致不必要的流量浪費。例如:一張顯示區域只有 200px 寬的照片,卻使用了一張 2000px 寬的原圖,這會造成十倍左右的檔案大小浪費。建議在匯出 JPEG/PNG/WebP 時就調整到合適的像素尺寸,並且針對 JPEG/WebP 適當調低品質設定直到肉眼看不出明顯失真為止。也可以使用自動化工具(如 webpack 插件、gulp 腳本或線上服務)來壓縮優化圖片。對於 PNG,可使用 pngquant、TinyPNG 等工具壓縮調色盤。對於 SVG,可使用 SVGO 等工具刪減無用資訊。總之,格式選對後,別忘了進一步優化圖片,二者搭配才能最大化效能收益。

良好的圖片優化不僅提升速度,也有助於 SEO(搜尋引擎優化)。在 SEO 方面,我們考慮兩個重點:搜尋引擎能否索引你的圖片、以及圖片對網站整體SEO指標的影響。

搜尋引擎索引與格式: 主流搜尋引擎(如 Google)目前能夠索引多種常見圖片格式,包括 JPEG、PNG、WebP、SVG 等。因此,僅從索引角度看,使用 WebP 或 SVG 不會影響你的圖片被搜尋引擎收錄。例如,Google 圖片搜尋是可以識別 WebP 和 SVG 的。所以不用擔心因為用新格式而喪失在 Google 圖片的曝光機會。重要的是確保你的圖片有正確的 img 標籤和 alt 文本描述,這對 SEO 更加關鍵。需要注意的是,如果你的圖片是透過 CSS 背景圖呈現的,搜尋引擎通常不會將其納入索引,因為爬蟲主要關注 HTML 中明確標記的 img。因此,對於重要的內容圖片,應該放在 img 中而非僅作為背景圖,並提供描述性的 alt 文字。

速度與排名: 圖片格式間接地影響 SEO 的另一層原因是網站速度。Google 已將網站的Core Web Vitals(核心網頁穩定指標,如載入速度、延遲等)納入排名考量。圖片過大導致的慢速載入可能影響你的SEO評分。因此,使用更優壓縮率的圖片格式(如 WebP)能改善頁面載入時間,進而有助於SEO。實務上,Google PageSpeed Insights 也建議將圖片轉換為新一代格式(如 WebP、AVIF)來減少傳輸體積。如果你有效地減少了圖片尺寸、提升了網站速度,搜尋排名可能會因更好的使用者體驗而得到改善。相反地,一堆未優化的大圖會拖慢網站,進而間接降低SEO表現。

圖片 Sitemap 與描述: 這部分和格式無關,但值得一提:若你的網站非常依賴圖片(例如作品集、電商產品圖),別忘了提供圖片版的 Sitemap 給搜尋引擎,並在 img 加上 alt 屬性描述圖片內容。這能提高圖片在相關搜尋出現的機會。格式的選擇不影響這些機制,所以你可以放心使用最佳的格式,同時遵循 SEO 最佳實踐。

簡而言之,正確的圖片格式不會阻礙 SEO,相反透過減少檔案大小來提升速度還有助於 SEO。請專注於使用者體驗:圖片載入快、畫質佳,使用者滿意度提升,SEO 自然不會差。

不同格式在不同瀏覽器上的支援程度曾經是開發者選擇格式時的顧慮。不過隨著時間推進,現在的情況對開發者越來越有利。以下是各格式的支援概況與相容性策略:

通用支援的格式: JPEG、PNG、GIF 作為網頁歷史悠久的格式,獲得所有圖形瀏覽器的原生支援,幾乎沒有相容性問題。SVG 的支援也已非常普遍,早在 IE9 之後的版本及所有其他現代瀏覽器都完整支援 SVG(包含 inline SVG)。除非你還需要支援 IE8 或更舊(這種需求已極罕見),否則可以認為 SVG 在瀏覽器相容性上是安全的。

新興格式的支援: WebP 做為較新的格式,早期曾擔心 Safari、不支援的問題。如今 Safari 14+ 已加入支援,使 WebP 在所有主流瀏覽器(Chrome、Firefox、Edge、Opera、Safari)都可以正常顯示。依然不支援 WebP 的主要是IE 瀏覽器(IE11 及更早)以及一些過舊的行動瀏覽器。不過這些不支援的用戶比例已經極低。Microsoft Edge 瀏覽器早已改用 Chromium 核心(支援 WebP),而 IE11 也在 2022 年被官方淘汰。因此,WebP 的支援度現今已相當廣泛,多數網站可以放心使用 WebP 作為主要格式。

實作相容性的最佳實踐: 即便 WebP 和 SVG 已普遍支援,提供後備方案仍是穩健策略。前面的程式範例已示範過 picture 元素,這是 HTML5 提供的最佳做法之一:可定義多種圖片來源,讓瀏覽器自己選合適的格式載入。不支援 WebP 的舊瀏覽器會自動略過 WebP source,改用 JPEG/PNG。這樣開發者既能享受 WebP 的檔案大小優勢,也能兼容極舊環境。另外,後端或 CDN 可根據瀏覽器 User-Agent 判斷並動態提供不同格式的圖片,例如偵測到 Safari 舊版就給 JPEG,否則給 WebP。不過這需要伺服器邏輯支援,較簡單的前端方式還是使用 picture。如果你的網站非常在意極少數舊設備,務必做好降級方案;如果目標用戶都使用新瀏覽器,直接用 WebP/SVG 沒問題。

CSS 背景圖的相容性處理: 對於 CSS background-image,無法使用 picture 元素。但可以利用 CSS 特性檢查功能來解決。例如:

上述 CSS 利用 @supports 檢查瀏覽器是否支援 WebP,如果支援就改用 WebP 背景圖;不支援則維持 JPEG 背景圖。這種寫法可以讓新格式平滑地相容舊瀏覽器。不過需要注意各瀏覽器對 @supports(image-format) 的支援狀況,新版Chrome/Firefox已支持該語法,但Safari尚不支持。如果介意這點,也可以乾脆只使用傳統格式的背景圖以求保險。

格式降級與用戶體驗: 提供後備格式時,儘量選擇畫質最相近的格式作為降級方案。例如,如果 WebP 有損帶透明的圖片需要後備,應提供 PNG 而非 JPEG,因為 JPEG 沒透明度會破壞畫面效果;如果 WebP 是高壓縮照片的後備,則使用 JPEG 因畫質相似且檔案小。良好的降級策略可以確保在不支援新格式的瀏覽器上仍有不錯的用戶體驗,只是載入效能稍差一些而已。總之,現在格式相容性已不再是巨大障礙,開發者應大膽採用先進格式,同時加上簡單的後備措施來覆蓋少數舊環境。

隨著智慧型手機普及和 Retina 高解析度螢幕的出現,圖片格式的選擇也要考慮在這些裝置上的效果和效能。這方面有幾個要點:

行動裝置效能: 行動網路相對桌面環境通常較慢且流量寶貴,且行動裝置硬體資源有限(CPU、記憶體)。因此,對行動裝置友善的圖片策略是:減少資料傳輸量 和 降低解碼負擔。在這方面,使用像 WebP 這樣高壓縮率的格式對行動裝置很有利——能以更小的檔案提供相同視覺品質,縮短下載時間並節省用戶流量。同時,現代行動瀏覽器對 WebP 等格式的解碼都有良好優化,速度快且耗電量低。相反,如果使用未壓縮或無損的大圖(如直接使用未縮放的 PNG 照片),可能導致行動裝置上載入非常緩慢,甚至因記憶體占用過大而影響裝置反應速度。小結:行動優先的原則下,盡量採用體積小的格式(有損壓縮的 JPEG/WebP),並合理壓縮品質,同時避免用不著的超高解析度圖片。

高解析度螢幕 (Retina) 清晰度: Retina 顯示器(高 DPI 螢幕)的像素密度是傳統螢幕的兩倍甚至更高,如果我們使用與一般螢幕相同解析度的圖片,在 Retina 螢幕上看可能顯得模糊。這是因為螢幕像素變細密了,而圖片本身的像素數不足以提供足夠細節,結果就是縮放顯示時不夠銳利。為了解決這個問題,有幾種策略:

使用 SVG 或其他向量格式: 這是最理想的方法之一。由於 SVG 可以無限縮放,所以在 Retina 螢幕上依然是完美銳利的,完全不用為不同像素密度準備不同版本。同樣地,CSS 繪製的圖形(如 icon font 或純色的樣式)在高 DPI 下也能保持清晰。

提供高解析度點陣圖: 對於照片或無法使用向量的圖片,可以提供兩套解析度的點陣圖(通常稱為 1x 和 2x 圖片)。例如,一張在一般螢幕上顯示 200×200 像素的照片,在 Retina 螢幕上最好提供 400×400 像素的版本,這樣每個虛擬像素都有實體像素支撐,畫面會更銳利。實現方式可以是 img 的 srcset 屬性,或使用 picture 元素按像素密度提供不同檔案。CSS 裡也可以利用 image-set() 來給不同解析度提供不同圖檔。需要注意的是,高解析度圖片檔案大小通常是普通的數倍(因為像素數增加了4倍),這會增加載入時間。所以建議僅針對必要的圖片提供更高解析度版本,並透過前端代碼確保低解析度裝置不會誤載入高解析度大檔案。

格式對高解析度的影響: 本質上,JPEG、PNG、WebP 這些點陣格式在高 DPI 下都需要提供更多像素才能清晰,格式本身沒有「自適應解析度」的能力。但WebP 的優勢是即便提供2x尺寸,它的檔案可能仍比同尺寸 JPEG/PNG 小一圈,減輕了一部分 Retina 圖的檔案負擔。因此,在做 Retina 圖片時,使用 WebP 可以讓高解析度版本的檔案相對小一些。另一方面,SVG 天生解決了清晰度問題,但必須保證圖形是能用向量描述的。

行動與 Retina 的平衡: 綜合來看,為了同時照顧行動裝置的載入速度和 Retina 清晰度,我們可以採取響應式圖片方案:使用 picture 或 srcset 提供根據螢幕條件載入最佳的圖片。例如,小螢幕手機可以載入較小尺寸或壓縮品質稍低的 JPEG/WebP,大螢幕或 Retina 則載入較高解析度的版本;支援 WebP 的載入 WebP,不支援的載入 JPEG/PNG。透過正確設定這些屬性,瀏覽器會自動選取最合適的資源,達到性能與畫質間的最佳平衡。這超出了本文格式比較的範疇,但值得中級開發者進一步學習運用。簡單而言:善用現代格式加上響應式技術,圖片在各裝置上就能又快又漂亮!

現代瀏覽器大多支援 WebP 圖片,但為了相容不支援的情況,我們可以使用 picture 元素來提供 WebP 及傳統格式的多種來源。以下範例顯示如何使用 picture,在支援 WebP 時載入 WebP 圖,否則回退載入 JPEG 圖:

在上述程式中,我們提供了兩個 source 子元素:第一個指定 WebP 檔案及其 MIME 類型,第二個指定 JPEG 檔案。瀏覽器會按順序檢查,如果支援 WebP 就會使用第一個來源,不支援則跳過改用第二個。img 標籤裡的 src="example.webp" 則作為最後的保險,也作為不支援 picture 老舊瀏覽器(如極舊版的 IE)的顯示來源。別忘了替換為實際檔案名稱,並將 alt 屬性填上適當的圖片描述。

如需同時提供 PNG 後備(例如圖片有透明背景,需要 PNG 以保留透明),可以在 picture 中再加入一個 type="image/png" 的 source,順序可放在 JPEG 之前或之後依需求。總之,picture 是非常強大的元素,可讓開發者靈活定義不同格式甚至不同情境(如裝置寬度)下使用不同圖片,是現代響應式圖片方案的核心。

除了 img,許多時候我們會用 CSS 背景圖來呈現裝飾性或版面上的圖片元素。以下範例展示如何在 CSS 中使用 background-image 屬性加入圖片,以及相關的樣式調整:

上述 CSS 會將類別為 .header 的元素套用一張名為 header-bg.webp 的背景圖片。background-repeat: no-repeat 確保圖片不重複平鋪;background-position: center center 讓圖片在容器中置中對齊;background-size: cover 使背景圖等比縮放覆蓋容器整個區域(超出部分自動裁切),適合用於橫幅或全寬背景。

如果需要支援 Retina 或不同裝置,可以考慮用多組媒體查詢或 image-set() 來提供不同解析度或格式的背景圖。例如:

這段 image-set 示範會在一般螢幕用 1x 的 PNG,在高 DPI 螢幕用 2x 版本的 PNG。但須注意 image-set() 的相容性與瀏覽器支援。您也可以採用前述使用 @supports 或條件註冊的方式提供 WebP 背景圖。總之,CSS 背景圖的使用相當直覺,記得根據排版需求調整好對齊和填充方式即可。

SVG 圖片可以透過 img 引用外部檔案,也可以直接將 SVG 原始碼插入到 HTML 結構中,稱為 inline SVG。內嵌 SVG 的好處是可以直接透過 CSS/JS 操作裡面的元素,例如改變顏色、添加動畫等。以下提供一個簡單的 inline SVG 範例,在網頁中畫出一個圓形圖案:

以上程式碼放在網頁的 HTML 中(例如 body 裡任意需要的位置)就會呈現一個藍色圓形圖案。svg 標籤的 width、height 屬性設定顯示尺寸(100px x 100px),viewBox="0 0 100 100" 定義繪製的座標系統大小,xmlns 則是 SVG 必需的命名空間宣告。接著 circle 元素表示一個圓形,cx/cy 指定圓心座標,r 是半徑,fill 給定填充色為藍色(使用十六進位色碼)。

您可以將上述程式碼直接貼入 HTML 查看效果。由於是向量圖形,無論我們把寬高改成多少,圓形都會保持清晰。不像位圖會失真模糊,SVG 繪製的圖形在任何尺寸下都品質如一。開發者也能很方便地用 CSS 控制這個 circle,例如給它加上 stroke(描邊)樣式,甚至用動畫讓它縮放或改變顏色。內嵌 SVG 為網頁提供了極大的繪圖靈活性。

以上三個範例展示了在實戰中運用不同格式圖片的方法:利用 picture 實現多格式相容,加強 img 的威力;使用 CSS 背景圖做視覺呈現;以及內嵌 SVG 來生成高解析度的圖形元素。開發者可以根據自身專案需求,靈活運用這些技巧,既充分利用各格式優點,又保持良好的程式碼組織和相容性。