回應式圖片

網頁上的文字會自動在螢幕邊緣換行，不會溢出畫面。圖片則有內建大小。如果圖片寬度大於螢幕，圖片就會溢位，使用者必須水平捲動才能看到完整圖片。

幸好，CSS 提供了相關工具，可避免這種情況發生。

限制圖片

您可以在 CSS 樣式表中使用 max-inline-size，宣告圖片的算繪大小絕不會超過其所含元素。

img {
  max-inline-size: 100%;
  block-size: auto;
}

您也可以對其他類型的內嵌內容套用相同規則，例如影片和 iframe。

img,
video,
iframe {
  max-inline-size: 100%;
  block-size: auto;
}

設定這項規則後，瀏覽器會自動縮小圖片，以符合螢幕大小。

新增 block-size auto 值表示瀏覽器會在調整圖片大小時保留圖片的顯示比例。

有時，圖片的尺寸是由內容管理系統 (CMS) 或其他內容傳遞系統設定。如果設計需要使用與 CMS 預設值不同的長寬比，可以使用 aspect-ratio 屬性保留網站設計：

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
}

很遺憾，這通常表示瀏覽器必須壓縮或延展圖片，才能將圖片放入預期空間。

如要避免擠壓和延展，請使用 object-fit 屬性。

object-fit 值為 contain 時，瀏覽器會保留圖片的顯示比例，並視需要留空圖片周圍的空間。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: contain;
}

object-fit 值為 cover 時，瀏覽器會保留圖片的長寬比，並視需要裁剪圖片。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}

你可以使用 object-position 屬性變更圖片裁剪位置。這會調整裁剪的焦點，確保圖片最重要的部分仍可見。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}

提供圖片

這些 CSS 規則會告訴瀏覽器您希望圖片的算繪方式。您也可以在 HTML 中提供提示，說明瀏覽器應如何處理這些圖片。

尺寸挑選提示

如果知道圖片尺寸，請務必加入 width 和 height 屬性。即使圖片因 max-inline-size 規則而以不同大小算繪，瀏覽器仍會知道寬高比，並預留適當空間。這樣圖片載入時，其他內容才不會跳動。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
>

載入提示

使用 loading 屬性，指示瀏覽器是否要延遲載入圖片，直到圖片進入或靠近可視區域為止。如為需捲動位置的圖片，請使用 lazy 值。瀏覽器不會載入延遲載入的圖片，直到使用者捲動到圖片即將顯示的位置為止。如果使用者從未捲動，圖片就不會載入。

<img
 src="image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
>

如要使用不需捲動位置的主頁橫幅，請勿使用 loading。如果網站會自動套用 loading="lazy" 屬性，通常可以將 loading 設為 eager 的預設值，避免圖片延遲載入：

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
>

擷取優先順序

如果是重要圖片 (例如 LCP 圖片)，您可以進一步使用 Fetch Priority 優先載入，方法是將 fetchpriority 屬性設為 high：

<img
 src="hero.jpg"
 alt="A description of the image."
 width="1200"
 height="800"
 loading="eager"
 fetchpriority="high"
>

這會告知瀏覽器立即以高優先順序擷取圖片，而不是等到瀏覽器完成版面配置，才正常擷取圖片。

不過，當您要求瀏覽器優先下載某項資源 (例如圖片) 時，瀏覽器就必須降低其他資源 (例如指令碼或字型檔案) 的優先順序。只有在圖片確實至關重要時，才為圖片設定 fetchpriority="high"。

預先載入提示

建議您盡量避免預先載入，方法是在初始 HTML 檔案中加入所有圖片。不過，部分圖片可能無法使用，例如透過 JavaScript 或 CSS 背景圖片新增的圖片。

您可以預先載入這些重要圖片，讓瀏覽器提前擷取。如要預先載入非常重要的圖片，可以將這項預先載入功能與 fetchpriority 屬性搭配使用：

<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">

再次提醒，請盡量少用這些屬性，以免過於頻繁地覆寫瀏覽器的優先順序啟發式演算法。過度使用這些功能可能會導致效能下降。

部分瀏覽器支援根據 srcset 預先載入回應式圖片，方法是使用 imagesrcset 和 imagesizes 屬性。例如：

<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">

排除 href 後備選項，即可確保不支援 srcset 的瀏覽器仍會預先載入正確的圖片。

您無法根據瀏覽器對特定格式的支援情況，預先載入不同格式的圖片。嘗試這麼做可能會導致額外下載，浪費使用者資料。

使用 srcset 的回應式圖片

有了這項 max-inline-size: 100% 宣告，圖片就不會超出容器範圍。不過，如果使用者螢幕較小，且網路頻寬較低，讓他們下載與大螢幕使用者相同大小的圖片，會浪費資料。

如要修正這個問題，請新增多個大小不同的相同圖片，並使用 srcset 屬性告知瀏覽器這些大小的圖片存在，以及何時使用。

寬度描述元

您可以使用以逗號分隔的清單定義 srcset。每個值都是圖片的網址，後面接著空格，然後是圖片的一些中繼資料，稱為「描述元」。

在這個範例中，中繼資料會使用 w 單位說明每張圖片的寬度。一個 w 等於一個像素的寬度。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
>

srcset 屬性是 src 屬性的輔助屬性，而非取代屬性。 您仍須具備有效的 src 屬性，但瀏覽器可將其值替換為 srcset 中列出的其中一個選項。為節省頻寬，瀏覽器只會在需要時下載較大的圖片。

大小

如果使用寬度描述元，也必須使用 sizes 屬性，為瀏覽器提供更多資訊。這會告知瀏覽器在不同情況下，您預期圖片顯示的大小。這些條件是在媒體查詢中指定。

sizes 屬性會採用以半形逗號分隔的媒體查詢和圖片寬度清單。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 300w,
  medium-image.png 600w,
  large-image.png 1200w"
 sizes="(min-width: 66em) 33vw,
  (min-width: 44em) 50vw,
  100vw"
>

在這個範例中，您是告訴瀏覽器，在寬度超過 66em 的檢視區塊中，顯示的圖片寬度不應超過螢幕的三分之一 (例如在三欄式版面配置中)。

如果檢視區塊寬度介於 44em 和 66em 之間，請以螢幕寬度的一半顯示圖片 (如雙欄版面配置)。

如果寬度小於 44em，請以全螢幕寬度顯示圖片。

也就是說，最大的圖片不一定會用於最寬的螢幕。如果瀏覽器視窗夠寬，可顯示多欄版面配置，則會使用適合單欄的圖片，這類圖片可能比窄螢幕上單欄版面配置使用的圖片小。

像素密度描述元

您也可以使用描述元，為高畫質螢幕提供圖片的替代版本，確保圖片在高解析度下仍清晰銳利。

使用密度描述元描述圖片的像素密度，與 src 屬性中的圖片相關。密度描述元是數字後接字母 x，例如 1x 或 2x。

<img
 src="small-image.png"
 alt="A description of the image."
 width="300"
 height="200"
 loading="lazy"
 decoding="async"
 srcset="small-image.png 1x,
  medium-image.png 2x,
  large-image.png 3x"
>

如果 small-image.png 的大小為 300 x 200 像素，而 medium-image.png 的大小為 600 x 400 像素，則 medium-image.png 可以有 2x (srcset 清單中的後續項目)。

你不一定要使用整數。如果圖片的另一個版本大小為 450x300 像素，則可以使用 1.5x 描述。

簡報圖片

HTML 中的圖片屬於內容，因此，您會加入 alt 屬性，並提供圖片說明，供螢幕閱讀器和搜尋引擎使用。

如果嵌入的圖片僅供裝飾，沒有任何有意義的內容，可以使用空白的 alt 屬性。

<img
 src="flourish.png"
 alt=""
 width="400"
 height="50"
>

即使 alt 屬性為空白，也必須一律加入。空白的 alt 屬性會告知螢幕閱讀器圖片為呈現用途。缺少 alt 屬性就無法提供這類資訊。

理想情況下，呈現或裝飾圖片會連同 CSS 一起納入，而非 HTML。HTML 用於結構，CSS 用於呈現內容。

背景圖片

在 CSS 中使用 background-image 屬性載入呈現圖片。

element {
  background-image: url(flourish.png);
}

您可以使用 background-image 的 image-set 函式指定多個候選圖片。

CSS 中的 image-set 函式與 HTML 中的 srcset 屬性非常相似。 提供圖片清單，並為每張圖片加上像素密度描述元。

element {
  background-image: image-set(
    small-image.png 1x,
    medium-image.png 2x,
    large-image.png 3x
  );
}

瀏覽器會根據裝置的像素密度選擇最合適的圖片。

在網站中加入圖片時，需要考量許多因素，包括：

• 為每張圖片預留適當空間。
• 計算所需大小數量。
• 決定圖片是內容還是裝飾。

因此花時間調整圖片是值得的。圖片策略不佳可能會讓使用者感到惱怒和沮喪。無論使用者使用哪種裝置或網路連線，良好的圖片策略都能讓網站感覺快速且清晰。

工具包中還有一個 HTML 元素，可讓您進一步控管圖片：picture 元素。

隨堂測驗

測試你對圖片的瞭解程度。