Client Hints 是浏览器主动向服务器发送设备和网络信息的机制，用于精准返回适配图片资源；需服务端声明接收字段（Vary头）并处理请求头，客户端通过meta标签启用，支持DPR、Width等关键字段实现动态响应。
Client Hints 是 HTML5 中由浏览器主动向服务器发送设备和网络信息的机制，能让服务器在响应前就知道用户屏幕宽度、像素密度、色彩能力等，从而精准返回适配的图片资源，避免前端 JavaScript 或
启用 Client Hints 需要服务端与客户端协同
它不是纯前端技术，必须服务端明确声明接收哪些提示（通过 Vary 响应头）并正确处理请求头；同时页面需通过 或 HTTP 响应头开启提示发送。
- 在 HTML
中添加： - 服务端需在响应中返回
Vary: DPR, Width, Viewport-Width（列出实际使用的提示字段），否则 CDN 或代理可能缓存错误版本 - 现代 Chrome、Edge、Opera 默认支持；Safari 从 iOS 16.4 / macOS 13.3 起支持
Width和DPR，但需用户开启“智能图像加载”（默认开启）
关键 Client Hints 字段及其用途
对图片适配最实用的是以下三个字段，它们在 GET 请求头中自动出现（前提是已启用）：
-
DPR：设备像素比（如
2.0表示 Retina 屏），用于决定是否提供 @2x 图 -
Width：CSS 像素宽度（如
375），反映当前图片容器在页面中的渲染宽度，比Viewport-Width更准确（后者是视口总宽，不考虑响应式布局缩放） -
Viewport-Width：视口 CSS 宽度（如
980），适合做全局断点判断，但不推荐单独用于图片裁剪
例如，一个 
DPR: 3<br> Width: 375
服务端如何基于 Client Hints 动态响应图片
以 Node.js（Express）为例，服务端可读取请求头，结合图片原始尺寸和策略生成响应：
- 解析
req.headers.dpr和req.headers.width（注意小写） - 计算目标物理像素宽度：
targetPx = Math.round(Number(width) * Number(dpr)) - 根据该值选择预生成的图档（如
photo-1125w.webp对应 375×3 → 1125px 宽）或实时调整（如用 Sharp 库裁剪/缩放） - 务必设置
Content-Type（如image/webp）和Vary头，确保缓存正确分离
Apache/Nginx 也可通过模块（如 mod_headers + mod_rewrite）做简单重定向，但动态裁剪仍需后端参与。
兼容性兜底与注意事项
Client Hints 是渐进增强特性，不可替代传统响应式方案：
- 未支持的浏览器（如旧版 Safari、Firefox）不会发送这些头，服务端需有 fallback 策略（例如返回 1x 标准图，或按 User-Agent 粗略判断）
- 不要依赖
Save-Data做图片降质主逻辑——它仅表示用户开启了“节省流量”，且支持率有限 - 避免在非 HTTPS 环境使用（Chrome 等要求安全上下文），本地开发可用
localhost - 测试时用 Chrome DevTools 的 Network → Headers 查看请求头是否含
DPR/Width，确认 meta 已生效
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
