高清屏图片模糊的根本原因是1x图被拉伸，解决核心是用srcset提供多倍图让浏览器按DPR自动选择；推荐结合宽度与像素密度的srcset写法，并用picture+source做精细媒体查询控制。
图片在高清屏（如 Retina 屏、2x 屏）上模糊，本质是浏览器用 1 像素对应 2×2 物理像素渲染，但你只提供了 1x 分辨率的图片，导致系统拉伸放大、细节丢失。解决核心是：让高清屏加载更高分辨率的图片资源，同时保持普通屏不浪费带宽。
用 srcset 提供多倍图，让浏览器自动选
srcset 是最直接有效的方案，它告诉浏览器“我有多个版本的图”，由浏览器根据设备像素比（dpr）、视口宽度等自主选择最合适的资源。
- 基础写法（按设备像素比区分）：
<img src="logo-1x.png" srcset="logo-1x.png 1x, logo-2x.png 2x" alt="logo">
高清屏（dpr≥2）会优先加载logo-2x.png，清晰度翻倍。 - 更推荐按宽度 + 像素密度组合（适配响应式+高清）：
<img src="banner-800w.jpg" srcset="banner-800w.jpg 800w, banner-1600w.jpg 1600w, banner-2400w.jpg 2400w" sizes="(max-width: 768px) 100vw, 800px" alt="banner">
这样既适配不同屏幕宽度，又确保每张图在对应 DPR 下仍是“1物理像素 = 1图像像素”。
配合 media 属性做精细控制（picture + source）
当需要按屏幕尺寸、DPR、甚至横竖屏等条件组合判断时，<picture> 更灵活。它支持 media 属性，可结合 CSS 媒体查询逻辑。
- 示例：小屏用 1x 图，大屏且高清用 2x 图：
<picture><br> <source media="(min-width: 768px) and (-webkit-min-device-pixel-ratio: 2), (min-width: 768px) and (min-resolution: 192dpi)" srcset="hero-2x.jpg"><br> <source media="(min-width: 768px)" srcset="hero-1x.jpg"><br> <img src="hero-mobile.jpg" alt="hero"><br> </picture> - 注意：
media中的min-resolution推荐用dppx单位（如2dppx），更标准；192dpi≈2dppx，但dppx语义更准确。
图片资源本身要“够大、够清”
再好的 srcset 也救不了低质量原图。关键细节：
立即学习“前端免费学习笔记（深入）”；
- 2x 图的尺寸应为 1x 图的 2 倍（比如 1x 是 400×300，2x 就该是 800×600），不是简单放大已有小图——那只是插值模糊。
- 导出时关闭“压缩过度”：WebP/JPEG 质量建议 ≥80；PNG 用无损或轻微有损（如 TinyPNG 保留细节）。
- 图标类资源优先用 SVG：矢量图天生适配任意分辨率，零模糊。
验证是否生效（别只靠肉眼）
实际加载哪张图，不能只看效果，要用工具确认：
- Chrome DevTools → Network 标签 → 刷新页面 → 筛选
Img→ 查看Size和Content-Type，对比请求的文件名是否为你写的 2x 版本。 - 在 macOS Retina 或 iPhone 上打开，右键「检查元素」→ 查看
<img>的currentSrc属性值（控制台输入$0.currentSrc）。 - 用
window.devicePixelRatio在控制台确认当前设备 DPR（通常 Retina 是 2，iPhone 13 Pro 是 3）。
基本上就这些。srcset 是现代浏览器标配，兼容性到 iOS 8+/Android 4.4+ 都没问题；搭配合理的图片输出和简单 media 控制，就能兼顾清晰度与性能。不复杂，但容易忽略细节。
