HTML5中变模糊是因高DPI屏幕下浏览器拉伸低分辨率图所致，解决方法包括：用srcset+sizes提供多分辨率资源、CSS控制image-rendering渲染质量、导出时注意尺寸与滤波器设置。
为什么 ![html5改格式后图片模糊_分辨率提升补救法【操作】]()
不是 HTML5 本身导致模糊，而是现代浏览器对高 DPI 屏幕（如 Retina、Windows HiDPI）的默认渲染策略变化：当图片物理像素数低于设备像素比（window.devicePixelRatio），浏览器会拉伸低分辨率图，造成模糊。常见于直接用 CSS 设置 width/height 缩放原始小图，或未提供适配资源。
用 srcset + sizes 让浏览器自动选高清图
这是最标准、兼容性好（Chrome 38+、Firefox 38+、Safari 9+、Edge 13+）、且不依赖 JS 的方案。关键不是“改格式”，而是提供多套分辨率资源并声明密度关系。
-
srcset列出不同宽度的图源及对应宽度描述符（如"img-400w.jpg 400w"）或像素密度描述符（如"img@2x.jpg 2x"） -
sizes告诉浏览器在不同视口宽度下，该 - 避免混用
w和x描述符——w更灵活，推荐优先用
@@##@@
强制禁用缩放插值（仅限局部可控场景）
当必须用固定尺寸缩放一张图（比如头像裁剪容器），且无法提供多倍图时，可尝试 CSS 控制渲染质量。但注意：这不是根本解法，仅缓解，且部分属性兼容性有限。
-
image-rendering: -webkit-optimize-contrast（Safari 旧版）或crisp-edges（Chrome/Firefox 较新版本）可抑制平滑插值，让边缘更锐利（适合图标、线条图） -
image-rendering: pixelated强制最近邻缩放，适合像素风或需要保留块状感的场景 - 这些属性对照片类内容可能反而显得锯齿，慎用；且不改变实际分辨率，只是重绘方式
导出时别只盯 PNG/JPEG，检查实际输出尺寸和压缩参数
很多“模糊”源于设计稿导出设置错误，而非前端代码问题：
立即学习“前端免费学习笔记（深入）”；
- Figma/Sketch 导出时勾选
@2x或@3x，但没同步更新srcset中的尺寸标注，导致浏览器仍加载低倍图 - Photoshop “导出为” 默认启用“优化 JPEG 质量”，但勾选“转换为 sRGB”和“嵌入颜色配置文件”有时影响观感，建议关闭后者
- 使用
sharp（Node.js）或convert（ImageMagick）批量生成多倍图时，确保 resize 使用 lanczos 滤波器（sharp.resize(800, 600, { kernel: 'lanczos' })），而非默认的 bilinear
真正容易被忽略的点是：sizes 的值必须与 CSS 中该图片的最终布局宽度一致。哪怕只差 10px，浏览器就可能选错资源。上线前用 Chrome DevTools 的 Network 面板过滤 image，看实际加载的是哪张图。
