--- title: '图片资源优化' description: '本章为 UI 设计师提供界面资源设计规范，通过科学管理图片资源降低内存占用、提升渲染性能、优化安装包体积，适用于设计阶段至开发交付全流程。' lastUpdated: 2025-04-27T03:06:02.000Z --- 本章为 UI 设计师提供界面资源设计规范，通过科学管理图片资源降低内存占用、提升渲染性能、优化安装包体积，适用于设计阶段至开发交付全流程。 ## 图片尺寸适配原则 **推荐级别：强烈** 图片物理尺寸必须与目标显示区域像素尺寸严格匹配，禁止使用超分辨率图片。大尺寸图片会导致内存占用激增，同时增加 GPU 渲染管线压力。 ## 8 位色深资源优先 **推荐级别：建议** 智能手表等穿戴设备屏幕色域有限，建议采用 8 位色深（256 色）PNG 格式： - 通常可以提供足够的颜色范围 - 有助于减少的存储空间 - 支持透明度通道且无画质损失 ## png 图片替代 svg 图片 **推荐级别：建议** svg 只在有动画或动态修改属性等特殊场景时使用，一般情况下都使用 png 格式图片资源 **反例** ```html ``` **正例** ```html ``` ## 删除冗余图片 **推荐级别：建议** 如果图片已经用不到了，需要及时的在项目中删除，否则冗余的图片会使得包体积增加。 ## 资源复用体系 **推荐级别：鼓励** 设计的图片尽量实现共用，来减少存储占用。比如：确定、取消、返回、选中、未选中等使用频繁的按钮。