怎样处理高分屏图片模糊？

高分屏下<img>模糊主因是浏览器用低分辨率图强行拉伸填充CSS像素区域，触发双线性插值致边缘发虚；根本解法是用srcset+sizes让浏览器按设备像素比自动选对图源，并配合image-rendering等CSS控制重采样。

为什么高分屏下 <img> 会模糊

不是图片本身糊，而是浏览器在高 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 小图

示例：

<img src="img-800.jpg"      srcset="img-400.jpg 400w, img-800.jpg 800w, img-1200.jpg 1200w"      sizes="(max-width: 480px) 100vw, (max-width: 960px) 50vw, 800px"      alt="图表">

强制渲染锐化：慎用但有时管用

当无法提供多倍图（比如动态生成的头像、截图），可尝试用 CSS 控制重采样方式。注意：它不提升真实分辨率，只改变插值算法。

立即学习“前端免费学习笔记（深入）”；

• image-rendering: crisp-edges 对线条图、图标有效，让边缘硬朗；对照片类内容可能显锯齿，别乱套
• image-rendering: pixelated 强制最近邻缩放，适合像素风，但普通场景会明显块状
• -webkit-optimize-contrast 在 Safari 旧版里还能起效，新版本已不推荐
• 这些属性要加在 <img> 上，不是父容器；且需配合 width/height 固定尺寸，否则无效

Word 里插 HTML 图片也糊？那是 DPI 缩放惹的祸

Word 不是浏览器，它把 HTML 中的 <img> 当作嵌入对象处理，默认按系统缩放比（如 125%）二次拉伸，再用双线性滤波重采样——这才是 Word 里图变糊的根本原因。

• 确认方式：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 流程。