响应式设计缩放媒体元素以适应显示它们的屏幕。
没有响应式设计，图像可能会溢出容器并在小屏幕上破坏布局，在高密度显示器上看起来模糊，并通过强制每个设备下载相同的过大文件而浪费带宽。
您可以使用 Images 自动调整图像大小以在每个设备上实现最佳显示。Cloudflare 支持两种按需提供响应式图像的方式：
| 方法 | 工作原理 | 最适合 |
|---|---|---|
HTML srcset |
在标记中列出多种尺寸，让浏览器根据视口大小和显示密度选择最佳匹配。 | 完全控制可用尺寸。适用于所有浏览器。 |
width=auto |
Cloudflare 从单个 URL 自动选择最佳宽度——无需更改标记。 | 最简单的实现，尤其是无法控制 HTML 时。 |
屏幕使用物理像素（您看到的各个点）显示图像，而浏览器使用 CSS 像素（用于布局的抽象单位）。
在标准显示器上，这些映射为 1:1。在高密度显示器（例如 Retina、4K）上，每个 CSS 像素使用多个物理像素渲染——例如，2x 显示器上 4 个物理像素，3x 显示器上 9 个。
此比率——设备像素比（DPR）——决定图像显示的清晰程度。在 2x 显示器上提供 960px 图像时，浏览器将其拉伸到 1920 物理像素，使其看起来模糊。
要保持图像清晰，您可以使用 dpr 参数为高 DPI 屏幕提供单独的、更高分辨率的版本：
 |  |
width=300,height=200,dpr=1 | width=300,height=200,dpr=2 |
使用 <img> 元素嵌入图像时，您可以使用其 srcset ↗ 属性提供同一图像不同尺寸的列表。
浏览器评估屏幕大小、像素密度和网络状况，然后选择单个最佳匹配。
以下代码片段展示如何在 <img> 标签中使用 srcset 根据用户设备像素比提供两种可能尺寸之一：
<img
src="portrait-800w.jpg"
srcset="
portrait-1600.jpg 2x,
"
/>无需预生成每种尺寸，使用 Images 让每个 srcset 条目指向具有不同 width 参数和像素密度描述符（例如 2x）的同一源图像。浏览器为用户设备像素比选择正确的宽度后，Cloudflare 按需动态生成调整大小的版本：
<img
src="/cdn-cgi/image/fit=contain,width=960/assets/product.jpg"
srcset="/cdn-cgi/image/fit=contain,width=1920/assets/product.jpg 2x"
/>在上面的示例中，src 属性包含 1x 显示器的图像（例如 HD/1080p 显示器）。srcset 属性为 2x 显示器（例如大多数移动设备、4K 桌面显示器）添加更大的高 DPI 图像。使用高分辨率源图像，因为放大低分辨率图像会增加文件大小而不改善质量。
像素密度描述符用于图像具有固定 CSS 大小（例如 960px 产品照片）且视口宽度无关紧要的情况。在这里，您确切知道图像将有多少 CSS 像素，并想为高 DPI 屏幕提供更高分辨率的版本。
但是，如果图像随视口缩放——即其 CSS 大小根据屏幕宽度变化（例如 width: 100%、width: 50vw）——则使用宽度描述符（w）提供一系列宽度：
<img
width="100%"
srcset="
/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w,
/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w,
/cdn-cgi/image/fit=contain,width=960/assets/hero.jpg 960w,
/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w,
/cdn-cgi/image/fit=contain,width=2560/assets/hero.jpg 2560w
"
src="/cdn-cgi/image/width=960/assets/hero.jpg"
/>w 值告诉浏览器每个选项的像素宽度。浏览器考虑视口宽度和显示密度以选择最佳匹配。
默认情况下，浏览器假设图像填满整个视口。如果图像仅占据屏幕的一部分，则可以使用 sizes 告诉浏览器其实际宽度：
<!-- Image fills 50% of the viewport -->
<img style="width: 50vw" srcset="..." sizes="50vw" />如果图像可以根据媒体查询或其他 CSS 属性（例如 max-width）具有不同大小，则在 sizes 属性中指定所有条件：
<img
style="max-width: 640px"
srcset="
/cdn-cgi/image/fit=contain,width=320/assets/hero.jpg 320w,
/cdn-cgi/image/fit=contain,width=480/assets/hero.jpg 480w,
/cdn-cgi/image/fit=contain,width=640/assets/hero.jpg 640w,
/cdn-cgi/image/fit=contain,width=1280/assets/hero.jpg 1280w
"
sizes="(max-width: 640px) 100vw, 640px"
/>在上面的示例中：
- 如果屏幕大小低于 640px，则图像填满整个视口。
- 如果屏幕大小高于 640px，则图像随视口缩放并上限为 640px。
- 在 640px 以上的 2x 显示器上，浏览器需要 1280 物理像素来填充 640px 布局宽度，因此选择 1280w 条目。
使用 srcset，您可以精确控制可用尺寸，这需要为每张图像更新 HTML。
另一方面，width=auto 采用不同方法，Cloudflare 从单个 URL 为每个请求确定正确的宽度：
/cdn-cgi/image/width=auto/assets/hero.jpg这在优化带有转换流程的远程图像时特别有用，您可以在整个 zone 上应用 width=auto 而无需修改任何标记。
当请求包含 width=auto 时，Cloudflare 使用客户端提示（如果发送）或作为回退的 user-agent 检测，根据屏幕大小确定宽度。
支持客户端提示的浏览器（Chrome、Edge、Opera）在请求标头中发送视口宽度。然后，Cloudflare 读取此值并选择正确的图像大小。
Cloudflare 不是为每个可能的视口宽度生成唯一图像，而是对齐到等于或大于检测到的屏幕宽度的最小断点。
client hints 的默认断点为：320、768、960 和 1200 像素。
下表显示 Cloudflare 根据默认断点将选择的宽度。如果检测到的视口宽度超过最大断点，图像将以该最大断点提供。
| 检测到的视口宽度 | 提供的图像宽度 |
|---|---|
| 280px | 320px |
| 500px | 768px |
| 960px | 960px |
| 1500px | 1200px |
您可以使用 wbreakpoints 子参数覆盖默认断点，该参数接受以分号分隔的正整数。
Client hints 为 Cloudflare 提供最准确的信息，但需要您网站的选择加入。没有它们，width=auto 将回退到 user-agent 检测。
您可以使用以下方法之一启用 client hints：
HTML <meta> 标签
在任何其他元素之前，在页面的 <head> 中添加以下内容：
<meta
http-equiv="Delegate-CH"
content="sec-ch-dpr {ZONE}; sec-ch-viewport-width {ZONE}"
/>HTTP 响应标头
将这些标头添加到 HTML 响应：
critical-ch: sec-ch-viewport-width, sec-ch-dpr
permissions-policy: ch-dpr=("{ZONE}"), ch-viewport-width=("{ZONE}")当 client hints 不可用时，Cloudflare 根据 user-agent 字符串将设备分类为移动或桌面，并选择相应的尺寸。
user-agent 检测的默认尺寸为：
| 设备类型 | 默认尺寸 |
|---|---|
移动（user-agent 中包含 iPhone 或 Android） |
768px |
| 桌面（所有其他 user-agent） | 1200px |
您可以使用 wmobile 和 wdesktop 子参数覆盖默认尺寸，它们接受正整数。