回應式圖片

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

幸好，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-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 圖片)，您可以進一步 依照 擷取優先順序，判斷載入的優先順序 將 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 元素。

隨堂測驗

測試自己對圖片的瞭解。