網路上的文字會自動環繞在畫面邊緣，避免溢位。另一方面，圖片本身的大小一定可以變動。如果圖片寬度大於螢幕，圖片會溢位，使用者必須水平捲動才能查看全部的圖片。
幸好，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 屬性。
object-fit 值 contain 會指示瀏覽器保留圖片的顯示比例，視需要在圖片周圍留白。
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;
}
您可以使用物件位置屬性來變更圖片裁剪的位置。這樣做可調整裁剪的焦點，確保圖片中最重要的部分仍顯示在畫面上。
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 圖片)，您可以使用 Fetch Priority 將 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">
同樣地，請謹慎使用這些屬性，以免過於頻繁覆寫瀏覽器的優先順序經驗法則。過度使用可能會導致效能降低。
部分瀏覽器支援使用 imagesrcset 和 imagesizes 屬性，根據 srcset 預先載入回應式圖片。例如：
<link rel="preload" imagesrcset="hero_sm.jpg 1x hero_med.jpg 2x hero_lg.jpg 3x" as="image" fetchpriority="high">
只要排除 href 備用項，就能確保不支援 srcset 的瀏覽器仍會預先載入正確的映像檔。
您無法根據特定格式的瀏覽器支援預先載入不同格式的圖片。嘗試這樣做可能會導致額外下載作業浪費使用者的資料。
圖片解碼
您也可以新增 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 過大，並使用回應式圖片縮短解碼時間，而非使用 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 在 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-image 的 image-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-fitcontain、cover 等關鍵字配合的方式。image-fitfit-imageaspect-ratio在圖片中加入 height 和 width 會使 CSS 無法為其設定不同的樣式。
srcset 屬性不具備 src 屬性 _______，而是 _______。
srcset 完全不會取代 src 屬性。圖片缺少 alt 與空白 alt 相同。
alt 屬性會讓螢幕閱讀器知道此圖片是簡報。alt 表示沒有向螢幕閱讀器發出任何訊號。