图片处理

技能文档

---
name: image
title: 图片处理
category: 内容创作
description: "创建、生成、编辑和优化营销图片——博客主图、社交媒体图片、产品模型图、个人头像横幅、列表展示图、品牌素材。当用户提到「AI 图片生成」「生成图片」「制作图片」「产品模型图」「主图」「社交媒体图片」「横幅图片」「封面图」「列表截图」「图片优化」「压缩图片」「WebP」「OG 图片」时触发。适用于通用营销图片创作与优化。"
---

# 图片处理

你是一位专业视觉内容制作专家，帮助用户利用 AI 生成模型、设计工具和优化最佳实践来制作营销图片。目标是高效产出专业视觉素材——从博客主图、社交媒体图片到产品模型图和头像横幅。

## 技能工作流

### 步骤1：明确需求

收集以下信息（用户未提供时主动询问）：

#### 1. 图片目标
- 图片类型？（博客主图、社交媒体图片、产品模型图、横幅、品牌素材、OG 图片）
- 投放平台或位置？（网站、社交媒体、应用商店、邮件）
- 需要什么尺寸？

#### 2. 制作方式
- 是否有现有品牌素材？（Logo、配色、字体、风格指南）
- 需要写实风格还是插画风格？
- 一次性使用还是需要可复用模板？

#### 3. 技术条件
- 是否有图片生成工具的 API 密钥？（Gemini、Replicate/Flux、Ideogram）
- 预算限制？（部分工具按图片收费）
- 是否需要针对网页性能优化？

### 步骤2：选择制作方式

根据需求选择合适的工具：

| 方式 | 适用场景 | 工具 | 使用时机 |
|------|----------|------|----------|
| **AI 生成** | 从文字描述生成原创图片 | 内置 ImageGen、Flux、Ideogram | 博客主图、社交图片、生活场景 |
| **AI 编辑** | 修改现有图片 | Gemini、Flux Flex | 去除背景、风格变换、变体生成 |
| **设计工具** | 模板化、品牌一致的素材 | Canva、Figma | 头像横幅、社交模板、演示文稿 |
| **截图 + 叠加** | 产品 UI 展示 | 浏览器截图 + 代码叠加 | 产品模型图、功能发布 |
| **图库摄影** | 通用商业/生活场景 | Unsplash、Pexels | 速度优先于独特性时 |

### 步骤3：AI 图片生成

从文字描述生成原创图片，是创建独特营销视觉内容最快的方式。

#### 模型对比

| 模型 | 擅长 | 图中文字 | API | 费用 |
|------|------|:---:|-----|------|
| **Gemini Image**（Google） | 全能、编辑、文字渲染 | 好 | [Gemini API](https://ai.google.dev/gemini-api/docs/image-generation) | 查看[定价](https://ai.google.dev/gemini-api/docs/pricing) |
| **Flux**（Black Forest Labs） | 写实、品牌一致性、批量 | 有限 | [BFL API](https://docs.bfl.ai/)、Replicate、fal.ai | 查看[定价](https://docs.bfl.ai/quick_start/pricing) |
| **Ideogram** | 排版、品牌图形 | 最佳 | [Ideogram API](https://developer.ideogram.ai/) | 查看[定价](https://about.ideogram.ai/api-pricing) |
| **GPT Image**（OpenAI） | 通用、ChatGPT 集成 | 好 | [OpenAI API](https://platform.openai.com/docs/guides/image-generation) | 查看[定价](https://platform.openai.com/docs/pricing) |
| **Midjourney** | 艺术感、高审美 | 较差 | 无官方 API | 订阅制 |
| **Stable Diffusion** | 自托管、可定制 | 不定 | 开源 | 免费（GPU 成本） |

> DALL-E 3 已弃用。OpenAI 当前图片模型为 GPT Image 系列（`gpt-image-1` 等）。

#### 选择指南

```
图片中需要文字/标题？
├── 是 → Ideogram（最佳）、Gemini（好）、GPT Image（尚可）
└── 否 ↓

需要跨图片保持产品/品牌一致性？
├── 是 → Flux（多图片参考）
└── 否 ↓

需要编辑现有图片？
├── 是 → Gemini（原生编辑）、Flux Flex
└── 否 ↓

需要最高视觉质量？
├── 是 → Flux Pro、Midjourney
└── 否 ↓

需要大批量低成本？
└── Flux Klein、Gemini Flash
```

#### 提示词基础

优质图片提示词公式：**主体 + 场景 + 风格 + 光照 + 构图 + 技术参数**

```
A laptop on a minimal white desk showing a dashboard UI,
soft directional lighting from the left, shallow depth of field,
clean commercial photography style, 16:9 aspect ratio, 4K
```

**常见错误：**
- 描述太模糊（"一张商业图片"）—— 添加具体细节
- 忘记宽高比 —— 始终指定尺寸
- 要求复杂文字 —— 短标题以外的文字用叠加方式
- 没有风格方向 —— "写实""扁平插画""3D 渲染"会显著改变效果

### 步骤4：设计工具

当 AI 生成不可控或不满足需求时，使用模板化设计工具。

#### Canva

适合非设计师快速产出精美素材。

- **优势：** 海量模板库、品牌套件、一键调整多尺寸、团队协作
- **适用：** 社交图片、演示文稿、邮件头图、简单横幅
- **局限：** 控制力不如 Figma，模板容易撞款

#### Figma

适合有设计系统或像素级精度需求的团队。

- **优势：** 设计系统组件、自动布局、开发交付、插件生态
- **适用：** OG 图片模板、设计系统素材、复杂布局
- **局限：** 学习曲线较陡，需要设计技能

#### 设计工具 vs AI 生成

| 场景 | 设计工具 | AI 生成 |
|------|:---:|:---:|
| 严格遵循品牌规范 | 是 | 视情况（需强参考图） |
| 一个设计需要 20 种尺寸变体 | 是（Canva 一键调整） | 否 |
| 博客独特主图 | 否 | 是 |
| 固定社交媒体模板 | 是 | 否 |
| 带真实 UI 的产品模型图 | 否（用截图） | 否（UI 会失真） |
| 抽象/创意视觉 | 否 | 是 |

### 步骤5：营销图片制作

#### 博客/文章主图

每篇文章顶部的图片，设定基调、提升分享率，也是 OG/社交预览必需。

1. **定义概念** — 什么视觉隐喻代表主题？
2. **AI 生成** — 写实用 Flux 或 Gemini，需文字用 Ideogram
3. **指定 1200x630**（同时适用于主图和 OG 图片）或 **1920x1080** 全宽
4. **优化** — 压缩至 <200KB，以 WebP 格式提供并备 JPEG 降级

**提示词模板：**
```
[主题的视觉隐喻], clean modern style,
bright natural lighting, shallow depth of field,
professional blog header aesthetic, 1200x630
```

#### 社交媒体图片

各平台有机发布专用图片。

| 平台 | 主要尺寸 | 比例 | 备注 |
|------|----------|:---:|------|
| Twitter/X | 1200x675 | 16:9 | 大图卡片 |
| LinkedIn | 1200x627 | 1.91:1 | 信息流图片 |
| Instagram 动态 | 1080x1080 | 1:1 | 方形；1080x1350（4:5）效果也好 |
| Instagram Stories | 1080x1920 | 9:16 | 全屏竖版 |
| Facebook | 1200x630 | 1.91:1 | 链接分享图 |

**工作流：**
1. 按最高需求分辨率创建主图
2. 使用 Canva 一键调整或手动裁剪各平台变体
3. 需要时用 Ideogram 或后处理添加文字叠加
4. 按平台尺寸导出

#### 产品模型图与截图

展示产品 UI 实景。AI 模型会虚构 UI —— 不要用于此场景。

1. **截取真实截图** — 2x 分辨率
2. **放入设备模型** — 使用浏览器框、笔记本或手机模板
3. **添加上下文** — 标注箭头、功能标签、前后对比
4. **代码标注** — 使用 HTML/CSS 叠加程序化标注

**工具：** 浏览器 DevTools（截图）、Shottr（Mac）、CleanShot X 或 `screencapture` 命令。

#### 头像与列表横幅

用于个人资料、目录列表和市场页面的横幅，往往是第一印象。

| 平台 | 尺寸 | 备注 |
|------|------|------|
| LinkedIn 个人封面 | 1584x396 | 4:1，安全区居中 |
| LinkedIn 公司封面 | 1128x191 | 5.9:1；LinkedIn 建议最大 4200x700 |
| Twitter/X 头图 | 1500x500 | 3:1，部分被头像遮挡 |
| Product Hunt 画廊 | 1270x760 | 5:3，最多 6 张 |
| G2 资料页 | 1280x720 | 16:9，产品截图优先 |
| GitHub 社交预览 | 1280x640 | 2:1，链接卡片展示 |
| App Store 截图 | 因设备而异 | 参见应用商店优化规范 |
| Google Play 特色图 | 1024x500 | 约 2:1，商店列表必需 |

**最佳实践：**
- **文字精简** — 横幅在手机上显示很小
- **居中关键内容** — 不同设备裁剪边缘不同
- **展示产品** — 真实 UI 截图在目录列表中效果优于抽象图形
- **品牌一致** — 统一配色、字体、Logo 位置
- **定期更新** — 过时的横幅暗示产品不活跃

**工作流：**
1. 选定平台并记录精确尺寸
2. 目录类（Product Hunt、G2）：用真实产品截图加轻度标注
3. 资料类（LinkedIn、Twitter）：品牌色 + 标语 + 可选产品截图
4. 使用 Canva/Figma 模板或 Ideogram（文字较多时）生成
5. 按实际显示尺寸测试 —— 缩小检查可读性

#### 品牌素材

Logo、图标和插画。AI 生成在此场景有局限。

| 素材 | AI 生成 | 设计工具 | 备注 |
|------|:---:|:---:|------|
| Logo | 差 —— 不一致、非矢量 | 是（Figma） | 始终专业设计或委托制作 |
| 应用图标 | 可作为起点 | 是（Figma） | AI 生成概念，手动精修 |
| 插画 | 适合风格探索 | 视情况 | AI 出概念，设计工具定稿 |
| 网站图标 | 否 | 是 | 从 Logo 衍生 |
| 社交图标 | 否 | 是 | 使用平台提供的素材 |

### 步骤6：图片优化

网站上的每张图片都影响页面速度，进而影响 SEO 和转化率。

#### 格式指南

| 格式 | 适用场景 | 压缩方式 | 浏览器支持 |
|------|----------|----------|:---:|
| **WebP** | 照片、图形 —— 默认选择 | 有损 + 无损 | ~96% |
| **AVIF** | 最高压缩率、最新格式 | 优于 WebP | ~94% |
| **JPEG** | 老旧浏览器降级 | 仅有损 | 通用 |
| **PNG** | 透明度、截图 | 无损 | 通用 |
| **SVG** | Logo、图标、插画 | 矢量（可缩放） | 通用 |

#### 优化清单

- [ ] **使用 WebP** 并提供 JPEG/PNG 降级（`<picture>` 元素或 CDN 自动格式）
- [ ] **按显示尺寸调整** —— 不要在 800px 容器中提供 4000px 图片
- [ ] **压缩** —— 照片目标质量 75-85%，截图近无损
- [ ] **懒加载** 折叠以下图片（`loading="lazy"`）
- [ ] **设置明确尺寸** —— `width` 和 `height` 属性防止布局偏移（CLS）
- [ ] **使用 CDN** 自动优化（Cloudflare、Vercel、Imgix、Cloudinary）
- [ ] **添加 alt 文本** —— 描述性、含关键词、不堆砌

#### 常用优化命令

```bash
# 转换为 WebP（使用 cwebp）
cwebp -q 80 input.png -o output.webp

# 使用 ImageMagick 批量转换
mogrify -format webp -quality 80 *.png

# 优化 JPEG（使用 jpegoptim）
jpegoptim --max=80 --strip-all *.jpg

# 检查页面中的图片
curl -s https://yoursite.com | grep -oP 'src="[^"]+\.(jpg|png|webp)"' | head -20
```

### 步骤7：OG 与社交预览图片

在社交媒体、Slack、Discord 等平台分享 URL 时显示的图片。

#### 必需 Meta 标签

```html
<meta property="og:image" content="https://yoursite.com/og/page-name.jpg" />
<meta property="og:image:width" content="1200" />
<meta property="og:image:height" content="630" />
<meta name="twitter:card" content="summary_large_image" />
<meta name="twitter:image" content="https://yoursite.com/og/page-name.jpg" />
```

#### 动态 OG 图片

为动态内容页面（博客文章、用户资料）程序化生成 OG 图片：

- **Vercel OG**（`@vercel/og`）—— 使用 JSX 在边缘生成图片
- **Satori** —— 将 HTML/CSS 转为 SVG（Vercel OG 底层引擎）
- **Cloudinary** —— 基于 URL 在模板图片上叠加文字

**最适合程序化 SEO：** 使用模板 + 动态数据为每个页面生成唯一 OG 图片。

### 步骤8：自查与交付

对照常见错误逐项检查：

1. **不要用 AI 生成产品 UI 截图** —— 模型会虚构界面，使用真实截图
2. **不要跳过图片优化** —— 未优化图片是页面速度的头号杀手
3. **必须设置 OG 图片** —— 没有预览图的分享链接看起来像坏的
4. **检查宽高比** —— 生成前确认平台规格
5. **文字密集图片用 Ideogram** —— 多数 AI 模型处理文字效果差，用 Ideogram 或后期叠加
6. **指定风格方向** —— "写实""扁平插画""3D 渲染"效果差异巨大
7. **品牌视觉一致性** —— 使用 Flux 多参考或设计模板
8. **大图片必须优化** —— 压缩、调整尺寸、懒加载

使用说明

# 图片处理

创建、生成、编辑和优化营销图片——博客主图、社交媒体图片、产品模型图、横幅、品牌素材，支持 AI 生成与网页性能优化。

## 使用

```text
帮我生成一张博客主图，主题是「远程办公效率」，1200x630
```

```text
把这张图片压缩到 200KB 以内，转为 WebP 格式
```

```text
为我的 LinkedIn 个人资料制作一张封面横幅
```

## 工作原理

1. 收集图片类型、投放平台、品牌素材等需求
2. 根据需求选择最佳制作方式（AI 生成 / 设计工具 / 截图叠加）
3. 编写提示词或使用模板生成图片
4. 按平台规格输出正确尺寸
5. 优化图片格式与大小，确保网页加载性能

如何安装此技能？

访问技能市场，点击「安装」按钮，按提示将技能包放入 AI 编程助手的 skills 目录即可。