回應式圖片

網頁上的文字會自動在螢幕邊緣換行,以免溢出。另一方面,圖片則具有內在大小。如果圖片寬度超過螢幕,圖片會溢出,使用者必須水平捲動才能查看全部內容。

幸好,CSS 提供的工具可避免這種情況發生。

限制圖片

您可以在樣式表中使用 max-inline-size,宣告圖片的顯示大小絕不能超過包含元素的寬度。

Browser Support

  • Chrome: 57.
  • Edge: 79.
  • Firefox: 41.
  • Safari: 12.1.

Source

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

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

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

有了這個規則,瀏覽器就會自動縮小圖片,讓圖片適合在螢幕上顯示。

兩張螢幕截圖:第一張顯示圖片會擴展超過瀏覽器寬度;第二張則顯示相同圖片,但受到瀏覽器檢視區範圍的限制。
限制圖片可讓使用者不必捲動畫面,就能看到完整圖片。

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

有時,圖片的尺寸是由內容管理系統 (CMS) 或其他內容提交系統設定。如果您的設計需要與 CMS 預設值不同的顯示比例,您可以使用 aspect-ratio 屬性保留網站的設計:

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

很遺憾,這通常表示瀏覽器必須壓縮或拉伸圖片,才能讓圖片符合預期空間。

快樂帥氣的狗狗側面照,嘴裡叼著球,但圖片有壓扁。
變更圖片的顯示比例會使圖片看起來扁平或拉長。

如要避免擠壓和拉伸,請使用 object-fit 屬性。

Browser Support

  • Chrome: 32.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 10.

Source

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-fit` 值。第一個的 `object-fit` 值為 `contain`,第二個的 `object-fit` 值為 `cover`。

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

Browser Support

  • Chrome: 32.
  • Edge: 79.
  • Firefox: 36.
  • Safari: 10.

Source

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
  object-position: top center;
}
快樂帥氣的狗狗側面照,嘴裡含著球,圖片只裁剪底部。
您可以設定 object-position,只裁剪圖片的一側。

提交圖片

這些 CSS 規則會告訴瀏覽器如何顯示圖片。您也可以在 HTML 中提供提示,說明瀏覽器應如何處理這些圖片。

尺寸提示

如果您知道圖片的尺寸,請一律加入 widthheight 屬性。即使圖片因 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 圖片),您可以進一步使用擷取優先順序,將 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">

請再次注意,請謹慎使用這些屬性,避免過度覆寫瀏覽器的優先順序推論。過度使用可能會導致效能降低。

部分瀏覽器支援使用 imagesrcsetimagesizes 屬性,根據 srcset 預先載入回應式圖片。例如:

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

排除 href 備用方案,可確保不支援 srcset 的瀏覽器仍會預先載入正確的圖片。

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

圖片解碼

您也可以在 img 元素中新增 decoding 屬性。您可以告訴瀏覽器圖片可非同步解碼,以便瀏覽器將處理其他內容列為優先。

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

如果圖片本身是最重要的內容,您可以使用 sync 值。

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

decoding 屬性不會影響圖片解碼速度。這項屬性只會影響瀏覽器是否會在算繪其他內容前,等待完成圖片解碼作業。

在大多數情況下,這不會造成太大影響,但有時可以讓瀏覽器稍微加快顯示圖片或其他內容的速度。舉例來說,如果大型文件包含許多需要時間轉譯的元素,以及需要長時間解碼的大型圖片,在重要圖片上設定 sync 會讓瀏覽器等待圖片,然後一次轉譯兩者。或者,您也可以設定 async,讓瀏覽器更快顯示內容,且不必等待圖片解碼。

不過,通常來說,您最好避免 DOM 大小過大,並使用回應式圖片來縮短解碼時間,而非使用 decoding

使用 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 的視區中,應顯示的圖片寬度不得超過螢幕的三分之一 (例如在三欄版面配置中)。

如果視區寬度介於 44em66em 之間,請以螢幕寬度的一半顯示圖片 (例如在雙欄版面配置中)。

如果寬度小於 44em,請以螢幕的完整寬度顯示圖片。

也就是說,系統不一定會使用最大的圖片來顯示最寬的螢幕。寬的瀏覽器視窗可顯示多欄版面配置,會使用可容納單欄的圖片,這類圖片可能比在較窄螢幕上用於單欄版面配置的圖片小。

使用大小描述項,變更網頁在不同螢幕大小上的版面配置方式。

像素密度描述元

您也可以使用描述符提供圖片的替代版本,以便在高密度螢幕上顯示,讓圖片在更高解析度下仍能維持清晰。

兩個版本的圖片都顯示一隻開心的帥氣狗,嘴裡含著球,其中一個圖片看起來清晰,另一個則模糊。
像素密度較低的圖片可能會模糊不清。

請使用密度描述符,說明圖片的像素密度與 src 屬性中的圖片相關。密度描述元是數字後面加上字母 x,例如 1x2x

<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 就可以在 srcset 清單中接續 2x

您不必使用整數。如果圖片的另一個版本大小為 450 x 300 像素,您可以使用 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-imageimage-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 元素

進行隨堂測驗

測驗您對圖片的瞭解程度。

您必須新增樣式,才能讓圖片符合檢視區範圍。

不含容器的圖片會以原始大小顯示。
必須提供樣式。

當圖片的高度和寬度被強制設為不自然的顯示比例時,哪些樣式有助於調整圖片如何配合這些比例?

object-fit
指定圖片與 containcover 等關鍵字的搭配方式。
image-fit
這項資源不存在,是我編造的。
fit-image
這項資源不存在,是我編造的。
aspect-ratio
這可能會導致或解決不自然的圖片比例。

heightwidth 套用至圖片,可防止 CSS 為圖片套用不同的樣式。

這類指南更像是提示,而非規則。
CSS 提供大量動態選項,可用來調整圖片大小,即使高度和寬度是標記內嵌的內容也一樣。

srcset 屬性並不會「覆寫」src 屬性,而是「覆蓋」它。

互補、取代
srcset 絕對不會取代 src 屬性。
replace、complements
並提供其他選項供瀏覽器選擇 (如果可行)。

圖片缺少 alt 與空白的 alt 相同。

空白的 alt 屬性會告訴螢幕閱讀器,這張圖片是呈現用圖片。
缺少 alt 會向螢幕閱讀器傳送空白信號。