使用 <picture> 與 srcset 打造高效 RWD 圖片

在現代網頁開發中,圖片經常佔據頁面載入量的大宗,因此如何有效地提供「響應式 (Responsive Web Design, RWD) 圖片」成為前端優化的重要課題。

響應式圖片可以根據使用者裝置的螢幕尺寸與解析度,智慧地載入最適合的圖檔,避免在行動裝置上下載過大的圖片,也能在高解析度螢幕(如 Retina 顯示)上提供清晰的圖像。為達成這個目標,HTML 提供了 <picture> 元素以及 srcset 和 sizes 等屬性,讓我們得以為不同情境定義替代的圖片來源。透過善用這些技術,搭配現代高效能的圖片格式(如 WebP、AVIF),可以大幅節省頻寬並加快頁面載入速度。

本文將以實務角度介紹如何使用 <picture> 元素與 srcset/sizes 屬性來實作 RWD 圖片。內容涵蓋多種操作範例,包括針對高 DPI 螢幕提供@2x圖、使用不同螢幕尺寸載入不同構圖的圖片,以及提供 WebP/AVIF 圖片格式的漸進增強。每個重點皆附有可直接複製的範例代碼,並提供實際建議與應用情境。最後,我們還會準備常見問題的問與答 (Q&A) 單元,解答在實作響應式圖片時可能遇到的疑問。

不同使用者的裝置有著多樣的螢幕特性:從小尺寸的手機到高解析度的桌機螢幕,傳統上若只提供一張固定尺寸的圖片,很可能在某些情境下不是太大就是太小。例如,一張1920px寬的橫幅圖,如果在手機上完整下載,不但浪費行動網路的頻寬,還可能因為縮放過小而細節模糊;相反地,一張適合手機的小圖在4K桌機螢幕上又會顯得失真。響應式圖片的概念就是為了解決這種一圖難全的問題——我們預先準備好不同尺寸或不同版本的圖像,讓瀏覽器按照裝置條件自動挑選最合適的那一個。

使用 <picture> 與 srcset 等技術有多項明顯的優勢:

簡而言之,響應式圖片能依據使用者環境動態選圖,提升體驗與效能。在下文中,我們將詳細說明如何使用 HTML 語法達成上述目標。

在討論進階的響應式圖片語法之前,先回顧基本的 <img> 用法。一般而言,在HTML中插入圖片只需使用 <img> 標籤搭配必要的屬性:

上述範例中,src 指定圖片檔案路徑,alt 則提供圖片的替代文字說明(以利無法視覺瀏覽時的輔助工具使用)。然而,這種方式對所有裝置皆提供同一張圖,無法根據螢幕大小或解析度調整,可能導致某些裝置下載了不必要的大圖或顯示模糊的小圖。

為了改善這點,HTML5 引入了 srcset 屬性和相關機制。我們可以在 <img> 中加入 srcset,提供多種解析度或尺寸的圖檔清單,讓瀏覽器自動選擇合適的檔案載入。以下章節將介紹如何使用 srcset 提供不同解析度的圖片,以及如何搭配 sizes 屬性優化對不同版面尺寸的支援。

(另外,建議在所有圖片上加上寬度和高度屬性(如 width、height),以提前告知瀏覽器圖片尺寸,避免載入期間版面跳動。這對提升累積版面位移(CLS)等效能指標很有幫助。)

裝置像素比 (Device Pixel Ratio, DPR) 指的是螢幕單位邏輯像素由多少物理像素點構成。例如一般桌機或非Retina螢幕的 DPR = 1,表示1個CSS像素等於1個實體像素點;而某些高解析度手機的 DPR = 3,代表1個CSS像素需要3×3的實體像素點來顯示。因此,在高 DPR 的裝置上,如果仍然使用原尺寸的圖片,顯示時就會被「放大」而顯得模糊。為了解決這個問題,我們可以提供更高解析度(更大像素尺寸)的圖檔給高DPR裝置,讓顯示效果維持銳利。

srcset 屬性的一種用法,就是利用「像素密度描述詞」(x-descriptor)來列出不同解析度的圖片版本。例如,下方程式碼示範了一個 avatar 頭像在一般和 Retina 螢幕下載入不同圖檔:

在這個範例中,我們準備了三張正方形圖片:avatar@1x.webp 為基礎的 64×64 像素圖,avatar@2x.webp 為 128×128 像素,avatar@3x.webp 為 192×192 像素。HTML中透過 srcset 列出各檔案及其對應的像素密度(1x, 2x, 3x)。瀏覽器將根據裝置的 DPR 自動挑選最合適的圖檔載入。例如:

需要注意的是,在 srcset 屬性中不可同時混用 x 描述詞和 w 描述詞(接下節將介紹何為 w 描述詞),否則瀏覽器將無法解析而忽略整個 srcset。在上述範例中我們純粹使用了 x 描述詞。由於我們也提供了 src="avatar@1x.webp" 作為預設圖片,即使遇到不支援 srcset 的舊瀏覽器(例如 IE11),也至少會載入 avatar@1x.webp 來作為後備顯示。

透過這種方式,我們僅用一行HTML就實現了不同解析度裝置載入不同圖檔,無需撰寫額外的CSS或JavaScript邏輯。當有新的高解析度裝置問世時,只要其瀏覽器支援 srcset,這種設計也能自動適用。接下來,我們將探討另一種情況:當圖片在不同裝置上呈現的版面尺寸也不相同時,如何使用 srcset 搭配 sizes 來進一步優化。

上述 srcset 僅考慮了裝置像素比,但在RWD版面中,圖片本身顯示的大小也可能隨螢幕寬度而改變。例如,一張新聞內文的圖片在桌面設備上也許佔據容器的800px寬度,但在手機上可能縮減為400px寬度。若我們一律提供桌面用的800px大圖,手機用戶就下載了超出實際需要尺寸的圖檔,造成浪費。相反地,只提供小圖又無法滿足大螢幕的清晰度需求。

為了解決不同螢幕尺寸下的圖片大小問題,srcset 的另一用法是寬度描述詞(w-descriptor)。我們可以在 srcset 列出多個不同實體寬度的圖片,並透過 sizes 屬性告知瀏覽器各種視窗大小下圖片預計會呈現的顯示寬度。瀏覽器會在尚未下載圖片前,先根據 sizes 計算出圖片的預期顯示尺寸,再從 srcset 中選擇最接近該尺寸的圖檔載入。

假設有一張橫向的風景照片,我們希望在小螢幕上以較小尺寸顯示、在大螢幕上以較大尺寸顯示。我們準備了三個尺寸的圖檔:小 (480w)、中 (800w)、大 (1200w)。以下是HTML實作:

說明:

瀏覽器解析上述屬性時的行為如下:

透過上述機制,裝置最終只會下載一張最適合其需求的圖片,不會像傳統做法那樣「一網打盡」把所有圖都載入。例如在小螢幕手機上,只會下載 480w 的圖,而較大的 800w、1200w 圖片都不會被載入,達到節省流量的效果。

透過 srcset + sizes,我們實現了根據版面需要載入不同大小的圖檔。這在響應式版型中非常常見,例如橫幅圖在行動裝置上縮小顯示、在桌機上放大顯示,都能靠此機制自動優化。不僅節省行動端的流量,也確保大螢幕有足夠解析度的圖可以看清細節。

單靠 <img> 搭配 srcset/sizes 已能涵蓋許多情境,但當我們遇到更複雜的需求時,HTML 的 <picture> 元素提供了更強大的彈性。<picture> 容器內可以包含多個 <source> 子元素,每個 <source> 定義了一種替代的圖片資源及其條件(例如適用的媒體條件或格式類型),最後再以一個 <img> 作為預設的後備內容。瀏覽器會依序評估 <source> 列表,選擇最符合條件且瀏覽器支援的第一個圖片來源載入;如果沒有任何 <source> 符合(或瀏覽器不支援 <picture> 元素),則會退而使用 <img> 標籤中指定的 src 圖片。這種結構允許我們實現下列兩種主要功能:

接下來我們透過兩個範例,說明 <picture> 元素的用法。

想像一個情境:我們的網站橫幅圖在桌機版希望展示全景寬闊的視野,但在手機狹窄螢幕上,由於空間有限也許需要裁剪圖片聚焦於主體。為達成藝術指引的效果,我們可以為兩種裝置準備不同的圖片,並利用 <picture> 的 <source media> 屬性根據視窗寬度加以切換:

在此範例中,我們提供了banner-wide.webp(適合大螢幕的寬圖)以及banner-mobile.webp(為小螢幕優化的圖)。瀏覽器會根據當前視窗大小,套用對應的媒體條件:

透過這種做法,我們可以針對不同裝置提供構圖完全不同的圖像,而非僅僅縮放同一張圖。需要注意,這種情境已超出了 srcset+sizes 的能力範圍——因為 sizes 只能告訴瀏覽器最終顯示寬度,無法解決「不同裝置需要不同照片內容」的問題。<picture> 則透過多組 <source> 來源突破了單一圖片的限制,讓開發者能充分掌控在各情境下呈現的圖像。

另一個常見需求是使用次世代圖片格式來縮減檔案體積。WebP 和 AVIF 等格式能顯著減少文件大小(例如 WebP 比 JPEG 平均小25~35%;AVIF 比 JPEG 小約50%),然而並非所有瀏覽器都支援它們。為了兼容性,我們可以使用 <picture> 元素同時提供多個格式版本的圖檔,讓瀏覽器自動挑選支援的格式載入,不支援時再用後備格式。範例如下:

上述程式碼中,瀏覽器會依序檢查各 <source>:

這樣的結構確保了在支援新格式的環境下用戶獲得最佳效能(檔案更小、載入更快),而在舊環境下仍有相容的內容。由於 AVIF 支援直到近年才陸續在各大瀏覽器實裝完成,我們強烈建議在使用 AVIF 時務必提供後備(如 WebP 或 JPEG)。好消息是,現今Chrome、Firefox、Safari、Edge等主流瀏覽器皆已支援 WebP 和 AVIF,使用 <picture> 可以放心地進行漸進增強。而對於完全不識別 <picture>/<source> 的極少數老舊瀏覽器,仍會直接解析 <img> 來顯示 JPEG 圖,不至於一張圖都出不來。

Tip: <source> 元素也能與 media 屬性和 type 屬性結合,這意味著我們可以針對不同裝置情境提供不同格式的圖。例如,你可以提供「行動版 WebP」和「桌機版 WebP」各自對應不同裁切的圖,再分別搭配對應的 JPEG 後備。不過在實務上,通常會以格式為主做區分,而在各格式中都保持相同構圖;若需要同時處理格式與構圖差異,可以將 <picture> 的結構進一步細分成多組 <source> 作條件判斷,但要注意避免過於複雜難以維護。

運用 srcset/sizes 以及 <picture> 後,我們已經能大幅改善圖片在各種裝置上的載入效能與呈現效果。但要充分發揮它們的效益,還有一些實務上的最佳做法與測試方法值得注意:

完成開發後,務必在多種裝置和瀏覽器上測試圖片行為。以下是幾個重點:

根據目前的數據,<picture> 元素和 srcset 屬性在全球約96%的用戶端瀏覽器上都被完整支援。除了已經淘汰的 IE 瀏覽器系列(IE11 及更舊版本並不支援這些特性)以及極少數舊版或特殊瀏覽器,大多數情況下不需要額外的 polyfill 就能直接使用。如果你的專案仍需要照顧不支援的瀏覽器,有幾種策略可以考慮:

總之,在現代的開發環境裡,我們可以大膽地使用 <picture> 與 srcset 來優化圖片。妥善的實作不僅能提升用戶體驗,還對網站SEO與流量成本有正面幫助。建議將響應式圖片納入開發流程的標準考量,並持續關注新格式與瀏覽器支援動態,保持最佳的圖片效能表現。

問:是否所有圖片都應該使用 <picture> 或 srcset?

答:不見得,需要視情境而定。如果一張圖片在不同裝置上顯示尺寸相差無幾,而且對清晰度要求不高,使用單一圖檔即可,無需額外的響應式處理。相反地,如果圖片對效能影響大(例如橫幅、大圖)或在Retina螢幕上模糊明顯,則非常建議使用 srcset 或 <picture> 來優化。一般而言,英雄圖、橫幅圖、產品照片等關鍵圖片最值得響應式處理;而一些小icon、小圖如果已經很小,透過CSS縮放即可,也可不必多此一舉產生多種版本。

問:srcset 裡的 x 和 w 描述值可以混用嗎?

答:不能。在同一個 srcset 屬性中,同時出現像素密度描述(例如 2x)和寬度描述(例如 800w)會讓瀏覽器無法解析正確意圖。正確的做法是針對同一組圖片選擇一種描述方式:如果你的各版本圖片在畫面內容相同但解析度不同,使用 x 描述詞;如果是尺寸不同(為配合版面大小),使用 w 描述詞並搭配 sizes。若兩種情況都需要(例如既要考慮Retina又要考慮不同裝置寬度),可以將兩者結合在 <picture> 的不同 <source> 中分別處理。

問:如果瀏覽器不支援我提供的某種圖片格式會怎樣?

答:這正是 <picture>+<source> 組合大顯身手之處。我們可以在 <source> 標示每個圖片來源的格式 (type)。瀏覽器在解析時會跳過不支援格式的來源,選擇下一個符合的。最終 <img> 的 src 會做為後備。例如你提供 AVIF 和 WebP,若使用者瀏覽器僅支援WebP則自動挑WebP,不支援兩者則用回JPEG。因此不需要額外的程式判斷。開發者所要做的就是確保按照新格式→舊格式的順序列出 <source>,並在 <img> 提供通用格式。特別注意的是,有些舊瀏覽器(如IE)壓根不認得 <picture> 元素,所幸它們仍會直接處理 <img>,因此只要你的 <img> 指向能用的圖檔,至少不會空白。

問:使用 <picture>/srcset 會不會讓瀏覽器下載很多不必要的圖片?

答:正常情況下不會。瀏覽器根據條件只會下載它選定要顯示的那一個圖檔,而不會同時把所有備選圖片都抓下來。例如符合480px條件時就只拿對應檔,800px和1200px的圖都不會請求。除非你的程式碼寫錯(例如沒有 media 條件導致多個 <source> 都符合,或者某些怪異的情況),一般不必擔心多載流量。相反地,它能有效避免以往那種先載入小圖再載入大圖的冗餘。當然,在網路不佳或某些極端狀況下,瀏覽器可能先載小圖預覽再換大圖(例如CSS background的 image-set 行為),但對於 <img>/<picture> 這套機制是一次選定一張的。

問:sizes 屬性為什麼需要手動寫?不能直接用CSS的寬度嗎?

答:這是很多開發者初學響應式圖片時的疑惑。簡單說,由於瀏覽器在決定下載哪張 srcset 圖片時,HTML和CSS的解析時序不同,它無法確定圖片元素最終在畫面上的大小(來自CSS)。sizes 提供了一種讓我們預先以HTML屬性告訴瀏覽器「這張圖在不同情況下大概會多寬」的方法,使瀏覽器不用等整個CSS計算完成就能做出下載決策。因此儘管這造成一些重複(我們的CSS佈局已經定義了圖片大小,還要再寫一次 sizes),但目前是讓瀏覽器提前選圖的必要手段。你可以把 sizes 想成是對瀏覽器的承諾:「放心去挑圖吧,這張圖片在 X 條件下大約就是 Y 寬。」 瀏覽器據此挑選最佳資源,等實際CSS應用後一般都能吻合。如果布局真的比較複雜難以預測,可以退而求其次給個保守值或乾脆讓它100vw滿版,但理想情況是精確提供預估值,才能發揮 srcset 的最大效益。

問:還需要為 IE11 等老瀏覽器做特殊處理嗎?

答:依照現今趨勢,大部分網站已經不再支援 IE11。如果你的用戶群中極少人使用不支援 <picture>/srcset 的瀏覽器,那麼可以不額外處理,讓他們退化到加載 <img> 的單一圖即可(可能是手機版的圖)。若你真的需要支援 IE,可以考慮引入開源的 Picturefill 腳本,它能模擬 srcset 與 <picture> 的行為。在極端情況下,也可以在後端偵測User-Agent動態輸出不同的 <img>,但這通常不值得。總之,對於現代Web開發,我們傾向於向前看——利用好新的特性提高大多數用戶的體驗,同時提供合理的後備,不讓極少數老舊客戶端完全破版。畢竟連微軟官方都已在 2022 年正式終止IE瀏覽器的支援了。

以上Q&A希望解答了一些在實作響應式圖片過程中的典型問題。如果還有其他疑慮,建議參考MDN等文件以獲取更詳細的說明,以及持續關注瀏覽器的新功能(例如未來可能會有更簡化的語法或更強大的圖片處理特性)。祝各位在專案中順利打造出高效又靈活的RWD圖片方案!