回應式圖片

將網路上的文字自動環繞在螢幕邊緣,避免溢出。與圖片不同。圖片的尺寸與生俱來。圖片大於螢幕時,圖片會溢位,顯示水平捲軸。

幸好,您可以採取 CSS 措施,避免這類問題發生。

限制圖片

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

瀏覽器支援

  • 57
  • 79
  • 41
  • 12.1

資料來源

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

同樣的規則也可以套用到其他類型的嵌入內容,例如影片和 iframe。

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

規則導入後,瀏覽器會自動縮小圖片尺寸,以符合螢幕尺寸。

兩張螢幕截圖:第一張展開的圖片超過瀏覽器寬度,第二張則顯示該圖片限制了瀏覽器可視區域。

block-size 值新增為 auto,表示圖片的長寬比會保持不變。

如果圖片是透過內容管理系統新增,有時尺寸可能會超出您的掌控權。如果設計要求的圖片顯示比例與圖片的實際尺寸不同,請使用 CSS 中的 aspect-ratio 屬性。

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

但瀏覽器可能會縮小或延展圖片,以符合您偏好的顯示比例。

笑咪咪的笑臉,圖片中有一顆球,嘴裡有一隻球,但圖片惡化。

如要避免這種情況發生,請使用 object-fit 屬性。

瀏覽器支援

  • 32
  • 79
  • 36
  • 10

資料來源

object-fitcontain 會指示瀏覽器保留圖片的長寬比,即使該規定上下空白字元亦然。

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

object-fitcover 會指示瀏覽器保留圖片的長寬比,即使會裁剪頂端和底部圖片亦然。

img {
  max-inline-size: 100%;
  block-size: auto;
  aspect-ratio: 2/1;
  object-fit: cover;
}
毛茸茸的手狗嘴裡有一顆球,圖片左右都有額外空間。 圖片中與底部遭到裁剪的,她看起來十分開心。
為相同圖片套用了兩個不同的「object-fit」值。第一個函式的「object-fit」值是「contains」,後者的「object-fit」值是「cover」。

如果頂端和底部遭到裁剪時發生問題,請使用 object-position CSS 屬性調整裁剪焦點。

瀏覽器支援

  • 32
  • 79
  • 36
  • 10

資料來源

您依然可以確保最重要的圖片內容依然顯示在畫面上。

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

美麗的狗臉上有一顆球,嘴裡有一隻球,圖片在底部只裁剪過。

提交圖片

這些 CSS 規則會指示瀏覽器呈現圖片的呈現方式。也可以在 HTML 中提供提示,說明瀏覽器如何處理這些圖片。

尺寸提示

如果您知道圖片尺寸,請加入 widthheight 屬性。即使圖片是以不同大小顯示 (因為 max-inline-size: 100% 規則),瀏覽器依然知道寬度和高度的比例,並且能夠設定正確的空間量。這樣一來,當圖片載入時,其他內容就會停止跳轉。

<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" 屬性,通常可以透過設定 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"

預先載入提示

如果圖片是以 JavaScript 新增,或是在 CSS 中以背景圖片的形式加入,可能無法在初始 HTML 中使用部分圖片。您也可以使用預先載入功能,讓系統事先擷取這些重要圖片。這可與 fetchpriority 屬性搭配使用,以提供重要圖片:

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

同樣地,請謹慎使用,以免過度覆寫瀏覽器的優先順序經驗法則,進而導致效能降低。

透過 imagesrcsetimagesizes 屬性,根據 srcset (下文會討論) 預先載入回應式圖片是更進階的作法,部分瀏覽器支援,但並非全部:

排除 href 備用項,即可確保不支援此動作的瀏覽器不會預先載入不正確的圖片。

但目前系統無法根據瀏覽器支援的不同圖片格式預先載入這些圖片,可能會產生額外的下載次數。

理想的做法是盡量避免預先載入,並在初始 HTML 中保有該圖片。

圖片解碼

您還可以將 decoding 屬性新增至 img 元素。您可以告訴瀏覽器圖片可以透過非同步方式解碼。這樣一來,瀏覽器就能優先處理其他內容。

<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 大小,並確保使用回應式圖片縮短解碼時間,也就是說,解碼屬性幾乎不會產生任何效果。

包含 srcset 的回應式圖片

由於該 max-inline-size: 100% 宣告,您的映像檔絕對不會分隔開容器。但即使大型圖片看起來會縮小到能貼合身形,也不會讓你感到安心。如果有人透過低頻寬網路使用小型螢幕裝置,就會下載不必要的大型圖片。

如果您製作多個不同尺寸的相同圖片,可以使用 srcset 屬性告知瀏覽器這些版本。

寬度描述元

您可以傳入以半形逗號分隔的值清單。每個值都應為圖片的網址,後面接著一個空格,後面接著圖片的相關中繼資料。這類中繼資料稱為描述元。

在本例中,中繼資料使用 w 單位說明每張圖片的寬度。其中一個 w 就是 1 像素。

<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 屬性。而是 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 屬性不同。空白的 alt 屬性會向螢幕閱讀器告知這張圖片是簡報性質。

在理想情況下,您的簡報或裝飾圖片不應出現在 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 元素

隨堂測驗

測試圖片相關知識

你必須新增樣式,才能符合可視區域大小的圖片。

不含固定版本的圖片會盡可能大至原始尺寸。
false
必須提供樣式。

如果將圖片的高度和寬度強制調整為非自然的顯示比例,哪些樣式有助於調整圖片符合這些比例的方式?

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

在圖片中加入 heightwidth 會導致 CSS 無法套用不同的樣式。

您可以把規則想成是提示,而不是規則。
false
CSS 提供許多可調整圖片大小的動態選項,即使代碼內嵌高度和寬度也一樣。

srcset 屬性並不 _______ src 屬性,而是 _______。

互補, 取代
srcset 一定會取代 src 屬性。
取代、互補
如果可以的話,這個程式為瀏覽器提供了額外的選項。

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

空白的 alt 屬性會向螢幕閱讀器告知這張圖片是簡報內容
false
如果缺少 alt,螢幕閱讀器就不會傳送任何信號資訊。