很多人遇到图片发虚会第一时间怀疑素材不清晰，但真正常见的原因是流程里的缩放与压缩。要排查清晰度，先分清发虚发生在哪一步：设计软件里就发虚，还是导出后发虚，还是网页或应用里发虚。不同阶段的问题源头完全不同，盲目更换素材只会浪费时间。
建议先准备一张对照图：同一张图片在设计稿里、导出文件里、上线页面里分别截图。把三张图放在一起对比，通常很快就能判断是导出倍率、显示缩放还是压缩策略出了问题。
导出倍率的核心是让“文件像素尺寸”与“显示像素尺寸”匹配。显示区域如果是 200 宽，而你导出的是 201 或 199，就会触发一次非整数缩放，结果边缘会变糊。很多发虚来自这种一像素的错位，而不是来自图片本身。
在高密度屏上，常见做法是提供多倍图，让系统按设备选择。但即使提供多倍图，也要保证每一倍都与对应尺寸严格对齐。否则系统仍然会做二次缩放。倍率的意义不是更大，而是更准确。
线条、文字和图形边缘发虚，最常见原因是落在了半像素位置。比如一个元素宽度是奇数，而你又把它居中对齐，边缘可能落在小数坐标上。显示时会做抗锯齿，结果看起来像糊了一层。解决方法是让关键边缘落在整数像素上，尤其是 1 像素到 2 像素的细线。
在设计阶段可以用对齐到像素网格的方式检查，也可以在导出前把关键图层的位置和尺寸调整为整数。不要依赖后期锐化，因为锐化会放大噪点，且在不同背景上效果不稳定。
裁切时如果裁切框没有落在整数像素，导出后边缘同样会发虚。尤其是在导出图标、按钮背景这种需要硬边缘的素材时，裁切框的位置要非常严格。建议在裁切前先把画布尺寸设为目标像素尺寸，然后让内容对齐到画布，再导出。
如果素材含有阴影或模糊，裁切要预留足够的外边距，避免阴影被截断。阴影被截断后，边缘会出现奇怪的硬线，看起来也像发虚。裁切不是只剪掉空白，它决定了素材在界面里的呼吸空间。
不同内容适合不同格式。界面截图和插画通常适合 WebP 或高质量 JPEG，但包含大面积纯色和清晰边缘的素材，PNG 往往更稳定。压缩过强会引入块状伪影，伪影在渐变区域尤其明显。很多人把伪影误认为发虚，其实是压缩造成的细节损失。
选择压缩参数时不要只看文件大小，还要在常见背景色上预览，尤其是浅色背景和深色背景。伪影在不同背景上显眼程度不同。最终目标是让素材在产品常用场景里稳定，而不是在某个单独预览里看起来最好。
如果导出文件本身清晰，上线后仍然发虚，常见原因是样式层做了缩放。例如容器宽度用百分比导致非整数像素，或者用 transform 做缩放，都会引入插值。此时要做的是让容器尺寸更可控，避免非整数缩放。对于关键图像，可以用固定像素尺寸或在断点处做明确切换。
另一个常见原因是浏览器或系统的缩放比例。设计评审时要统一在一百比一百的缩放下检查，否则同一素材在不同缩放下观感会不同，容易产生误判。
最后把经验写成流程：导出前确认目标显示尺寸，关键边缘整数对齐，裁切框整数对齐，格式与压缩参数按内容类型选择，上线后检查是否存在二次缩放。清晰度问题一旦被流程化，就不会每次都靠个人经验排查。
图片清晰不是靠运气，而是靠每一步的准确。把准确性做成默认，你的界面会更干净，交付也更省心。
当你不确定问题出在导出还是出在实现，可以用对照法：同一张图片分别用不同倍率导出，再在同一显示容器里对比。若某个倍率明显更清晰，说明主要问题是缩放匹配；若所有倍率都糊，说明可能是容器在二次缩放或压缩过强。对照法的价值是把问题从“感觉不清晰”变成“哪个环节在改变像素”。一旦环节明确，修复就会很直接。
另外别忽略颜色与对比的影响。低对比的边缘会让人主观觉得更糊。适当提升边缘对比或调整背景色，有时能显著改善观感。但前提是先把缩放与对齐的问题解决，否则你会在错误方向上用力。
当你不确定问题出在导出还是出在实现，可以用对照法：同一张图片分别用不同倍率导出，再在同一显示容器里对比。若某个倍率明显更清晰，说明主要问题是缩放匹配；若所有倍率都糊，说明可能是容器在二次缩放或压缩过强。对照法的价值是把问题从“感觉不清晰”变成“哪个环节在改变像素”。一旦环节明确，修复就会很直接。
另外别忽略颜色与对比的影响。低对比的边缘会让人主观觉得更糊。适当提升边缘对比或调整背景色，有时能显著改善观感。但前提是先把缩放与对齐的问题解决，否则你会在错误方向上用力。
当你不确定问题出在导出还是出在实现，可以用对照法：同一张图片分别用不同倍率导出，再在同一显示容器里对比。若某个倍率明显更清晰，说明主要问题是缩放匹配；若所有倍率都糊，说明可能是容器在二次缩放或压缩过强。对照法的价值是把问题从“感觉不清晰”变成“哪个环节在改变像素”。一旦环节明确，修复就会很直接。
另外别忽略颜色与对比的影响。低对比的边缘会让人主观觉得更糊。适当提升边缘对比或调整背景色，有时能显著改善观感。但前提是先把缩放与对齐的问题解决，否则你会在错误方向上用力。
