網路上的文字會自動環繞在畫面邊緣,避免溢位。另一方面,圖片本身的大小一定可以變動。如果圖片寬度大於螢幕,圖片會溢位,使用者必須水平捲動才能查看全部的圖片。
幸好,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;
}
提供圖片
這些 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-fit
contain
、cover
等關鍵字配合的方式。image-fit
fit-image
aspect-ratio
在圖片中加入 height
和 width
會使 CSS 無法為其設定不同的樣式。
srcset
屬性不具備 src
屬性 _______,而是 _______。
srcset
完全不會取代 src
屬性。圖片缺少 alt
與空白 alt
相同。
alt
屬性會讓螢幕閱讀器知道此圖片是簡報。alt
表示沒有向螢幕閱讀器發出任何訊號。