Client Hints 机制通过启用 Width 和 DPR 提示，配合服务端动态返回适配图片，实现自动请求最符合屏幕宽度的图片；需设置 Accept-CH 响应头、使用简单 img 标签，并由后端解析请求头选择或生成对应尺寸图片。
HTML5 中的 Client Hints 机制允许浏览器在发起请求时，自动向服务器发送设备和环境信息（如屏幕宽度、设备像素比、首选语言等），从而让服务器能动态返回最匹配的图片资源。要实现“自动请求最符合当前屏幕宽度的图片”，关键在于启用 Width 和 DPR 这两个 Client Hint，并配合服务端响应逻辑（或 CDN 支持）进行适配。
1. 启用 Client Hints（通过 HTTP 响应头）
浏览器默认不发送 Client Hints，需由服务器在 HTML 文档的响应头中明确声明所需提示字段：
- 添加
Vary: Width, DPR：确保缓存系统能区分不同宽度/DPR 的请求 - 添加
Accept-CH: Width, DPR：告诉浏览器“请带上 Width 和 DPR 字段发起后续资源请求” - 可选添加
Accept-CH-Lifetime: 86400（单位秒）：指定该策略有效期（如 24 小时）
例如，Nginx 配置片段：
add_header Vary "Width, DPR"; add_header Accept-CH "Width, DPR"; add_header Accept-CH-Lifetime "86400";
2. 使用 <img> 标签并省略 sizes 和 srcset
Client Hints 的核心优势是“无需前端手动写 srcset”。只要启用了 Width 提示，浏览器会在请求图片时自动在请求头中带上 Width: 375（单位 px，指 CSS 像素宽度）。
立即学习“前端免费学习笔记（深入）”；
Article To Html
下载
文章转信息图。将文章/笔记转化为手机可读的 HTML 信息图，自动匹配视觉风格。触发场景：文章转图、笔记转图、信息图、转小红书图、做张图、可视化这篇文章、文生图。
因此，你可以用最简方式写图片标签：
<img src="/photo.jpg" alt="风景">
此时浏览器会根据当前容器宽度（若未显式设置尺寸，则按视口宽度计算）自动计算并发送 Width 值。注意：该宽度基于 CSS 像素，受 <meta name="viewport"> 影响，务必包含标准 viewport 设置。
3. 服务端根据请求头动态返回适配图片
后端或 CDN 需解析请求头中的 Width（和可选的 DPR），然后执行对应逻辑：
- 读取
req.headers.width（如 Express 中）或cf-width（Cloudflare Workers 中） - 根据宽度值选择预生成的图片版本（如
/photo-375w.jpg、/photo-768w.jpg） - 或实时缩放原图（需谨慎评估性能与缓存）
- 返回图片时，建议带上
Vary: Width, DPR，确保 CDN 正确缓存多版本
示例（Cloudflare Worker 简化逻辑）：
const width = request.headers.get('width');<br>const dpr = request.headers.get('dpr') || '1';<br>const targetWidth = Math.round(width * dpr);<br>return fetch(`/images/photo-${targetWidth}w.jpg`);4. 注意事项与兼容性补充
Client Hints 目前在 Chrome、Edge、Opera 及新版 Safari（iOS 16.4+/macOS 13.3+）中支持 Width 和 DPR；Firefox 尚未支持。使用前建议：
- 始终提供
<img src="fallback.jpg">作为基础降级路径 - 避免在非安全上下文（HTTP）中启用，Client Hints 要求 HTTPS
-
Width值是浏览器估算的“目标渲染宽度”，不是设备物理宽度，也不等同于window.innerWidth - 若页面使用响应式容器（如 max-width: 100%），浏览器仍能合理推断宽度；但复杂布局中可能需要配合
sizes属性提升精度（此时 Client Hints 与sizes可共存）
