🔧 阿川の電商水電行

Shopify 顧問、維護與客製化

💡

小任務 / 單次支援方案

單次處理 Shopify 修正／微調

⭐️

維護方案

每月 Shopify 技術支援 + 小修改 + 諮詢

🚀

專案建置

Shopify 功能導入、培訓 + 分階段交付

👉 瞭解詳情 / 免費諮詢

小編精選 - 技術文章翻譯 · 12月02日

圖片標籤用 img 還是 picture？很多人徹底搞混了！

圖片標籤用 img 還是 picture？很多人徹底弄混了！

在網頁開發中，圖片處理是每個前端開發者都會遇到的基礎任務。面對 img 和 picture 這兩個標籤，很多人存在誤解：要麼認為它們是互相替代的關係，要麼在不合適的場景下使用了複雜的解決方案。今天，我們來徹底理清這兩個標籤的真正用途。

`img` 標籤

img 是 HTML 中最基礎且強大的圖片標籤，但它遠比很多人想像的要智能。

基本語法：

<img src="image.jpg" alt="圖片描述">

核心屬性：

src：圖片路徑（必需）
alt：替代文本（無障礙必需）
srcset：提供多分辨率圖片源
sizes：定義圖片顯示尺寸
loading：懶加載控制

`img` 的響應式能力被低估了

很多人認為 img 不具備響應式能力，這是錯誤的認知：

<img src="image-800w.jpg"
     srcset="image-320w.jpg 320w,
             image-480w.jpg 480w,
             image-800w.jpg 800w"
     sizes="(max-width: 600px) 100vw,
            (max-width: 1200px) 50vw,
            33vw"
     alt="響應式圖片示例">

這種寫法的優勢：

瀏覽器自動選擇最適合當前螢幕分辨率的圖片
根據視口大小動態調整加載的圖片尺寸
代碼簡潔，性能優秀

`picture` 標籤

picture 不是為了替代 img，而是為了解決 img 無法處理的特定場景。

`picture` 解決的三大核心問題

1. 藝術指導（Art Direction）
在不同設備上顯示不同構圖或裁剪的圖片：

<picture>
  <!-- 桌面端：寬屏全景 -->
  <source media="(min-width: 1200px)" srcset="hero-desktop.jpg">
  <!-- 平板端：適中裁剪 -->
  <source media="(min-width: 768px)" srcset="hero-tablet.jpg">
  <!-- 移動端：豎版特寫 -->
  <img src="hero-mobile.jpg" alt="產品展示">
</picture>

2. 現代格式降級
優先使用高效格式，同時兼容舊版瀏覽器：

<picture>
  <source type="image/avif" srcset="image.avif">
  <source type="image/webp" srcset="image.webp">
  <img src="image.jpg" alt="格式優化示例">
</picture>

3. 複雜條件組合
同時考慮螢幕尺寸和圖片格式：

<picture>
  <!-- 大螢幕 + AVIF -->
  <source media="(min-width: 1200px)" type="image/avif" srcset="large.avif">
  <!-- 大螢幕 + WebP -->
  <source media="(min-width: 1200px)" type="image/webp" srcset="large.webp">
  <!-- 大螢幕降級 -->
  <source media="(min-width: 1200px)" srcset="large.jpg">
  <!-- 移動端方案 -->
  <img src="small.jpg" alt="複雜條件圖片">
</picture>

關鍵區別與選擇指南

場景	推薦方案	原因
同一圖片，不同分辨率	`img` + `srcset` + `sizes`	代碼簡潔，瀏覽器自動優化
不同構圖或裁剪	`picture`	藝術指導必需
現代格式兼容	`picture`	格式降級必需
簡單靜態圖片	`img`	無需複雜功能
兼容舊版瀏覽器	`img`	最廣泛支持

常見誤區糾正

誤區一：picture 用於響應式圖片

事實： img 配合 srcset 和 sizes 已經能處理大多數響應式需求
真相： picture 主要用於藝術指導和格式降級

誤區二：picture 更現代，應該優先使用

事實： 在不需要藝術指導或格式降級的場景下，img 是更好的選擇
真相： 合適的工具用在合適的場景才是最佳實踐

誤區三：響應式圖片一定要用 picture

事實： 很多響應式場景用 img + srcset 更合適
真相： 評估需求，選擇最簡單的解決方案

場景分析

應該使用 `img` 的場景

網站Logo：

<img src="logo.svg" alt="公司Logo" width="120" height="60">

用戶頭像：

<img src="avatar.jpg"
     srcset="avatar.jpg 1x, [email protected] 2x"
     alt="用戶頭像" width="80" height="80">

文章配圖：

<img src="article-image.jpg"
     srcset="article-image-600w.jpg 600w,
             article-image-1200w.jpg 1200w"
     sizes="(max-width: 768px) 100vw, 600px"
     alt="文章插圖" loading="lazy">

應該使用 `picture` 的場景

英雄橫幅（不同裁剪）：

<picture>
  <source media="(min-width: 1024px)" srcset="hero-wide.jpg">
  <source media="(min-width: 768px)" srcset="hero-square.jpg">
  <img src="hero-mobile.jpg" alt="產品橫幅" loading="eager">
</picture>

產品展示（格式優化）：

<picture>
  <source type="image/avif" srcset="product.avif">
  <source type="image/webp" srcset="product.webp">
  <img src="product.jpg" alt="產品詳情" loading="lazy">
</picture>

最佳實踐

1. 始終遵循的規則

<!-- 正確：始終提供 alt 屬性 -->
<img src="photo.jpg" alt="描述文本">

<!-- 錯誤：缺少 alt 屬性 -->
<img src="photo.jpg">

<!-- 裝飾性圖片使用空 alt -->
<img src="decoration.jpg" alt="">

2. 性能優化策略

<!-- 優先加載關鍵圖片 -->
<img src="hero.jpg" alt="重要圖片" loading="eager" fetchpriority="high">

<!-- 非關鍵圖片延遲加載 -->
<img src="content-image.jpg" alt="內容圖片" loading="lazy">

<!-- 指定尺寸避免佈局偏移 -->
<img src="product.jpg" alt="商品" width="400" height="300">

3. 現代圖片格式策略

<picture>
  <!-- 優先使用AVIF，壓縮率最高 -->
  <source type="image/avif" srcset="image.avif">
  <!-- 其次WebP，廣泛支持 -->
  <source type="image/webp" srcset="image.webp">
  <!-- 最終回退到JPEG -->
  <img src="image.jpg" alt="現代格式示例">
</picture>