網頁上的文字會自動環繞在畫面邊緣,因此不會 溢位相較之下,圖片的大小就在本質上。如果圖片 超過畫面寬度時,圖片就會溢位,使用者必須捲動畫面 即可查看全部
幸好,CSS 提供的工具可避免這種情況發生。
限制圖片
在樣式表中,您可以使用 max-inline-size
宣告圖片一律不得大於
包含 元素
img {
max-inline-size: 100%;
block-size: auto;
}
你也可以對影片等類型的嵌入內容套用相同規則 以及 iframe
img,
video,
iframe {
max-inline-size: 100%;
block-size: auto;
}
有了這項規則,瀏覽器就會自動縮小圖片的大小,以符合 。
![兩張螢幕截圖;第一張顯示的圖片超出瀏覽器寬度第二張圖顯示了在瀏覽器可視區域內限制的同一張圖片。](https://web.dev/static/learn/design/responsive-images/image/two-screenshots-first-s-fbd980b13ed58.png?authuser=9&hl=zh-tw)
新增 block-size
auto
的值表示瀏覽器會保留圖片的顯示比例
並調整大小
圖片尺寸有時會由內容管理系統 (CMS) 設定
如果您的設計要求使用其他顯示比例
或是使用 CMS 的預設選項
aspect-ratio
敬上
屬性來保留網站設計:
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
}
換句話說,瀏覽器必須縮小或放大圖片 以符合指定空間
![臉上有一隻小球的臉,看起來很開心的小狗,但圖片已放大。](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-6886fa1061908.jpg?authuser=9&hl=zh-tw)
為避免畫面放大或延展,請使用
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;
}
![一個開心的小狗表情,嘴裡有一顆球;圖片兩側都有額外空間](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-19f229b25e797.jpg?authuser=9&hl=zh-tw)
![一個開心的小狗表情,嘴裡有一顆球;圖片已裁剪到頂端和底部。](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-9a3c6aedc16d2.jpg?authuser=9&hl=zh-tw)
您可以使用 object-position 資源。這樣做會調整裁剪焦點,確保大部分 重點還是清晰可見
img {
max-inline-size: 100%;
block-size: auto;
aspect-ratio: 2/1;
object-fit: cover;
object-position: top center;
}
![一個開心的小狗表情,嘴裡有一顆球;因此只有底部的圖片會遭到裁剪。](https://web.dev/static/learn/design/responsive-images/image/profile-a-happy-looking-a9de08840e85f.jpg?authuser=9&hl=zh-tw)
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 圖片),您可以進一步
依照 擷取優先順序,判斷載入的優先順序
將 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
,請將圖片以
。
所以只要是最寬廣的圖片 。顯示多欄版面配置的寬版瀏覽器視窗時,會使用 標準圖像,可能小於 單欄版面配置的版面。
像素密度描述元
您也可以使用描述元提供替代版本的映像檔 顯示在高密度螢幕上,讓圖片從高處變清晰 解析度
![同一張圖片中,有兩隻不同版本的圖片,圖中有一隻看起來很開心的小狗,嘴裡有一顆球,一張圖片看起來很脆弱,另一張圖片看起來很模糊。](https://web.dev/static/learn/design/responsive-images/image/two-versions-the-same-im-f13b154ee2cc8.png?authuser=9&hl=zh-tw)
使用密度描述元說明
與 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
元素。
隨堂測驗
測試自己對圖片的瞭解。
請為圖片新增樣式,以符合可視區域的大小。
如果圖片的高度和寬度強制採用非自然的顯示比例,下列哪種樣式可協助調整圖片的合乎這些比例?
object-fit
contain
和 cover
等關鍵字。image-fit
fit-image
aspect-ratio
為圖片加上 height
和 width
後,CSS 就無法變更樣式。
srcset
屬性不是 src
屬性 _______,而是 _______。
srcset
絕對不會取代 src
屬性。圖片缺少 alt
與空白的 alt
相同。
alt
屬性會指示螢幕閱讀器此圖片呈現的比例。alt
,螢幕閱讀器就不會發出訊號。