图片显示模糊主因是未匹配设备像素比或导出分辨率不当；需按dpr导出@2x/@3x图、设画布分辨率为72ppi并禁用重采样、关闭色彩空间自动转换、用SVG替代位图、HTML/CSS中启用设备像素渲染。
如果您将PSD文件切图后嵌入HTML5页面，发现图片显示模糊，则很可能是由于切图时未匹配设备像素比（dpr）或导出分辨率设置不当所致。以下是解决此问题的具体步骤：
一、按设备像素比（dpr）导出高倍率图像
移动端高清屏（如Retina、iPhone X及以上）实际渲染像素密度为标准尺寸的2倍或3倍，若仅按设计稿物理尺寸（如375px宽）导出图片，浏览器会拉伸渲染导致模糊。必须按dpr倍数提升切图分辨率。
1、在Photoshop中打开PSD文件，确认设计稿基准宽度（例如iPhone 6/7/8为375px）。
2、对需高清显示的图层或图层组，右键选择【导出为】，在弹出窗口中点击右下角齿轮图标，勾选“导出@2x”或“导出@3x”选项。
立即学习“前端免费学习笔记（深入）”；
3、导出PNG-24格式时，确保“透明度”已启用，并保存至/images目录下对应命名（如logo@2x.png）。
4、在HTML中使用CSS媒体查询配合background-image或img标签srcset属性调用对应倍率图。
二、设置画布分辨率为72ppi并禁用重采样插值失真
Photoshop默认新建文档为72ppi，但若PSD由其他软件导入或经多次缩放，可能隐含非整数缩放痕迹，导致导出像素偏移。需统一归零校准，避免插值算法引入模糊边缘。
1、执行【图像】→【图像大小】，确认“重定图像像素”未被勾选，仅调整文档大小而不增删像素。
2、将“分辨率”手动设为72像素/英寸，单位保持为“像素”，取消“重新采样”复选框。
3、点击“确定”后，再次检查图像尺寸数值是否为整数（如750×1334），若出现小数，执行【图像】→【画布大小】，四舍五入取整并居中定位。
三、导出时关闭色彩空间自动转换与压缩降质
Photoshop在导出Web格式时若启用sRGB强制转换或JPEG有损压缩，会导致色阶截断与高频细节丢失，视觉上呈现灰蒙、发虚现象，尤其在文字边缘与细线元素中明显。
1、点击【文件】→【导出】→【导出为】，格式选择PNG-24（无损）或JPEG质量95%以上。
2、在右侧导出设置面板中，取消勾选“转换为sRGB”（前提是网页CSS已声明color-scheme或使用display-p3兼容写法）。
3、务必勾选“嵌入颜色配置文件”，并在HTML的
中添加保障色彩一致性。四、使用SVG替代位图处理图标与矢量图形
所有非摄影类图形元素（如Logo、按钮、装饰线条、图标）若以PNG导出，在不同缩放层级下必然出现像素化或模糊。SVG为矢量格式，可无限缩放且体积更小，是H5页面高清适配的首选方案。
1、在Photoshop中选中图层，右键选择【复制图层样式】，新建空白文档粘贴为智能对象。
2、执行【文件】→【导出】→【路径到 Illustrator】，保存为.ai文件后，用Illustrator另存为SVG，或直接使用插件如“SVG Export”一键导出。
3、在HTML中以内联SVG方式插入，或通过
引用，并在CSS中设置width与height为rem/em单位，配合max-width:100%实现响应式缩放。
五、HTML/CSS中强制启用设备像素渲染
即使图片资源本身清晰，若CSS未正确声明渲染上下文，浏览器仍可能以低DPR逻辑渲染，造成视觉模糊。需通过viewport、image-rendering及缩放控制确保像素级精准映射。
1、在HTML的
中插入标准viewport标签：2、对img元素添加CSS规则：img { image-rendering: -webkit-optimize-contrast; image-rendering: crisp-edges; }
3、针对背景图，使用background-size: contain或cover的同时，配合background-position: center center和background-repeat: no-repeat，避免重复拉伸失真。
