回應式圖片

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

幸好,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 元素

進行隨堂測驗

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

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

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

fit-image
aspect-ratio
object-fit
image-fit

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

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

replace、complements
互補、取代

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