高分屏下模糊主因是浏览器用低分辨率图强行拉伸填充CSS像素区域，触发双线性插值致边缘发虚；根本解法是用srcset+sizes让浏览器按设备像素比自动选对图源，并配合image-rendering等CSS控制重采样。
为什么高分屏下 ![]()
不是图片本身糊，而是浏览器在高 window.devicePixelRatio（比如 2x/3x）屏幕上，用低分辨率图强行拉伸填充 CSS 像素区域，触发双线性插值——结果就是边缘发虚、文字发毛、图标变“毛玻璃”。常见于直接设 width/height 属性缩放小图，或没提供适配资源。
用 srcset + sizes 让浏览器自动选对图
这是最稳妥、不依赖 JS、兼容主流浏览器的方案。关键不是“换高清图”，而是告诉浏览器：“不同设备像素密度下，该加载哪张”。
-
srcset里只用w描述符（如"img-800.jpg 800w"），别混用x和w，否则解析逻辑混乱 -
sizes必须写实际 CSS 显示宽度（如"(max-width: 768px) 100vw, 50vw"），不能写100%或留空 - 原始
src是 fallback，必须存在且是中等分辨率（比如 800w），别设成 400w 小图
示例：
@@##@@
强制渲染锐化：慎用但有时管用
当无法提供多倍图（比如动态生成的头像、截图），可尝试用 CSS 控制重采样方式。注意：它不提升真实分辨率，只改变插值算法。
-
image-rendering: crisp-edges对线条图、图标有效，让边缘硬朗；对照片类内容可能显锯齿，别乱套 -
image-rendering: pixelated强制最近邻缩放，适合像素风，但普通场景会明显块状 -
-webkit-optimize-contrast在 Safari 旧版里还能起效，新版本已不推荐 - 这些属性要加在
width/height固定尺寸，否则无效
Word 里插 HTML 图片也糊？那是 DPI 缩放惹的祸
Word 不是浏览器，它把 HTML 中的
- 确认方式：Windows 设置里看缩放比例，然后 Word → 文件 → 选项 → 高级 → 勾选「禁用硬件图形加速」重启，如果变清晰，就是它
- 修复要点：
srcset必须带@2x版本，width/height要和 @2x 图的物理像素匹配（如图是 600×400，就设width="300"） - 必加内联样式：
style="image-rendering: -webkit-optimize-contrast;"，这是抑制 Word 内部模糊插值的唯一有效手段 - 粘贴进 Word 后务必右键 → 「设置图片格式」→ 取消「锁定纵横比」和「相对于原图缩放」，手动填磅值（如
300 磅），别拖拽
SVG 在 Word 里基本等于放弃——粘贴即转位图，再高清也糊。真要矢量保真，提前导出为 2x PNG，再走 srcset 流程。
前端入门到VUE实战笔记：立即使用
在学习笔记中，你将探索 前端 的入门与实战技巧！
