Sprite 网页预览发糊，下载 PNG 就坏了吗？分开显示与源像素

封面为 AI 生成的角色动作与分件示意，不是像素画样张、缩放算法对照或清晰度测试。

切出来的 Sprite 在网页里边缘发软，是否必须重切？先下载同一文件检查。浏览器把小图放大的显示结果，与 PNG 本身像素是否改变，是不同的证据。

保存同一文件，不用截图代替

保留下载 PNG，记录真实宽高和文件版本。截图包含布局、显示缩放和合成结果，不能替代源文件来判断像素是否被改。拿旧下载图和新预览比较，也无法把差异只归因于显示。

自然尺寸与显示尺寸分开记录

MDN 的 image-rendering 文档说明，图像缩放算法影响显示，页面尺寸与用户缩放都可能触发缩放。显示发软不自动证明文件已改；显示锐利也不证明增加了真实细节。

假设原图32×32，页面按128×128的CSS尺寸展示，宽高是4倍；按100×100展示则为3.125倍。这只是尺寸算例，不是设备物理像素测量，也不是我们实测过的浏览器效果。

只改变显示条件做一次对照

1. 固定同一下载文件，用能确认比例的查看方式检查自然尺寸。
2. 记录网页显示宽高和浏览器缩放状态。
3. 对像素画，可比较整数倍与其他比例，不同时重新压缩文件。
4. 再到目标项目检查真实过滤、缩放和显示环境。

整数倍对照减少变量，不保证所有屏幕完全对齐。设备像素比、页面变换和渲染环境仍可能影响结果；自然尺寸也不等于在所有设备上一源像素对应一物理像素。

像素画与平滑绘画有不同目标

像素画可能希望保留硬边，平滑绘制角色则可能本来就有渐变和半透明边缘。不要给所有图套同一锐度标准，也不拿本篇平滑概念封面当像素画测试。显示规则不会修复源文件已丢失的细节。

需要调整页面显示策略时，由页面负责人按真实场景验证。本文不表示 Tooliva 已提供某个滤镜开关，也不把浏览器样式当作游戏引擎纹理导入设置。

何时返回切图或导出检查

源文件实际宽高、轮廓或透明像素已与预期不同，再查裁剪、缩放、编码和导出。需重新处理时，在Sprite 切图工具处理副本并保留原图，在相同显示条件下比较，不围绕放大截图反复生成素材。

若争议只是把72改成300，先看密度与像素尺寸区别。交接记录写文件宽高、显示宽高、缩放、真实观察和待查项，比一句“PNG糊了”更易复现。