感謝觀看 Google I/O 大會！立即觀賞隨選內容。

本頁面由 Cloud Translation API 翻譯而成。

回應式圖片

網頁上的文字會自動環繞在畫面邊緣，因此不會溢位相較之下，圖片的大小就在本質上。如果圖片超過畫面寬度時，圖片就會溢位，使用者必須捲動畫面即可查看全部

幸好，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 資源。

瀏覽器支援

資料來源

contain 的 object-fit 值會指示瀏覽器保留圖片的，視需要在圖片周圍留白。

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

cover 的 object-fit 值會指示瀏覽器保留圖片的顯示比例，視需要裁剪圖片

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 資源。這樣做會調整裁剪焦點，確保大部分重點還是清晰可見

瀏覽器支援

資料來源

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

你可以將「object-position」設為裁剪圖片的一側

提供圖片

這些 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 圖片)，您可以進一步依照擷取優先順序，判斷載入的優先順序將 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 的瀏覽器支援仍會預先載入正確的映像檔。

您無法根據瀏覽器支援特定格式。這麼做可能會產生額外的下載次數，對使用者造成浪費資料。

圖片解碼

此外，您也可以在 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 是 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 屬性相輔相成，而非取代。您仍然需要有效的 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 清單。

不必使用整數。如果映像檔的另一個版本是 450 大小為 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);
}

如要指定多張圖片，可以使用 image-set敬上函式 background-image。

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

指定圖片如何配合 contain 和 cover 等關鍵字。

image-fit

這項資源不存在，是由我製作。

fit-image

這項資源不存在，是由我製作。

aspect-ratio

這可能會導致圖片比例失真，或是解決不自然的圖片比例。

為圖片加上 height 和 width 後，CSS 就無法變更樣式。

是

它們更像是提示，而非一般規則。

否

CSS 提供大量的動態選項可用於調整圖片大小，即使高度和寬度已內嵌在代碼中也一樣。

srcset 屬性不是 src 屬性 _______，而是 _______。

互補，取代

srcset 絕對不會取代 src 屬性。

取代, 互補

還會提供額外的選項供瀏覽器選擇 (如果可行的話)。

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

是

空白的 alt 屬性會指示螢幕閱讀器此圖片呈現的比例。

否

如果缺少 alt，螢幕閱讀器就不會發出訊號。

回應式圖片

限制圖片

提供圖片

大小調整提示

載入提示

擷取優先順序

預先載入的提示

圖片解碼

包含 srcset 的回應式圖片

寬度描述元

大小

像素密度描述元

簡報圖片

背景圖片

隨堂測驗

包含 `srcset` 的回應式圖片