GIF/WebM "Video" erstellen aus Screenshots

📅 Erstellt: 04.10.2026 🔄 Aktualisiert: 04.10.2026

Um eine GIF-Animation zu erstellen, wie sie hier und da schonmal als unkompliziertes "Minivideo" beliebt ist, geht man folgendermaßen vor:

Screenshots detailliert aufnehmen

Jeden Schritt als einzelnen Screenshot aufnehmen, sofern sich das machen lässt:

Bilder umbenennen

Die Bilderserie in Dolphin umbennenen:

Eventuell einen ersten und/oder letzten Schritte davon ausnehmen und diese in firststep.png und laststep.png umnennen, damit diese mit einem anderen Delay (Zeit) angezeigt werden könnten.

Hier ein Beispiel diesbezüglich:

Bilderserie zu einem Video zusammenfügen

Mit ImageMagick (für GIF)

Mit ImageMagick (das Schweizer Messer für Bildverarbeitung) kann man dann die Bilder entsprechend mit längerer Anzeige von Start- und Endbild zusammenfügen:
magick -delay 300 firststep.png -delay 50 -loop 0 steps*.png -delay 1000 laststep.png animation.gif

Erklärung:

• Erstes Bild firststep.png 3 Sekunden lang anzeigen
• Folgeschritte steps*.png jeweils 0,5 Sekunden lang anzeigen
• Letztes Bild laststep.png 10 Sekunden lang anzeigen
• In Datei animation.gif speichern

Ergebnis - Größe ~ 1,5 MiB:

Mit FFMPEG (für WebM)

Mit FFMPEG (das Schweizer Messer für Bild- und Videoverarbeitung) kann man ebenfalls eine GIF-Animation oder gleich ein WebM-Video erstellen.
Hier bietet sich WebM (mit VP9 lossless) eher an. Da die ca. 60 Quelldateien (.png) aus meinem Beispiel alle jeweils nur um die ~ 15 kB groß sind, wird das verlustfreie Video auch recht klein bleiben. WebM wird von allen modernen Webbrowsern unterstützt.
In meinem Fall ist das WebM-Video mit ca. 580 KiB nur 1/3 so groß wie die GIF-Animation mit 1,5 MiB.

Ich habe dafür ein Skript erstellt (mit KI-Hilfe), picvideo_ffmpeg.sh: - picvideo_ffmpeg.sh

#!/bin/bash

# Farben für eine saubere Terminal-Ausgabe
GREEN='\033[0;32m'
YELLOW='\033[1;33m'
CYAN='\033[0;36m'
NC='\033[0m' # No Color

echo -e "${GREEN}=== Konfiguration für die Videoerstellung ===${NC}"

# 1. Ausgabe-Dateiname
OUTPUT="${1:-}"
if [ -z "$OUTPUT" ]; then
    read -p "Gewünschter Ausgabe-Dateiname [Standard: installation.webm]:       > " OUTPUT
    OUTPUT="${OUTPUT:-installation.webm}"
fi

# 2. Startbild-Name
FIRST_IMG="${2:-}"
if [ -z "$FIRST_IMG" ]; then
    read -p "Dateiname des Startbildes [Standard: firststep.png]:               > " FIRST_IMG
    FIRST_IMG="${FIRST_IMG:-firststep.png}"
fi

# 3. Endbild-Name
LAST_IMG="${3:-}"
if [ -z "$LAST_IMG" ]; then
    read -p "Dateiname des Endbildes [Standard: laststep.png]:                  > " LAST_IMG
    LAST_IMG="${LAST_IMG:-laststep.png}"
fi

# 4. Anzeigedauer Startbild
DELAY_FIRST="${4:-}"
if [ -z "$DELAY_FIRST" ]; then
    read -p "Anzeigedauer Startbild in Sekunden [Standard: 3.0]:                > " DELAY_FIRST
    DELAY_FIRST="${DELAY_FIRST:-3.0}"
fi

# 5. Anzeigedauer Einzelschritte
DELAY_STEP="${5:-}"
if [ -z "$DELAY_STEP" ]; then
    read -p "Anzeigedauer für die Zwischenschritte in Sekunden [Standard: 0.5]: > " DELAY_STEP
    DELAY_STEP="${DELAY_STEP:-0.5}"
fi

# 6. Anzeigedauer Endbild
DELAY_LAST="${6:-}"
if [ -z "$DELAY_LAST" ]; then
    read -p "Anzeigedauer Endbild in Sekunden [Standard: 10.0]:                 > " DELAY_LAST
    DELAY_LAST="${DELAY_LAST:-10.0}"
fi

# 7. Völlig flexibles Suchmuster für die Zwischenschritte
STEPS_PATTERN="${7:-}"
if [ -z "$STEPS_PATTERN" ]; then
    read -p "Suchmuster für die Zwischenschritte [Standard: steps*.png]:        > " STEPS_PATTERN
    STEPS_PATTERN="${STEPS_PATTERN:-steps*.png}"
    if [ -z "$STEPS_PATTERN" ]; then
        echo -e "${YELLOW}Fehler: Es muss ein gültiges Suchmuster angegeben werden!${NC}" >&2
        exit 1
    fi
fi

# Transparente Zusammenfassung & die exakte Befehlszeile für die Zukunft ausgeben
echo -e "\n${YELLOW}Übernommene Einstellungen:${NC}"
echo " - Ausgabe-Datei:       $OUTPUT"
echo " - Startbild:           $FIRST_IMG (Dauer: ${DELAY_FIRST}s)"
echo " - Zwischenschritte:    $STEPS_PATTERN (Dauer: je ${DELAY_STEP}s)"
echo " - Endbild:             $LAST_IMG (Dauer: ${DELAY_LAST}s)"

echo -e "\n${CYAN}Vollständiger Befehl für den Direktaufruf (ohne Abfragen):${NC}"
echo -e "  ${GREEN}${0##*/} \"$OUTPUT\" \"$FIRST_IMG\" \"$LAST_IMG\" \"$DELAY_FIRST\" \"$DELAY_STEP\" \"$DELAY_LAST\" \"$STEPS_PATTERN\"${NC}"
echo "----------------------------------------------"

# Temporäre ffconcat-Datei im systemweiten /tmp-Verzeichnis erstellen
CONCAT_FILE=$(mktemp /tmp/ffmpeg_concat.XXXXXX.ffconcat)
trap "rm -f '$CONCAT_FILE'" EXIT

echo -e "${GREEN}==> Erstelle temporäre ffconcat-Liste unter:${NC} $CONCAT_FILE"

# Startbild prüfen und einbinden
if [ -f "$FIRST_IMG" ]; then
    echo "    [+] Füge Startbild hinzu: $FIRST_IMG"
    echo "ffconcat version 1.0" > "$CONCAT_FILE"
    echo "file '$(pwd)/$FIRST_IMG'" >> "$CONCAT_FILE"
    echo "duration $DELAY_FIRST" >> "$CONCAT_FILE"
else
    echo -e "${YELLOW}Fehler: Startbild '$FIRST_IMG' wurde im Verzeichnis nicht gefunden!${NC}" >&2
    exit 1
fi

# Zwischenschritte dynamisch über das benutzerdefinierte Muster suchen und einbinden
FILES=$(find . -maxdepth 1 -name "$STEPS_PATTERN" | sort -V)

if [ -z "$FILES" ]; then
    echo -e "${YELLOW}    [!] Keine Dateien mit dem Muster '$STEPS_PATTERN' gefunden.${NC}"
else
    COUNT=0
    for img in $FILES; do
        BASENAME=$(basename "$img")
        # Überspringen, falls das Start- oder Endbild zufällig auf das Muster matchen
        if [ "$BASENAME" = "$FIRST_IMG" ] || [ "$BASENAME" = "$LAST_IMG" ]; then
            continue
        fi
        echo "    [+] Füge Zwischenschritt hinzu: $BASENAME"
        echo "file '$(pwd)/$BASENAME'" >> "$CONCAT_FILE"
        echo "duration $DELAY_STEP" >> "$CONCAT_FILE"
        COUNT=$((COUNT + 1))
    done
    echo "    [i] Insgesamt $COUNT Zwischenschritte eingebunden."
fi

# Endbild prüfen und einbinden (+ Dummy-Zeile für den Demuxer)
if [ -f "$LAST_IMG" ]; then
    echo "    [+] Füge Endbild hinzu: $LAST_IMG"
    echo "file '$(pwd)/$LAST_IMG'" >> "$CONCAT_FILE"
    echo "duration $DELAY_LAST" >> "$CONCAT_FILE"
    echo "file '$(pwd)/$LAST_IMG'" >> "$CONCAT_FILE"
else
    echo -e "${YELLOW}Fehler: Endbild '$LAST_IMG' wurde im Verzeichnis nicht gefunden!${NC}" >&2
    exit 1
fi

echo -e "\n${GREEN}==> Starte FFmpeg-Rendering (Verlustfreies WebM / VP9)...${NC}"

# FFmpeg im verlustfreien VP9-Modus ausführen
ffmpeg -y -hide_banner -f concat -safe 0 -i "$CONCAT_FILE" \
    -c:v libvpx-vp9 \
    -lossless 1 \
    -pix_fmt yuv444p \
    "$OUTPUT"

if [ $? -eq 0 ]; then
    echo -e "\n${GREEN}==> Fertig! Das Video wurde erfolgreich erstellt:${NC} $OUTPUT"
else
    echo -e "\n${YELLOW}==> Fehler beim FFmpeg-Rendering aufgetreten.${NC}" >&2
    exit 1
fi

Das Skript läuft dann folgendermaßen ab:

❯ picvideo_ffmpeg.sh animation.webm
=== Konfiguration für die Videoerstellung ===
Dateiname des Startbildes [Standard: firststep.png]:               > 
Dateiname des Endbildes [Standard: laststep.png]:                  > 
Anzeigedauer Startbild in Sekunden [Standard: 3.0]:                > 
Anzeigedauer für die Zwischenschritte in Sekunden [Standard: 0.5]: > 
Anzeigedauer Endbild in Sekunden [Standard: 10.0]:                 > 
Suchmuster für die Zwischenschritte [Standard: steps*.png]:        > 

Übernommene Einstellungen:
 - Ausgabe-Datei:       animation.webm
 - Startbild:           firststep.png (Dauer: 3.0s)
 - Zwischenschritte:    steps*.png (Dauer: je 0.5s)
 - Endbild:             laststep.png (Dauer: 10.0s)

Vollständiger Befehl für den Direktaufruf (ohne Abfragen):
  picvideo_ffmpeg.sh "animation.webm" "firststep.png" "laststep.png" "3.0" "0.5" "10.0" "steps*.png"
----------------------------------------------
==> Erstelle temporäre ffconcat-Liste unter: /tmp/ffmpeg_concat.KkCMx0.ffconcat
    [+] Füge Startbild hinzu: firststep.png
    [+] Füge Zwischenschritt hinzu: steps001.png
    [+] Füge Zwischenschritt hinzu: steps002.png
    ...
    [+] Füge Zwischenschritt hinzu: steps058.png
    [+] Füge Zwischenschritt hinzu: steps059.png
    [i] Insgesamt 59 Zwischenschritte eingebunden.
    [+] Füge Endbild hinzu: laststep.png

==> Starte FFmpeg-Rendering (Verlustfreies WebM / VP9)...
Input #0, concat, from '/tmp/ffmpeg_concat.KkCMx0.ffconcat':
  Duration: N/A, start: 0.000000, bitrate: N/A
  Stream #0:0: Video: png, rgb24(pc, gbr/unknown/unknown), 1440x1080 [SAR 3780:3780 DAR 4:3], 25 fps, 25 tbr, 25 tbn
Stream mapping:
  Stream #0:0 -> #0:0 (png (native) -> vp9 (libvpx-vp9))
Press [q] to stop, [?] for help
[libvpx-vp9 @ 0x558f4245c200] v1.17.0
Output #0, webm, to 'animation.webm':
  Metadata:
    encoder         : Lavf63.1.102
  Stream #0:0: Video: vp9, yuv444p(tv, progressive), 1440x1080 [SAR 1:1 DAR 4:3], q=2-31, 25 fps, 1k tbn
    Metadata:
      encoder         : Lavc63.1.102 libvpx-vp9
    Side data:
      CPB properties: bitrate max/min/avg: 0/0/0 buffer size: 0 vbv_delay: N/A
[vf#0:0 @ 0x558f42458b40] Reconfiguring filter graph because video parameters changed to rgb24(pc, gbr), 1280x960, unspecified alpha
[vf#0:0 @ 0x558f42458b40] Reconfiguring filter graph because video parameters changed to rgb24(pc, gbr), 1440x1080, unspecified alpha
[out#0/webm @ 0x558f4245d740] video:577KiB audio:0KiB subtitle:0KiB other streams:0KiB global headers:0KiB muxing overhead: 0.173503%
frame=   62 fps= 17 q=0.0 Lsize=     578KiB time=00:00:42.56 bitrate= 111.2kbits/s speed=11.7x elapsed=0:00:03.64    

==> Fertig! Das Video wurde erfolgreich erstellt: animation.webm

Das fertige Video - Größe ~ 580 KiB:

---