將網路上的文字自動環繞在螢幕邊緣,避免溢出。與圖片不同。圖片的尺寸與生俱來。圖片大於螢幕時,圖片會溢位,顯示水平捲軸。
幸好,您可以採取 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
,表示圖片的長寬比會保持不變。
如果圖片是透過內容管理系統新增,有時尺寸可能會超出您的掌控權。如果設計要求的圖片顯示比例與圖片的實際尺寸不同,請使用 CSS 中的 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 CSS 屬性調整裁剪焦點。
您依然可以確保最重要的圖片內容依然顯示在畫面上。
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: 100%
規則),瀏覽器依然知道寬度和高度的比例,並且能夠設定正確的空間量。這樣一來,當圖片載入時,其他內容就會停止跳轉。
<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"
屬性,通常可以透過設定 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"
。
預先載入提示
如果圖片是以 JavaScript 新增,或是在 CSS 中以背景圖片的形式加入,可能無法在初始 HTML 中使用部分圖片。您也可以使用預先載入功能,讓系統事先擷取這些重要圖片。這可與 fetchpriority
屬性搭配使用,以提供重要圖片:
<link rel="preload" href="hero.jpg" as="image" fetchpriority="high">
同樣地,請謹慎使用,以免過度覆寫瀏覽器的優先順序經驗法則,進而導致效能降低。
透過 imagesrcset
和 imagesizes
屬性,根據 srcset (下文會討論) 預先載入回應式圖片是更進階的作法,部分瀏覽器支援,但並非全部:
排除 href
備用項,即可確保不支援此動作的瀏覽器不會預先載入不正確的圖片。
但目前系統無法根據瀏覽器支援的不同圖片格式預先載入這些圖片,可能會產生額外的下載次數。
理想的做法是盡量避免預先載入,並在初始 HTML 中保有該圖片。
圖片解碼
您還可以將 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 大小,並確保使用回應式圖片縮短解碼時間,也就是說,解碼屬性幾乎不會產生任何效果。
包含 srcset
的回應式圖片
由於該 max-inline-size: 100%
宣告,您的映像檔絕對不會分隔開容器。但即使大型圖片看起來會縮小到能貼合身形,也不會讓你感到安心。如果有人透過低頻寬網路使用小型螢幕裝置,就會下載不必要的大型圖片。
如果您製作多個不同尺寸的相同圖片,可以使用 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
屬性。而是 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
屬性不同。空白的 alt
屬性會向螢幕閱讀器告知這張圖片是簡報性質。
在理想情況下,您的簡報或裝飾圖片不應出現在 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
,螢幕閱讀器就不會傳送任何信號資訊。