HTML5中变模糊是因高DPI屏幕下浏览器拉伸低分辨率图所致，解决方法包括：用srcset+sizes提供多分辨率资源、CSS控制image-rendering渲染质量、导出时注意尺寸与滤波器设置。
为什么
不是 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"）或像素密度描述符（如"[email protected] 2x"） -
sizes告诉浏览器在不同视口宽度下，该的显示宽度（CSS 像素），让浏览器预判该加载哪张 - 避免混用
w和x描述符——w更灵活，推荐优先用
@@##@@
强制禁用缩放插值（仅限局部可控场景）
当必须用固定尺寸缩放一张图（比如头像裁剪容器），且无法提供多倍图时，可尝试 CSS 控制渲染质量。但注意：这不是根本解法，仅缓解，且部分属性兼容性有限。
