6.1 使用srcset和sizes属性
像苹果的Retina显示屏这样的高像素密度屏幕，已经成为许多现代设备的标准。这些显示器每英寸的像素数量（PPI）更多，提供更清晰和详细的图像。对于web开发者来说，让这些屏幕上的图像更精彩就非常重要了。我们来看看怎么做到这点吧。
高密度屏幕的问题
在高密度屏幕上，标准图像可能显得模糊或者有像素化的感觉，因为一个图像像素被拉伸到多个屏幕像素上。为了解决这个问题，需要使用高分辨率的图像，浏览器能够对它们缩放以适应高密度屏幕。\n
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文件可以在不降低质量的情况下进行缩放。它们特别适合用于logo、图标和其他界面元素。
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="Logo">
</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>使用SVG优化Retina显示器</title>
</head>
<body>
<img src="images/logo.svg" alt="Logo">
</body>
</html>
代码说明：
src="images/logo.svg": 指定SVG文件路径，该文件会根据需要缩放到任意大小而不失去质量
GO TO FULL VERSION