Back to Details

gif-generation

Compare original and translation side by side

🇺🇸

Original

English
🇨🇳

Translation

Chinese

Table of Contents

目录

GIF Generation Skill

GIF生成技能

Post-process video files (webm/mp4) and generate optimized GIF output with configurable quality settings.
对视频文件（webm/mp4）进行后处理，支持配置质量参数生成优化的GIF输出。

When To Use

适用场景

  • Converting recordings to animated GIF format
  • Creating lightweight demo animations
  • 将录屏转换为动图GIF格式
  • 创建轻量级演示动图

When NOT To Use

不适用场景

  • High-quality video output - use full recording tools
  • Static image generation without animation needs
  • 需要高质量视频输出：请使用完整的录屏工具
  • 无动画需求的静态图片生成

Overview

概述

This skill handles the conversion of video recordings (typically from browser automation) to GIF format. It provides multiple quality presets and optimization options to balance file size with visual quality.
本技能可将视频录屏（通常来自浏览器自动化工具）转换为GIF格式，提供多种质量预设和优化选项，可在文件大小和视觉质量之间取得平衡。

Required TodoWrite Items

必填待办项

- Validate input video file exists
- Check ffmpeg installation
- Execute GIF conversion
- Verify output and report results
Verification: Run the command with 
--help
flag to verify availability.
- 校验输入视频文件存在
- 检查ffmpeg安装情况
- 执行GIF转换
- 校验输出并上报结果
验证： 携带
--help
参数运行命令以确认可用性。

Process

处理流程

Step 1: Validate Input File

步骤1：校验输入文件

Confirm the source video file exists and is a supported format:
bash
undefined
确认源视频文件存在且为支持的格式：
bash
undefined

Check file exists and get info

检查文件存在并获取信息

if [[ -f "$INPUT_FILE" ]]; then file "$INPUT_FILE" ffprobe -v quiet -show_format -show_streams "$INPUT_FILE" 2>/dev/null | head -20 else echo "Error: Input file not found: $INPUT_FILE" exit 1 fi
**Verification:** Run the command with `--help` flag to verify availability.

Supported input formats: `.webm`, `.mp4`, `.mov`, `.avi`
if [[ -f "$INPUT_FILE" ]]; then file "$INPUT_FILE" ffprobe -v quiet -show_format -show_streams "$INPUT_FILE" 2>/dev/null | head -20 else echo "Error: Input file not found: $INPUT_FILE" exit 1 fi
**验证：** 携带`--help`参数运行命令以确认可用性。

支持的输入格式：`.webm`、`.mp4`、`.mov`、`.avi`

Step 2: Check ffmpeg Installation

步骤2：检查ffmpeg安装情况

Verify ffmpeg is available:
bash
if ! command -v ffmpeg &> /dev/null; then
    echo "Error: ffmpeg is not installed"
    echo "Install with: sudo apt install ffmpeg (Linux) or brew install ffmpeg (macOS)"
    exit 1
fi
ffmpeg -version | head -1
Verification: Run the command with 
--help
flag to verify availability.
验证ffmpeg可用：
bash
if ! command -v ffmpeg &> /dev/null; then
    echo "Error: ffmpeg is not installed"
    echo "Install with: sudo apt install ffmpeg (Linux) or brew install ffmpeg (macOS)"
    exit 1
fi
ffmpeg -version | head -1
验证： 携带
--help
参数运行命令以确认可用性。

Step 3: Execute Conversion

步骤3：执行转换

Choose the appropriate conversion command based on quality requirements:
根据质量要求选择合适的转换命令：

Basic Conversion (Fast, Larger File)

基础转换（速度快，文件更大）

bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1" output.gif
Verification: Run the command with 
--help
flag to verify availability.
bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1" output.gif
验证： 携带
--help
参数运行命令以确认可用性。

High Quality with Palette Generation (Recommended)

生成调色板的高质量转换（推荐）

bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output.gif
Verification: Run the command with 
--help
flag to verify availability.
bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" output.gif
验证： 携带
--help
参数运行命令以确认可用性。

Maximum Quality with Dithering

带抖动处理的最高质量转换

bash
ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256:stats_mode=single[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" output.gif
Verification: Run the command with 
--help
flag to verify availability.
bash
ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256:stats_mode=single[p];[s1][p]paletteuse=dither=bayer:bayer_scale=5" output.gif
验证： 携带
--help
参数运行命令以确认可用性。

Optimization Options

优化选项

OptionDescriptionRecommended Value
fps
Frames per second10-15 for smooth, 5-8 for smaller files
scale
Width in pixels (-1 maintains aspect ratio)800 for web, 480 for thumbnails
flags=lanczos
High-quality scaling algorithmAlways use for best quality
palettegen
Generate optimized color paletteUse for quality-critical output
dither
Dithering algorithm
bayer
for patterns, 
floyd_steinberg
for smooth
选项描述推荐值
fps
每秒帧率追求流畅效果设为10-15，追求更小文件设为5-8
scale
宽度像素值（-1表示保持宽高比）网页使用设为800，缩略图使用设为480
flags=lanczos
高质量缩放算法追求最佳质量时始终使用
palettegen
生成优化的调色板对输出质量要求高时使用
dither
抖动算法需要图案效果用
bayer
，需要平滑效果用
floyd_steinberg

Common Presets

常用预设

bash
undefined
bash
undefined

Thumbnail (small, fast loading)

缩略图（文件小，加载快）

ffmpeg -i input.webm -vf "fps=8,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" thumbnail.gif
ffmpeg -i input.webm -vf "fps=8,scale=480:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" thumbnail.gif

Documentation (balanced)

文档使用（平衡质量）

ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" docs.gif
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" docs.gif

High-fidelity demo

高保真演示

ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256[p];[s1][p]paletteuse" demo.gif
**Verification:** Run the command with `--help` flag to verify availability.
ffmpeg -i input.webm -vf "fps=15,scale=1024:-1:flags=lanczos,split[s0][s1];[s0]palettegen=max_colors=256[p];[s1][p]paletteuse" demo.gif
**验证：** 携带`--help`参数运行命令以确认可用性。

Step 4: Verify Output

步骤4：校验输出文件

Confirm successful conversion and report metrics:
bash
if [[ -f "$OUTPUT_FILE" ]]; then
    echo "GIF generated successfully: $OUTPUT_FILE"

    # Report file size
    SIZE=$(du -h "$OUTPUT_FILE" | cut -f1)
    echo "File size: $SIZE"

    # Get dimensions and frame count
    ffprobe -v quiet -select_streams v:0 -show_entries stream=width,height,nb_frames -of csv=p=0 "$OUTPUT_FILE"
else
    echo "Error: GIF generation failed"
    exit 1
fi
Verification: Run the command with 
--help
flag to verify availability.
确认转换成功并上报指标：
bash
if [[ -f "$OUTPUT_FILE" ]]; then
    echo "GIF generated successfully: $OUTPUT_FILE"

    # 上报文件大小
    SIZE=$(du -h "$OUTPUT_FILE" | cut -f1)
    echo "File size: $SIZE"

    # 获取尺寸和帧数
    ffprobe -v quiet -select_streams v:0 -show_entries stream=width,height,nb_frames -of csv=p=0 "$OUTPUT_FILE"
else
    echo "Error: GIF generation failed"
    exit 1
fi
验证： 携带
--help
参数运行命令以确认可用性。

Exit Criteria

退出标准

  • Input file validated as existing video format
  • ffmpeg confirmed available
  • GIF file created at specified output path
  • Output file size reported to user
  • No ffmpeg errors during conversion
  • 输入文件已校验为存在的视频格式
  • 已确认ffmpeg可用
  • 已在指定输出路径生成GIF文件
  • 已向用户上报输出文件大小
  • 转换过程中无ffmpeg错误

Troubleshooting

问题排查

Large Output File

输出文件过大

Reduce quality settings:
bash
undefined
降低质量设置：
bash
undefined

Lower fps and resolution

降低帧率和分辨率

ffmpeg -i input.webm -vf "fps=8,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" smaller.gif
**Verification:** Run the command with `--help` flag to verify availability.
ffmpeg -i input.webm -vf "fps=8,scale=640:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse" smaller.gif
**验证：** 携带`--help`参数运行命令以确认可用性。

Color Banding

色带问题

Use dithering:
bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=floyd_steinberg" smooth.gif
Verification: Run the command with 
--help
flag to verify availability.
使用抖动处理：
bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1:flags=lanczos,split[s0][s1];[s0]palettegen[p];[s1][p]paletteuse=dither=floyd_steinberg" smooth.gif
验证： 携带
--help
参数运行命令以确认可用性。

Slow Conversion

转换速度慢

Use basic conversion without palette generation for speed:
bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1" quick.gif
Verification: Run the command with 
--help
flag to verify availability.
使用无调色板生成的基础转换提升速度：
bash
ffmpeg -i input.webm -vf "fps=10,scale=800:-1" quick.gif
验证： 携带
--help
参数运行命令以确认可用性。