網頁上的文字會自動在螢幕邊緣換行,以免溢出。另一方面,圖片則具有內在大小。如果圖片寬度超過螢幕,圖片會溢出,使用者必須水平捲動才能查看全部內容。
幸好,CSS 提供的工具可避免這種情況發生。
限制圖片
您可以在樣式表中使用 max-inline-size
,宣告圖片的顯示大小絕不能超過包含元素的寬度。
img {
max-inline-size: 100%;
block-size: auto;
}
您也可以將相同的規則套用至其他類型的內嵌內容,例如影片和 iframe。
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
有了這個規則,瀏覽器就會自動縮小圖片,讓圖片適合在螢幕上顯示。
新增 auto
的 block-size
值,表示瀏覽器會在調整圖片大小時保留圖片的顯示比例。
有時,圖片的尺寸是由內容管理系統 (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;
}
object-fit
值為 cover
會告知瀏覽器保留圖片的顯示比例,並視需要裁剪圖片。
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">
請再次注意,請謹慎使用這些屬性,避免過度覆寫瀏覽器的優先順序推論。過度使用可能會導致效能降低。
部分瀏覽器支援使用 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
的瀏覽器仍會預先載入正確的圖片。
您無法根據瀏覽器支援的特定格式,預先載入不同格式的圖片。這麼做可能會導致額外下載作業,浪費使用者的資料。
圖片解碼
您也可以在 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
代表一個像素的寬度。
<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
會向螢幕閱讀器傳送空白信號。