
claude-seo 图像后处理流水线实战用 ImageMagick 与 FFmpeg 把 AI 生成图加工成 SEO 可用素材【免费下载链接】claude-seoUniversal SEO skill for Claude Code. 26 sub-skills 19 sub-agents covering technical SEO, E-E-A-T, schema, GEO/AEO, agent readiness (Lighthouse Agentic Browsing, WebMCP, llms.txt), backlinks, local SEO, e-commerce, international SEO, Google APIs, and PDF/Excel reporting. 9 optional extensions for live SEO data.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-seo本篇技术指南聚焦 claude-seo 项目中seo-image-gen技能skill 定义的后处理环节关联参考文档当 Gemini 通过 banana 扩展生成原始 PNG 之后如何用 ImageMagick 7/6 与 FFmpeg 完成平台尺寸裁切、背景去底、WebP/AVIF 压缩、绿幕抠图、批量处理与动画合成最终交付可直接上线、满足页面速度与结构化数据要求的 SEO 素材。读完本文你将掌握一整套可复制、可批量的命令行后处理方案并理解其在生成流水线/seo image-gen中的具体调用位置与性能边界。一、后处理在整个图像生成流水线中的定位claude-seo 的seo-image-gen技能把一次图像生成拆解为 6 步见 SKILL.md从命令或上下文识别用例og、hero、product、infographic 等套用 SEO 默认参数宽高比、分辨率、Domain Mode通过set_aspect_ratioMCP 工具设置宽高比按 banana Creative Director 流水线构造 Reasoning Brief六组件提示词体系见 prompt-engineering.md通过gemini_generate_imageMCP 工具生成执行生成后 SEO 检查清单Post-Generation SEO Checklist——这一步正是后处理文档的主战场。检查清单要求对每张生成图依次落实撰写富含关键词的 alt 文本、按keyword-description-widthxheight.webp规范重命名文件、用magick转 WebPhero 图目标 200KB、缩略图 100KB、补充ImageObject结构化数据、输出og:image系列 meta 标签。可以看到后处理不是可选优化而是图像素材能否进入生产环境的硬性关卡。从实现层面看MCP 工具与 generate.py / edit.py 会把生成结果统一保存到~/Documents/nanobanana_generated/目录文件名带时间戳后处理命令通常以该目录下的原始 PNG 为输入起点这也是本文批量示例默认扫描该目录的原因。二、环境准备先确认工具可用性后处理依赖三个命令行工具使用前建议先做可用性检查which magick # ImageMagick 7 (preferred) which convert # ImageMagick 6 (fallback) which ffmpeg # For video/animation版本策略说明ImageMagick 7优先其magick命令统一了旧版中convert、identify、mogrify等多个子命令ImageMagick 6及更早版本没有magick二元命令需要把下文命令中的magick替换为convert/identifyFFmpeg仅在做视频/动画MP4、GIF 批量抠图时才需要。若未安装 ImageMagick按平台安装sudo apt install imagemagick # Debian/Ubuntu brew install imagemagick # macOS需要把位图矢量化成 SVG如 Logo 溯源场景时还需potraceDebian/Ubuntu 可用sudo apt install potrace安装。安装完成后可用magick -version与ffmpeg -version验证版本。三、按平台标准尺寸缩放与裁切AI 生成的图像宽高比未必匹配各社交/内容平台的封面规范通常采用缩放填充 居中裁切两步组合-resize WxH^强制等比放大至至少覆盖目标画布-gravity center -extent WxH从中心裁剪到精确尺寸。^后缀是关键——没有它-resize只会缩到完全放得下导致画布出现留白。# Instagram post (1080x1080) magick input.png -resize 1080x1080^ -gravity center -extent 1080x1080 instagram.png # Twitter/X header (1500x500) magick input.png -resize 1500x500^ -gravity center -extent 1500x500 twitter-header.png # YouTube thumbnail (1280x720) magick input.png -resize 1280x720^ -gravity center -extent 1280x720 youtube-thumb.png # LinkedIn banner (1584x396) magick input.png -resize 1584x396^ -gravity center -extent 1584x396 linkedin-banner.png # Favicon (multi-size ICO) magick input.png -resize 32x32 favicon.ico各平台目标尺寸速查平台素材目标尺寸用途要点Instagram 帖1080×1080方形正中央构图最安全Twitter/X Header1500×500超宽横幅注意中部安全区YouTube 缩略图1280×72016:9文字/主体靠中LinkedIn Banner1584×396极宽横幅两侧易被遮挡Favicon32×32 ICO浏览器多尺寸图标直接由 PNG 生成favicon 场景建议先在生成侧就选1:1与512分辨率对应 SKILL 默认表中的 Favicon/Icon 行再降到 32px避免从非方形图强行压扁。四、背景移除与透明度处理Gemini 图像模型无法直接生成透明背景的 PNGgemini-models.md 明确列出该限制因此透明需求必须后处理解决。4.1 去除纯色背景# Remove solid white background magick input.png -fuzz 10% -transparent white output.png # Remove solid color background (specify color) magick input.png -fuzz 15% -transparent #F0F0F0 output.png-fuzz是容差百分比AI 生成图的纯白/纯色背景通常存在轻微噪点与渐变10%–15%的容差能在不误伤主体边缘的前提下吸收这些偏差。指定色值时用#RRGGBB十六进制更精确。4.2 清理透明边缘抗锯齿直接-transparent后边缘往往残留一圈半透明的毛边可用 alpha 通道微模糊 电平拉伸来平滑magick input.png -fuzz 10% -transparent white -channel A -blur 0x1 -level 50%,100% output.png-channel A -blur 0x1只对透明度通道做 1px 半径模糊-level 50%,100%把 50% 以下的半透明像素压到全透明、以上推到不透明从而得到干净的硬边。4.3 自动裁掉透明留白去底后图片四周常留有透明 padding用-trim repage自动裁到内容边界repage重置画布坐标magick input.png -trim repage output.png该技巧在绿幕流水线见下文第八节的收尾阶段同样会用到。五、格式转换WebP/JPEG/AVIF 与页面速度SEO 图像的核心诉求之一是不拖慢 LCP。claude-seo 的性能子技能把图像体积视为 CWV 关键因子后处理文档给出的转换命令是直接的落地手段# PNG to WebP (web-optimized, smaller file) magick input.png -quality 85 output.webp # PNG to JPEG (with white background for transparency) magick input.png -background white -flatten -quality 90 output.jpg # PNG to AVIF (modern, smallest size) magick input.png -quality 80 output.avif # SVG trace (for logos; requires potrace) potrace input.pbm -s -o output.svg要点解读WebP 是默认推荐-quality 85是清晰度与体积的常见平衡点SKILL.md 的检查清单要求 hero 图最终 200KB、缩略图 100KB若 85 质量仍超标可降至 75–80 再复测JPEG 需要先拍平透明PNG 透明区转 JPEG 会变黑必须先-background white -flatten铺白底再编码AVIF 体积最小但兼容性略逊于 WebP适合现代浏览器优先的站点potrace 矢量化面向 Logo/图标先把位图转成 PBM可用magick input.png -threshold 50% input.pbm再potrace -s输出 SVG便于后续无损缩放与图标字体化。同时记得文件名遵循检查清单规范keyword-description-widthxheight.webp这既利于文件系统检索也让 URL 自带语义。六、色彩调整对比度、色温与风格化生成结果与品牌调性不符时用一条命令即可微调无需重新生成节省一次 API 成本# Increase contrast magick input.png -contrast-stretch 2%x1% output.png # Warm color temperature magick input.png -modulate 100,110,105 output.png # Cool color temperature magick input.png -modulate 100,90,95 output.png # Desaturate (muted colors) magick input.png -modulate 100,70,100 output.png # Convert to grayscale magick input.png -colorspace Gray output.png # Sepia tone magick input.png -sepia-tone 80% output.png参数语义-contrast-stretch 2%x1%把亮度直方图两端各裁剪 2%高光与 1%阴影再拉伸提升对比感数值越大对比越强-modulate brightness,saturation,hue三个百分比依次是亮度、饱和度、色相。100,110,105即饱和度 110%、色相偏移 5暖色调常用100,70,100则是把饱和度降到 70% 的哑光去饱和风格-colorspace Gray直接转灰度适合无需彩色的插画/图标背景-sepia-tone 80%是 ImageMagick 内置褐色调滤镜复古风一步到位。七、合成操作水印、对比图、边框与圆角7.1 叠加水印右下角、20% 透明度magick base.png watermark.png -gravity southeast -geometry 2020 \ -compose dissolve -define compose:args20 -composite output.png-compose dissolve配合compose:args20实现 20% 透明度混合-geometry 2020是距右下角的边距像素。品牌站可用该命令批量给 hero 图加水印后发布。7.2 并排对比与纵向堆叠# Side-by-side comparison magick input1.png input2.png append comparison.png # Vertical stack magick input1.png input2.png -append stack.pngappend横向拼接、-append纵向拼接。适合生成优化前后对比图或 A/B 变体拼图。7.3 加边框与圆角# Add padding/border magick input.png -bordercolor white -border 40 output.png # Add rounded corners magick input.png \( clone -alpha extract -draw \ roundrectangle 0,0,%[fx:w-1],%[fx:h-1],20,20 \) \ -alpha off -compose CopyOpacity -composite rounded.png圆角命令是标准的 alpha 蒙版流程clone -alpha extract复制一份并抽取 alpha 通道用-draw roundrectangle按画布尺寸%[fx:w-1],%[fx:h-1]动态取宽高画圆角矩形选区最后-compose CopyOpacity -composite把蒙版写回。圆角半径 20px 可按设计稿调整。八、批处理一条循环处理整个目录seo-image-gen的batch子命令默认一次生成 3 张变体产出的往往是成组图片逐个处理太低效。以下循环可直接套用# Resize all PNGs in directory for f in ~/Documents/nanobanana_generated/*.png; do magick $f -resize 800x800 ${f%.png}_thumb.png done # Convert all to WebP for f in ~/Documents/nanobanana_generated/*.png; do magick $f -quality 85 ${f%.png}.webp done说明${f%.png}是 Bash 参数扩展剥掉.png后缀后再拼新后缀$f加引号避免路径含空格时出错。批量转 WebP 后配合ls -lh *.webp复核每个文件的体积是否符合 200KB / 100KB 的目标。九、动画与视频GIF 与 MP4素材可能以帧序列形式产出如步骤演示、轮播。两条命令分别用 ImageMagick 与 FFmpeg 完成# Create GIF from multiple images magick -delay 100 frame1.png frame2.png frame3.png animation.gif # Create MP4 from image sequence ffmpeg -framerate 1 -pattern_type glob -i *.png \ -c:v libx264 -pix_fmt yuv420p slideshow.mp4GIF 的-delay 100单位是 1/100 秒即每帧停留 1 秒MP4 用-pattern_type glob批量读入当前目录所有 PNG-framerate 1每秒一帧-pix_fmt yuv420p是兼容性要求——缺少它生成的 H.264 视频在部分播放器/浏览器会无法解码。十、4K 原生输出重新审视放大这一步随着 Gemini 3.1 Flash 支持imageSize: 4K最大 4096×4096后处理文档明确提出一个策略转变如果目标平台接受 4K 及以下的图直接在生成侧输出 4K而不要再走1K 生成 后处理放大的旧路线。理由有二见 gemini-models.md 的 Resolution Tiers 表原生 4K 的细节量远高于放大所得且不存在放大伪影upscaling artifacts省掉了传统放大如-resize 200%、-adaptive-resize、-filter Lanczos这一步的耗时与质量损耗。需要权衡的是成本按 cost-tracking.md 的定价表3.1 Flash 每张图 1K ≈ $0.039、2K ≈ $0.078、4K ≈ $0.156分辨率翻倍成本约翻倍且 4K 在 16:9 下实际像素为 4096×2304占用的存储与解码开销更大。实操建议内容型大图hero、infographic用 2K/4K 原生输出缩略图/社交小图用 1K把 4K 留给真正需要细节的最终资产。十一、绿幕透明流水线让 Gemini间接产出透明背景这是后处理文档中最完整的实战流程也是上文模型无法直接生成透明背景限制的标准解法让模型先在纯绿幕上生成主体再在后处理中把绿色像素抠掉。第一步生成时追加绿幕提示词给任意图像提示词追加如下片段on a solid bright green (#00FF00) chroma key background with a thin white outline separating the subject from the background关键设计薄白边thin white outline的作用是隔离主体边缘防止绿色溢色spill染到发丝、皮毛等边缘像素是后续抠图质量的生命线。第二步ImageMagick 去绿幕magick input.png -fuzz 20% -transparent #00FF00 output.png-fuzz 20%用于吸收绿色背景的轻微色差——AI 生成的绿色不会严格等于#00FF00需要容差覆盖边缘渐变。第三步清理边缘并裁切magick output.png -channel A -blur 0x1 -level 50%,100% -trim repage final.png原理与 4.2/4.3 相同先对 alpha 通道做 1px 模糊 50%/100% 电平拉伸压掉半透明毛边再-trim repage裁掉四周透明留白。第四步备选FFmpeg colorkey 批量抠图ffmpeg -i input.png -vf colorkey0x00FF00:0.3:0.1,despilltypegreen -pix_fmt rgba output.pngFFmpeg 方案的三个参数colorkey0x00FF00:0.3:0.1中0.3是相似度阈值、0.1是混合度despilltypegreen会自动做去溢色把边缘残留的绿色污染中和掉这是 ImageMagick 需要手动调-fuzz才能逼近的效果-pix_fmt rgba保证输出保留 alpha 通道。绿幕流水线要点速查环节关键参数常见调优提示词纯绿 薄白边白边越明显边缘越干净去绿-fuzz 20%边缘偏软时提到 25%边缘清理-channel A -blur 0x1 -level 50%,100%半径过大则细节丢失批量FFmpeg colorkey更快、自带 despill另需牢记两点批量场景下 FFmpeg 明显更快且自动处理溢色抠图后务必肉眼验证边缘——发丝、皮毛等细碎边缘常需手动修补。十二、质量评估生成物的验收标准后处理结束不等于交付完成文档提供了三个核验命令# Get image dimensions and info magick identify -verbose input.png | head -20 # Check file size ls -lh input.png # Get exact pixel dimensions magick identify -format %wx%h input.pngidentify -verbose | head -20输出 PNG 的完整元信息尺寸、位深、色彩空间、文件属性等用于确认 4K/2K 输出是否真的落在目标分辨率档位ls -lh直接看体积对照 hero 200KB、缩略图 100KB 的检查清单目标identify -format %wx%h输出纯尺寸如1200x630可脚本化校验平台规格。在生成侧建议同时用python3 scripts/cost_tracker.py log --model MODEL --resolution RES --prompt brief记录每次生成的成本脚本位于 cost_tracker.py方便批量后处理前用estimate子命令预估总费用。十三、把后处理嵌入预设预设系统的post_processing字段后处理命令不仅可以在命令行手动执行还被 claude-seo 的预设系统作为一等字段固化。查看 seo-image-presets.md 的示例每个预设 JSON 都可携带post_processing命令串{ name: og-default, aspect_ratio: 16:9, resolution: 1K, domain_mode: Product, post_processing: magick output.png -resize 1200x630^ -gravity center -extent 1200x630 output-og.webp }其他预设的后处理示例还包括blog-hero直接-quality 85转 WebPproduct-white用-fuzz 5% -transparent white去白底favicon-mark同时产出32x32的 ICO 与180x180的 apple-touch-icon。这意味着同一套后处理命令可以预制进品牌预设重复使用时零思考成本——这也是本文全部命令建议沉淀为预设、而非每次临时敲击的原因。十四、从源码看后处理的工作边界最后从实现侧厘清后处理不做什么generate.py 与 edit.py 的职责止步于把 API 返回的 base64 图像解码落盘输出到~/Documents/nanobanana_generated/文件名形如banana_20260920_…png不包含任何尺寸/格式/透明处理——压缩与适配完全交由本文的 magick/ffmpeg 命令完成两个脚本仅依赖 Python 标准库urllib、base64、json是 MCP 不可用时的降级通道对应 SKILL 错误处理表中的MCP unavailable行后处理命令同样不依赖任何 Python 包可移植性一致模型侧输出规格gemini-models.md决定了后处理的必要环节输出恒为 PNG、恒带背景、sRGB 色彩空间——所以转 WebP去背景查尺寸三类操作是每次生成后的固定动作而非可选项。结语一条可直接上线的 SEO 图像链路可以概括为生成Gemini 原生分辨率→ 落盘~/Documents/nanobanana_generated/→ 后处理本文的 resize / 去底 / 转码 / 抠图 / 批量 / 校验→ SEO 化alt 文本 语义命名 WebP ImageObject / og:image。把文中的命令按品牌预设固化进post_processing字段后这条链路可以从每次手工操作升级为一键重复执行同时借助 4K 原生输出与成本追踪让图像素材在质量、体积与费用三个维度上都处于可控状态。【免费下载链接】claude-seoUniversal SEO skill for Claude Code. 26 sub-skills 19 sub-agents covering technical SEO, E-E-A-T, schema, GEO/AEO, agent readiness (Lighthouse Agentic Browsing, WebMCP, llms.txt), backlinks, local SEO, e-commerce, international SEO, Google APIs, and PDF/Excel reporting. 9 optional extensions for live SEO data.项目地址: https://gitcode.com/GitHub_Trending/cl/claude-seo创作声明:本文部分内容由AI辅助生成(AIGC),仅供参考