高清图不糊的关键是逻辑尺寸对齐：@2x图需物理尺寸翻倍且设background-size或img的width/height为设计稿原始css像素值，否则双线性插值致模糊。
直接换 @2x 图但没配 background-size，图片一定糊——浏览器会把 2400×1200 的图按默认尺寸拉伸进 375px 宽的容器，物理像素被双线性插值，结果比原图还软。
用 srcset + x 描述符处理 <img> 标签
这是目前最稳、无需 JS、兼容性好、且浏览器能精准匹配 DPR 的方式。
-
srcset必须只用x描述符：srcset="icon.png 1x, icon@2x.png 2x, icon@3x.png 3x"；混入w（如780w）会导致浏览器忽略所有x项 -
sizes不是可选：如果图宽随断点变化（比如移动端占 100vw，桌面占 320px），必须写sizes="(max-width: 768px) 100vw, 320px"，否则浏览器无法算出该加载多宽的物理图 -
<img>必须设width和height属性（非 CSS），否则布局偏移触发重排，srcset选图逻辑可能中断 - 兜底的
src必须存在且为可用的 1x 图，IE 全系不支持srcset时全靠它
用媒体查询 + background-image 处理 CSS 背景图
image-set() 在安卓 WebView 和旧 Safari 中常失效，@media 是更可控的兜底方案。
- 媒体查询必须复合写：
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 2dppx)；单写任一条件都会漏掉 iOS 9–12 或新版 Chrome - 换图后必须同步设
background-size：例如设计稿中背景图宽为750px，就得写background-size: 750px auto；用cover或100% 100%会让高倍图再次插值失真 -
@2x图必须是物理尺寸翻倍（如原图 750×400 → @2x 必须是 1500×800），PS “放大”或“重采样”只会让模糊更明显 - 路径和文件名要严格一致：
bg.jpg/bg@2x.jpg，大小写、扩展名、@符号都不能错；Vite/webpack 默认不解析srcset或媒体查询里的路径，需手动验证是否 404
image-rendering 不是万能解，只在资源正确加载后起作用
这个属性只控制已加载图片的渲染算法，不参与资源选择。很多人加了却没效果，是因为图根本没换过来。
- 先打开 DevTools → Network，确认实际请求的是
icon@2x.png还是icon.png；不是这个问题就别调image-rendering - Safari 需要
-webkit-optimize-contrast才稳定生效；Chrome/Firefox 可用crisp-edges作 fallback；别写smooth，那是默认模糊算法 - 注意 UI 框架（如 Tailwind）或重置样式表可能悄悄注入
image-rendering: smooth，必须用更高优先级显式覆盖 - 对照片类图片慎用
crisp-edges，它会放大锯齿；真正保险的方式仍是准备多套分辨率资源
最容易被跳过的一环是「逻辑尺寸对齐」：无论你用 srcset、image-set 还是媒体查询，只要没把图片渲染尺寸（background-size 或 <img> 的 width/height）设成设计稿原始 CSS 像素值，高清图就是摆设。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
