6.1 使用 srcset 和 sizes 屬性
像是 Apple 的 Retina 顯示器這種高像素密度的螢幕，已成為許多現代設備的標準。這些顯示器每英寸的像素數（PPI）更多，提供更清晰詳細的圖像。對於 web 開發者來說，優化這些螢幕的圖像很重要，這樣用戶的體驗才能達到最佳。我們來看看如何做到這一點。
高密度螢幕相關問題
在高密度螢幕上，標準圖像可能會顯得模糊或像素化，因為圖像的一個像素被拉伸到螢幕的多個像素。要解決這個問題，需要使用分辨率更高的圖像，這樣瀏覽器就能縮放以在高密度螢幕上顯示。
srcset 和 sizes 屬性允許為不同的像素密度指定不同版本的圖像。這幫助瀏覽器選擇最適合特定設備的圖像。
srcset 和 sizes 的使用範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Retina 顯示器優化</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Retina 顯示器範例圖像">
</body>
</html>
代码解释：
srcset：指定圖像的三個版本以適應不同的像素密度（1x，2x，3x）-
sizes：定義圖像在不同顯示條件下的寬度：- 寬度小於
600px— 圖片佔瀏覽器視窗寬度的100% - 寬度小於
1200px— 圖片佔瀏覽器視窗寬度的50% - 其他情況下 — 圖片佔瀏覽器視窗寬度的
33%
- 寬度小於
6.2 使用向量圖形 (SVG)
向量圖形 (SVG) 就是高密度螢幕的絕佳解決方案，因為 SVG 文件可以無損縮放。它們非常適合用於標誌、圖標和其他介面元素。
SVG 使用範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 SVG 在 Retina 顯示器上</title>
</head>
<body>
<img src="images/logo.svg" alt="標誌">
</body>
</html>
代码解释：
src="images/logo.svg"：指定 SVG 文件的路徑，這個文件將可以無損縮放到任意尺寸
6.3 使用 CSS
對於背景圖片，可以使用 媒體查詢和 CSS 屬性，依據設備的像素密度載入不同版本的圖片。
背景圖片的 CSS 使用範例：
CSS
.background {
background-image: url('images/background-1x.jpg');
}
@media only screen and (min-resolution: 2dppx) {
.background {
background-image: url('images/background-2x.jpg');
}
}
@media only screen and (min-resolution: 3dppx) {
.background {
background-image: url('images/background-3x.jpg');
}
}
代码解释：
.background：定義基本背景圖片@media only screen and (min-resolution: 2dppx)：變更背景圖片為適合2x密度的版本@media only screen and (min-resolution: 3dppx)：變更背景圖片為適合3x密度的版本
6.4 元素 <picture>
標籤 <picture> 允許在不同顯示條件下指定多個圖片來源。這對於更複雜的圖片適配情況很有用。
<picture> 使用範例：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>使用 <picture> 在 Retina 顯示器上</title>
</head>
<body>
<picture>
<source srcset="images/image-3x.jpg" media="(min-resolution: 3dppx)">
<source srcset="images/image-2x.jpg" media="(min-resolution: 2dppx)">
<img src="images/image-1x.jpg" alt="Retina 顯示器範例圖像">
</picture>
</body>
</html>
代码解释：
<source>：指定不同顯示條件的圖片來源<img>：為不支援<picture>的設備設置默認圖片
6.5 圖片優化範例
範例 1：高分辨率自適應圖片
我們創建一個範例，其中的圖片是使用 srcset 和 sizes 屬性為高密度螢幕優化的：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>為 Retina 顯示器設計的自適應圖片</title>
</head>
<body>
<img
src="images/default.jpg"
srcset="images/image-1x.jpg 1x,
images/image-2x.jpg 2x,
images/image-3x.jpg 3x"
sizes="(max-width: 600px) 100vw,
(max-width: 1200px) 50vw, 33vw"
alt="Retina 顯示器範例圖像">
</body>
</html>
代码解释：
srcset：為不同的像素密度定義三個版本的圖像（1x，2x，3x）-
sizes：為圖像在不同顯示條件下定義寬度：- 寬度小於
600px— 圖片佔瀏覽器視窗寬度的100% - 寬度小於
1200px— 圖片佔瀏覽器視窗寬度的50% - 其他情況下 — 圖片佔瀏覽器視窗寬度的
33%
- 寬度小於
範例 2：使用 SVG 進行可縮放圖像
我們創建一個範例，其中使用 SVG 以確保在任何設備上的高質量顯示：
HTML
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>在 Retina 顯示器上使用 SVG</title>
</head>
<body>
<img src="images/logo.svg" alt="標誌">
</body>
</html>
代码解释：
src="images/logo.svg"：指定 SVG 文件的路徑，這個文件可以無損縮放到任意尺寸
GO TO FULL VERSION