# 💡Summary > [!Info] > 一句话说清楚 > 这是一个非常关键的**“最后一公里”**环节。简单来说，是为了**“既要看起来高清，又要加载速度快”**。 如果不做好这一步，你的 App 在 iPhone 上看起来会像满是马赛克的“我的世界”，或者网页加载慢得像蜗牛。 这里主要解决两个问题：**屏幕清晰度（分辨率）** 和 **性能（文件大小）**。 --- ### 1. `@2x_@3x` (移动端倍图) —— 解决“模糊”问题 这是为了适配**高清屏（Retina Display）**。 - **痛点：** 以前的屏幕，1个逻辑像素 = 1个物理像素（@1x）。现在的手机屏幕（如 iPhone），像素密度极高。如果你只给一张 @1x 的普通图片，在高分屏上被强行拉大显示，就会**变得模糊、有锯齿**，显得你的 App 很廉价。 - **解决方案：** 设计师需要导出三套不同大小的图片，系统会根据手机屏幕自动抓取最合适的那张。 - **@1x (1倍图)：** 原始尺寸（现在很少用了，通常作为基准）。 - **@2x (2倍图)：** 长宽是基准的 2 倍（适用于普通 iPhone, 大部分 Android）。 - **@3x (3倍图)：** 长宽是基准的 3 倍（适用于 iPhone Pro Max 等超高清屏）。 **给到开发团队的具体指令：** - **iOS (@刘浩鹏)：** 必须给他 `@2x` 和 `@3x` 的 PNG 或 PDF。如果不给 @3x，在 iPhone 15 Pro Max 上图标边缘会发虚。 - **Android (@傅永航)：** Android 对应的是 `hdpi`, `xhdpi`, `xxhdpi`，逻辑是一样的，通常也直接用 2x/3x 或者 SVG。 --- ### 2. `SVG / WebP` (Web端格式) —— 解决“性能”问题 这是为了**网页加载速度**和**无损缩放**。 #### **SVG (可缩放矢量图形)** - **是什么：** 它不是“图片”，而是一段“代码/数学公式”，描述了线条和颜色。 - **用途：** **图标 (Icons)、Logo、简单插画**。 - **优势：** 1. **无限放大不模糊：** 无论是在手机还是在 8K 电视上，永远清晰锐利。 2. **体积极小：** 一个图标可能只有 1KB。 3. **可编程：** 开发可以通过代码直接修改它的颜色（比如暗黑模式自动变白），不需要设计师重新切图。 #### **WebP (现代网络图片格式)** - **是什么：** Google 开发的一种图片格式，用来替代 JPG 和 PNG。 - **用途：** **照片、复杂的背景图、Banner**。 - **优势：** - 在**画质肉眼看不出区别**的前提下，文件体积比 PNG/JPG **小 30%~50%**。 - 这对 **Web (@蒋缇)** 和 **浏览器插件 (@刘新煌)** 至关重要，因为插件包体积有限制，网页打开速度直接影响用户留存。 --- ### 总结：如何分配给你的团队？ |**素材类型**|**格式选择**|**给谁**|**理由**| |---|---|---|---| |**图标 (Icon)/Logo**|**SVG**|全员 (Web/iOS/Android)|矢量无损，体积小，代码可换色。| |**照片/Banner (Web端)**|**WebP**|Web (@蒋缇) / 插件 (@刘新煌)|打开速度快，节省流量。| |**照片/Banner (App端)**|**PNG/JPG (@2x, @3x)**|iOS (@刘浩鹏) / Android (@傅永航)|确保在高分辨率手机上显示清晰。| **简单一句话：** 切图导出的规范，决定了你的产品是**“精致的高科技产品”**还是**“粗糙的山寨软件”**。 # 🧩 Cues # 🪞Notes