響應式圖片設計指南：讓圖片完美適應各種螢幕

2026 年 3 月 · 閱讀時間約 7 分鐘

在行動優先的時代，使用者透過各種不同尺寸的裝置瀏覽網頁。如果你為桌面版設計了一張 2000px 寬的大圖，卻讓手機使用者也下載同樣的檔案，不僅浪費頻寬，更會嚴重拖慢頁面載入速度。響應式圖片技術正是解決這個問題的關鍵。

為什麼需要響應式圖片？

根據 HTTP Archive 的數據，圖片平均佔據網頁總大小的 40% 以上。如果不使用響應式圖片技術，會造成以下問題：

頻寬浪費 — 小螢幕裝置下載了過大的圖片
載入速度變慢 — 直接影響使用者體驗與 SEO
流量成本增加 — 使用者的行動數據被不必要地消耗
Core Web Vitals 分數下降 — LCP（最大內容繪製）表現不佳

srcset 屬性：根據螢幕寬度提供不同尺寸

srcset 屬性讓你為同一張圖片提供多個尺寸版本，瀏覽器會根據裝置的螢幕寬度和像素密度自動選擇最合適的版本：

<img
  src="photo-800.jpg"
  srcset="photo-400.jpg 400w,
          photo-800.jpg 800w,
          photo-1200.jpg 1200w,
          photo-1600.jpg 1600w"
  sizes="(max-width: 600px) 100vw,
         (max-width: 1024px) 50vw,
         800px"
  alt="示範圖片">

srcset 中的描述符

描述符	意義	範例
`w` 描述符	圖片的實際寬度（像素）	`photo-800.jpg 800w`
`x` 描述符	像素密度比率	`photo@2x.jpg 2x`

sizes 屬性：告訴瀏覽器圖片的顯示寬度

sizes 屬性使用媒體查詢語法，告訴瀏覽器在不同視窗寬度下，圖片將佔多少寬度。瀏覽器會結合 srcset 和 sizes 來決定要下載哪個版本。

重點摘要：srcset 提供候選圖片清單，sizes 描述圖片的顯示大小，瀏覽器根據這兩者自動選擇最佳圖片。開發者無需手動判斷裝置類型。

picture 元素：更精細的控制

當你需要根據不同情境載入完全不同的圖片（例如在手機上顯示裁切過的版本），<picture> 元素提供了更強大的控制能力：

<picture>
  <source media="(max-width: 600px)"
          srcset="photo-mobile.jpg">
  <source media="(max-width: 1024px)"
          srcset="photo-tablet.jpg">
  <img src="photo-desktop.jpg"
       alt="示範圖片">
</picture>

picture 的常見用途

藝術指導（Art Direction） — 不同螢幕使用不同構圖的圖片
格式降級 — 優先使用 WebP/AVIF，不支援時退回 JPG
深色模式 — 根據使用者偏好載入不同色調的圖片

常見斷點建議

裝置類型	寬度範圍	建議圖片寬度
手機（直式）	320 - 480px	400px
手機（橫式）/ 小平板	481 - 768px	800px
平板 / 小筆電	769 - 1024px	1200px
桌上型電腦	1025px 以上	1600px

效能最佳化技巧

1. 使用 loading="lazy"

對於不在首屏的圖片，加上 loading="lazy" 屬性，讓瀏覽器在使用者捲動到附近時才載入圖片。

2. 設定正確的寬高

在 <img> 標籤上指定 width 和 height，避免版面位移（CLS）。

3. 搭配現代圖片格式

結合 <picture> 和 WebP/AVIF 格式，在響應式的基礎上進一步縮小檔案大小。

4. 使用 CDN 和圖片服務

透過圖片 CDN（如 Cloudflare Images、Imgix）可以自動生成不同尺寸的圖片，簡化開發流程。

立即使用圖片縮放工具 →

結語

響應式圖片不是可選功能，而是現代網頁開發的必備技術。透過 srcset、sizes 和 <picture> 元素，你可以確保每個使用者都能獲得最佳的圖片體驗，同時維持優秀的網頁效能。

參考文獻

W3C. "HTML Standard — Embedded Content: The img element." W3C HTML Living Standard, 2025. https://html.spec.whatwg.org/multipage/embedded-content.html#the-img-element
MDN Web Docs. "Responsive images." Mozilla Developer Network, 2025. https://developer.mozilla.org/en-US/docs/Learn/HTML/Multimedia_and_embedding/Responsive_images
Google Developers. "Serve responsive images." web.dev, 2024. https://web.dev/articles/serve-responsive-images
Addy Osmani. "Image Optimization." web.dev, 2023. https://web.dev/articles/image-optimization