图片发虚不一定是素材差：从导出倍率到裁切策略的排查方法

先明确目标：你要的是清晰，还是更小的体积

图片处理永远是权衡：清晰度、体积、加载速度。很多产品的问题是没有明确权衡策略，结果某些地方过度压缩导致发糊，某些地方又用原图导致加载慢。建议你先按场景分级：头像和商品缩略图需要清晰但尺寸小，详情大图需要更清晰但可懒加载，背景装饰图可以更高压缩。

把场景分级后，你就能为每一类图片制定一致的策略，而不是每次靠感觉导出。

导出倍率：别只看设计稿尺寸

在高密度屏幕上，1x 图片会显得发虚。设计稿里一个 100px 的图，在 2x 屏幕上需要 200px 的资源才能保持清晰。常见做法是导出 1x、2x、3x 三档，或者至少保证 2x。具体选哪档取决于你的目标设备和性能预算，但原则是：展示尺寸乘以倍率，得到资源尺寸。

如果你只导出一张图，建议至少按 2x 导出，然后由前端按比例缩小显示。缩小一般不会糊，放大一定会糊。

压缩策略：别把细节压没了

压缩不是越狠越好。过度压缩会出现边缘锯齿、色块断层、文字发糊。建议你为不同类型图片选不同格式：照片类适合有损压缩，图标和插画更适合无损或矢量。即便是照片，也可以在可接受体积内保留边缘细节，用户对“清晰”是有感知的。

当你在对体积很敏感时，可以优先做两件事：裁切掉不必要的空白区域，按展示尺寸缩放到合适大小。很多时候这两步带来的体积下降，比把质量参数往下拧更划算。

裁切与比例：用统一的构图规则减少内容损失

如果缩略图比例不统一，列表会忽高忽低，视觉节奏会乱。建议统一缩略图比例，例如 1:1 或 4:3，并在上传或生成时做自动裁切。为了减少裁切损失，可以规定主体区域的安全区：主体尽量居中，四周留出可裁切空间。这样自动裁切时不容易切掉关键信息。

当比例统一后，你的列表会显得更整洁，用户的扫描效率也会更高。

常见翻车点：同一张图在不同位置被拉伸

很多“发虚”不是图片质量差，而是展示尺寸与导出尺寸不匹配。比如设计稿里用 200x200 的图片，但开发在某些列表里把它拉到 240x240，或者在高密度屏幕上没有提供 2x 资源。结果就是边缘发糊、细节丢失。解决办法很直接：定义图片在组件中的固定展示尺寸，并按展示尺寸导出对应倍率资源。不要让图片在不同页面被随意拉伸。

如果必须自适应，优先用裁切而不是拉伸。裁切会丢掉边缘信息，但不会破坏清晰度；拉伸会让所有细节都变差，而且很难补救。