1. 图片资源概述：位图与矢量图的区别、常见图片格式的适用场景、图片资源在界面中的角色

做界面移植，说白了就是在不同平台之间搬运界面。你想想看，搬家具容易，但搬「图片」这件事，坑特别多。我刚开始做跨平台移植时，就吃过格式不对的亏——一张好好的按钮图，放到另一个系统上直接糊成马赛克。

所以第一节课，咱们先把图片的底细摸清楚。搞懂了这些，后面移植的时候才能少走弯路。

1.1 位图 vs 矢量图：本质区别

这两种图，本质区别就一句话：位图是像素的集合，矢量图是数学公式的集合。

对比维度	位图（Bitmap）	矢量图（Vector）
构成方式	像素点阵（每个点有颜色值）	数学路径（点、线、曲线公式）
缩放表现	放大后出现锯齿/模糊	无限放大依然清晰
文件大小	与分辨率成正比	与图形复杂度相关
编辑灵活性	适合照片、渐变、复杂色彩	适合图标、Logo、插画
常见格式	PNG、JPG、WebP、GIF	SVG、AI、EPS

我记得有一次移植一个医疗App，客户要求支持4K屏。原设计用的全是位图图标，结果一放大，按钮边缘全是锯齿。后来全部换成SVG，问题一次性解决。嗯，这就是血的教训。

1.2 常见图片格式的适用场景

每种格式都有自己的脾气。选对了，事半功倍；选错了，要么体积爆炸，要么效果翻车。

PNG（Portable Network Graphics）

无损压缩，支持透明通道。这是界面开发中最常用的格式。我个人习惯：所有需要透明背景的UI元素，优先用PNG-24。但要注意，PNG的文件体积通常偏大，不适合大尺寸背景图。

• 适用场景：图标、按钮、Logo、需要透明底的任何元素
• 避坑：不要用PNG存照片，一张高清图能到十几MB
• 我踩过的坑：曾经把一个全屏背景存成PNG，结果安装包直接翻倍

JPG（JPEG）

有损压缩，不支持透明。照片和复杂渐变场景的首选。压缩率可以调，质量70%-80%时人眼几乎看不出区别。

• 适用场景：照片、渐变背景、纹理贴图
• 避坑：文字或线条边缘会出现压缩伪影，不适合UI元素
• 小技巧：移植到移动端时，JPG质量可以降到60%，肉眼几乎无差别

SVG（Scalable Vector Graphics）

基于XML的矢量格式。说白了就是一段文本描述图形。这是界面移植的「神器」——一套SVG图标，适配所有分辨率。

• 适用场景：图标、Logo、插画、简单图表
• 避坑：复杂SVG（比如地图）渲染性能差，慎用
• 我建议：界面中的图标库，全部统一成SVG，移植时只需要改颜色变量

WebP

Google推出的现代格式，同时支持有损/无损压缩和透明通道。压缩率比PNG高30%，比JPG高25%。

• 适用场景：Web端和Android端的高性能需求场景
• 避坑：iOS原生支持较晚，旧系统不兼容
• 经验之谈：如果你做的是跨平台移植，WebP可以作为「中间格式」——先转成WebP压缩，再根据目标平台导出对应格式

格式	压缩方式	透明通道	最佳用途	移植注意事项
PNG	无损	✅ 支持	UI元素、图标	注意文件体积
JPG	有损	❌ 不支持	照片、背景	控制压缩质量
SVG	无损（文本）	✅ 支持	图标、Logo	检查渲染兼容性
WebP	有损/无损	✅ 支持	高性能场景	确认目标平台支持

1.3 图片资源在界面中的角色

图片在界面里不只是「装饰」。它承担着三个核心角色，缺一不可。

1. 信息传达：图标、插图、照片直接传递信息。比如一个「设置」齿轮图标，用户一看就懂。
2. 视觉引导：按钮背景、分割线、阴影纹理引导用户操作。没有这些，界面就是一堆文字堆砌。
3. 品牌感知：Logo、品牌色、风格化插画建立品牌认知。移植时如果图片风格变了，用户会觉得「这不是同一个产品」。

我曾经接手过一个项目，从Web端移植到移动端。原设计用了大量JPG背景图，到了手机上加载慢得要命。后来我把所有背景图换成WebP，图标全改成SVG，加载速度提升了40%。你想想看，这就是选对格式的价值。

1.4 知识体系总览

下面这张图，把这一章的核心知识点串起来了。你可以把它当作后续学习的「地图」。

好了，这一章的内容就到这里。图片资源的基础概念搞清楚了，后面咱们再聊具体的移植策略和工具链。记住一句话：选对格式，移植就成功了一半。