MV Tools

实用图片流程

为网页分享和透明背景准备图片

从确定用途、主动裁切、选择可量化的网页格式,到发布前检查透明边缘的一套实用图片导出流程。

MV Tools 编辑团队更新于 约 9 分钟阅读

打开工具

先确定用途、构图,并保留未修改原图

网页卡片、社交媒体图片、邮件附件和商品图,即使使用同一源图,也可能要求不同长宽比。改图前先写下目标画幅、展示位置以及是否需要透明背景。

本教程使用一张自制的 1600 × 1000 图片,目标网页位置为 1200 × 750,二者同为 8:5,因此 Fill 可以得到精确画幅而无需补造像素。请保留原图;导出副本只服务于某一个用途。

原图应保留在发布流程之外。
原图应保留在发布流程之外。

有意识地选择缩放模式

按宽或按高会根据一个边保留源图比例;适配会把完整图片放入框内,可能留下空白;填充会从中心裁切得到精确框。只有确认主体和重要边缘都在中心裁切范围内时,填充才合适。

需求更稳妥的选择导出前检查
固定一条边按宽或按高另一条边是否仍合适?
完整保留画面适配是否接受空白?
精确卡片或横幅画幅填充中心裁切是否安全?
透明主体抠图后使用 PNG边缘是否适合最终背景?

导出可量化的网页副本

下面的真实流程选择了 Fill、1200 × 750、WebP、质量 82,并启用移除元数据。源图得到 12 KB 的输出。WebP 常适合照片或插画网页素材,但最终体积和画面质量取决于源图;请打开结果检查,不要假定任何固定比例都适用。

处理前先明确目标画幅。
处理前先明确目标画幅。

读取结果,并让源图保持独立

完成结果会报告 1600 × 1000 → 1200 × 750 与实际输出大小。把它下载成新文件。它不能替代源图,也不意味着同一裁切适用于所有位置。

核对报告尺寸后再下载新文件。
核对报告尺寸后再下载新文件。

只有在位置需要时才创建透明背景

本教程将准备好的 WebP 交给去背景工具,生成 101 KB 的透明 PNG。主体轮廓清楚、背景更简单时通常更容易得到可用的初始抠图;头发、玻璃、细阴影、半透明材质与近似颜色都需要更仔细检查。

使用针对用途准备的副本,而不是唯一的原图。
使用针对用途准备的副本,而不是唯一的原图。

已完成去背景任务,可下载透明 PNG。

完成只表示应开始检查,不代表每条边缘都完美。

完成只表示应开始检查,不代表每条边缘都完美。
完成只表示应开始检查,不代表每条边缘都完美。

在浅色和深色背景上检查抠图

透明背景在棋盘格上正常,并不代表在实际布局中没有白边或缺失边缘。请把下载的 PNG 放到浅色和深色背景上,并以接近实际展示尺寸检查边缘、残留背景、裁切以及较大 PNG 是否适合投放渠道。

  • 分开保留原图与有名称的导出版本。
  • 不要只为满足一个数字而放大小图。
  • 发布前在用户实际看到的位置打开最终素材。
原图应保留在发布流程之外。
原图应保留在发布流程之外。
请在最终会出现的背景上检查抠图。
请在最终会出现的背景上检查抠图。

了解这套流程无法替你决定的事

缩放成功或抠图完成,并不能决定图片权利、无障碍替代文字、品牌审核、可见隐私,或每个用途最合适的压缩水平。请将工具输出视为可检查的发布素材,而不是最终审批。

常见问题

应该选适配还是填充?

必须保留全部画面时选适配;只有检查过中心裁切且必须得到精确画幅时才选填充。

为什么透明 PNG 比 WebP 大?

PNG 保留透明像素且采用无损编码,因此抠图可能大得多。只有需要透明背景时才选它,否则使用合适的不透明网页格式。

移除元数据能隐藏画面里的隐私吗?

不能。它影响嵌入元数据,不影响像素;可见细节仍需单独检查或打码。