Wie eine 30-Sekunden-Produkt-Demo aus OBS oder ScreenToGif als Video rauskommt und welche Konvertierungs-Einstellungen sie auf 5 MB drücken, ohne die Lesbarkeit zu verlieren.

Eine Produkt-Demo als GIF in den Pull-Request oder die Mail packen ist 2026 ein etablierter Workflow. Die Tools sind ausgereift, aber die Detail-Schritte zwischen Recording und fertigem GIF entscheiden, ob der Empfänger eine 3-MB-Animation oder eine 40-MB-Bandbreitenbremse bekommt.

Die zwei dominanten Tools

ScreenToGif (Windows, open source, kostenlos) und OBS Studio (alle Plattformen, kostenlos) sind die zwei Recorder, die den DACH-Markt im Bereich Screen-Capture dominieren. Camtasia ist kommerziell und kostet rund 300 Euro Lizenz, was es für einmalige Demos selten lohnt.

ScreenToGif schreibt typischerweise direkt im eigenen Format und kann am Ende als GIF, MP4 oder APNG exportieren. Wenn Du mit ScreenToGif arbeitest, brauchst Du mp4webm.de meistens nicht, der eingebaute Export ist gut. Der Schmerzpunkt entsteht, wenn ScreenToGif fehlschlägt (Speicher-Problem bei langen Aufnahmen) oder wenn das Tool gar nicht zum Einsatz kommt.

OBS Studio ist der andere Workflow. OBS ist auf Live-Streaming optimiert, kein GIF-Exporter. Der typische Output ist eine MKV- oder MP4-Datei, aber viele Setups produzieren WebM, entweder weil das voreingestellt war, weil die Aufnahme nach Stream-Restart neu startet oder weil das Recording-Profil bewusst auf Video gestellt wurde, um Verluste zu minimieren.

Der OBS-Workflow

Settings, die ich für Demo-Recordings empfehle:

Output-Mode: Advanced
Recording-Format: MKV (sicher gegen Stürze) oder Video (kompatibel mit älteren Edit-Tools)
Encoder: x264 (Software) bei kurzen Demos, NVENC oder AMF bei längeren Aufnahmen
Rate-Control: CRF zwischen 18 und 23 (kleine Zahl = bessere Qualität, größere Datei)
Keyframe-Interval: 2 Sekunden (mehr Schnittpunkte für späteres Trimmen)
Audio: 48 kHz Stereo, AAC bei MP4, PCM bei WebM

Nach der Aufnahme hast Du eine Datei. Bevor Du sie in ein GIF konvertierst, trimm sie. Tools wie LosslessCut (kostenlos, Cross-Platform) schneiden ohne Re-Encoding. Verlust-frei. Schnell.

Trim-Strategie:

Erste Sekunde meist weg (Aufnahme-Start, Maus noch nicht in Position)
Letzte 2 bis 3 Sekunden meist weg (Stop-Klick, statische Endkarte)
Zwischen-Sequenzen, in denen “nix passiert”, herausschneiden

Eine Demo, die ungetrimmt 35 Sekunden wäre, ist nach Trim oft bei 10 bis 14 Sekunden, und das GIF wird entsprechend kleiner.

Die Konvertierung in 4 Schritten

Wenn Du eine Video hast und ein GIF brauchst, ist mp4webm.de der direkte Weg:

Video per Drag-and-Drop in das Tool ziehen. Das Tool lädt ffmpeg.wasm (einmalig, rund 32 MB WASM) und probet die Datei: Dauer, Auflösung.
Auflösung 480 px oder 720 px. 480 reicht in den meisten Fällen. 720 nur, wenn UI-Text in der Demo lesbar bleiben muss (Code-Editor, Konfig-Dialog).
FPS auf 15 stellen. Cursor-Bewegung wird sichtbar flüssig, ohne dass die Datei explodiert. 12 FPS funktioniert auch, aber Maus-Trails wirken dann leicht ruckartig.
Quality Mittel wählen. Bei Screen-Recordings ist das fast immer richtig: keine Farbverläufe wie in einer Foto-Animation, dafür viele Wiederholungen (statische UI-Bereiche), die gut LZW-komprimieren.

Nach diesen Einstellungen liegt eine 12-Sekunden-Screencast-Demo typisch bei 3 bis 6 MB. Wenn das GIF deutlich größer ist, war die Aufnahme entweder zu lang oder die Auflösung zu hoch.

Lesbarkeit retten bei kleinen GIFs

Wenn Du auf 480 px reduzierst und der Text in der Demo unlesbar wird, hilft eine kontrastreichere Vorbereitung:

UI-Zoom auf 125 bis 150 Prozent vor der Aufnahme. Windows-Einstellung oder Browser-Zoom. Macht den Text in absoluten Pixeln größer.
Dunkles Theme in IDE und Apps. Schwarzer Hintergrund mit weisser Schrift komprimiert sehr gut in GIF (viel Wiederholung) und bleibt lesbar.
Cursor-Hervorhebung: ScreenToGif und OBS können einen farbigen Ring um den Mauszeiger zeichnen. Bei Demos hilft das.
Highlight-Rechtecke im Recording-Tool, die wichtige Bereiche markieren.

Eine ehrliche Alternative: MP4

Wenn das Ziel-Medium GitHub, GitLab, Linear oder Notion ist, lohnt sich oft der Wechsel zu MP4. Diese Plattformen rendern MP4 inline und looped automatisch. Die Datei ist 10-mal kleiner und die Lesbarkeit besser.

GIF lohnt sich, wenn das Demo-Ziel:

Outlook-Mail ist (Pflicht: GIF)
Slack ist und Auto-Play sofort erwartet wird
alte Wikis oder Forum-Threads sind
explizit überall funktionieren muss

Fallstricke

Drei Anfänger-Fehler bei Screencast-zu-GIF:

Aufnahme mit 60 FPS und ungetrimmt in GIF. Das wird ein 200-MB-Monster. 15 FPS reichen vollkommen für GIF.
Original-Auflösung übernehmen. Eine 4K-Aufnahme als GIF konvertieren ist Bandbreiten-Verbrennung. Auf 480 oder 720 px reduzieren.
Keine Pause-Punkte einplanen. Wenn die Demo komplex ist, brauchen Zuschauer Sekundenbruchteile, um zu erfassen, was passiert. 0,5 bis 1 Sekunde Stillstand zwischen Aktionen.

Eine gut gemachte Screencast-Demo als GIF ist eine Investition von 5 bis 10 Minuten, die in 30 Sekunden mehr erklärt als ein Absatz Text. Mit der richtigen Pipeline ist das ein wiederkehrender Workflow.

Vom Screencast zum GIF: ein sauberer Produkt-Demo-Workflow