HTML-in-GIF-Konverter

Q: Wie mache ich das GIF klein genug für eine Chat-App?

Verwenden Sie eine schmalere **HTML-Seitenbreite** oder wandeln Sie nur die erste Seite um. Liegt das Ergebnis noch über einem Limit, verkleinert [GIF für Discord komprimieren](/compress-gif-for-discord) es in Richtung der Upload-Grenze.

Rendern Sie eine HTML-Datei in einer Browser-Engine und speichern Sie sie als GIF – für Stellen, die dieses Format noch verlangen: E-Mail-Signaturen, ältere Foren, alte CMS-Felder. Sie legen die Fensterbreite fest und wählen, ob Sie ein langes Bild oder eine Folge seitengroßer Frames erhalten.

oder DOC, DOCX, DOCM …-Dateien hierher ziehen ·

Max. 95 MB pro Datei· Bis zu 20 Dateien· Gelöscht nach 30 Minuten

Ausgabe

Umwandeln in

Auflösung

Bilder

Dateien werden auf unseren Servern verarbeitet und nach 30 Minuten gelöscht.

So verwenden Sie dieses Tool

1
HTML hochladen
Fügen Sie .html-, .htm- oder .mhtml-Dateien hinzu, bis zu 20 pro Stapel und je 95 MB. Wenn Sie die Seite als „Webseite, einzelne Datei“ speichern, bleiben Bilder und Stile erhalten.
2
Breite und Layout wählen
HTML-Seitenbreite ist 1280 px; für eine E-Mail-Vorlage nehmen Sie 600 px. Bilder steht auf einem langen Bild, also einem einzelnen statischen GIF; stellen Sie es auf eines pro Seite, um seitengroße Einzelbilder nacheinander anzuzeigen.
3
In GIF umwandeln
Klicken Sie auf In GIF umwandeln →. Wenn das GIF auf einem farbigen Hintergrund liegen soll, aktivieren Sie unter Erweiterte Einstellungen die Option Transparenter Hintergrund.

HTML in GIF hält fest, wie eine Seite aussieht, nicht wie sie sich bewegt: Der Browser zeichnet die Seite in Ihrer Breite, und das Ergebnis ist entweder ein einzelnes statisches GIF oder mehrere seitengroße Einzelbilder in einer Datei.

So funktioniert die Umwandlung von HTML in GIF

Zuerst wird das HTML wie jede Webseite gesetzt, in der von Ihnen gewählten HTML-Seitenbreite von 320 bis 3840 px. Stile und Bilder in der Datei werden angewendet; nicht erreichbare Schriften werden durch ähnliche ersetzt. Danach wird die gerenderte Seite aufgenommen.

Mit Bilder auf einem langen Bild wird die ganze Seite von der Kopf- bis zur Fußzeile zu einem einzelnen statischen GIF. Mit einem pro Seite wird sie in seitengroße Stücke geschnitten, die als Einzelbilder eines GIFs der Reihe nach angezeigt werden. Das ist praktisch, um einen langen Newsletter oder eine Landingpage mit mehreren Abschnitten ohne Scrollen anzusehen.

Das Format setzt die Grenzen. CompuServe führte GIF 1987 ein, und die Revision GIF89a von 1989 ergänzte Bildverzögerungen und eine transparente Farbe, was noch heute jeder Viewer unterstützt. Jedes Einzelbild ist auf eine Palette von 256 Farben begrenzt, daher bildet der Konverter die Farben der Seite auf die beste Palette ab, die er findet. Text, Icons, Schaltflächen und flache Markenfarben kommen sauber an; Fotos und weiche Schatten verlieren am meisten.

GIF-Grenzen, die bei einer gerenderten Webseite wichtig sind

Farben pro Einzelbild: 256
Transparenz pro Pixel, keine weichen Kanten: An/Aus
Die Seite wird aufgenommen, nicht aufgezeichnet: Statisch
HTML-Dateien pro Stapel, je 95 MB: 20

HTML in GIF umwandeln: was Sie erwarten können

MythosEin GIF einer Seite zeigt ihre Hover-Effekte und Animationen.

FaktInteraktive Zustände und Bewegung müssen von einer Person oder einem Skript ausgelöst werden. Die Aufnahme zeigt die Seite im Ruhezustand.

MythosGIF ist das kleinste Bildformat für eine Webseite.

FaktBei Seiten mit Fotos ist ein JPG oder WebP meist deutlich kleiner. GIF gewinnt nur bei einfachen, flachen Grafiken.

MythosDas GIF holt sich die Seite über ihre Webadresse.

FaktDer Konverter arbeitet mit der HTML-Datei, die Sie hochladen. Speichern Sie die Seite zuerst aus Ihrem Browser, am besten als einzelne MHTML-Datei.

MythosMehr Einzelbilder machen das GIF schärfer.

FaktEinzelbilder erhöhen Länge und Dateigröße, nicht den Detailgrad. Die Schärfe hängt von der Seitenbreite und der Farbpalette ab.

HTML

HyperText Markup Language

HTML ist die Auszeichnungssprache des Webs, die Tim Berners-Lee Anfang der 1990er-Jahre erstmals beschrieben hat und die heute von der WHATWG als „Living Standard“ gepflegt wird. Eine HTML-Datei beschreibt Überschriften, Absätze, Links, Tabellen, Bilder und Formulare, während das Aussehen meist per CSS festgelegt wird. Jeder Browser stellt sie dar, und sie wird auch für E-Mail-Vorlagen und gespeicherte Webseiten verwendet. Eine einzelne HTML-Datei hängt oft von externen Bildern und Stylesheets ab und kann deshalb allein verschoben kaputt aussehen.

Komprimierung: –
Transparenz: –
Animation: –
Eingeführt: 1993 · Tim Berners-Lee; maintained by WHATWG

HTML-Konverter

GIF

Graphics Interchange Format

GIF wurde 1987 von CompuServe eingeführt und ist weiterhin das am weitesten unterstützte Format für kurze, sich wiederholende Animationen. Es ist verlustfrei, aber auf eine Palette von 256 Farben pro Bild beschränkt, sodass Fotos und Farbverläufe Streifenbildung und Dithering zeigen. Es unterstützt nur Ein/Aus-Transparenz (1 Bit), was an gekrümmten Formen ausgefranste Kanten hinterlässt. Animierte GIFs sind oft weit größer als derselbe Clip als MP4 oder WebP. Jeder Browser, jede Chat-App und jede Social-Media-Plattform spielt GIFs ab.

Komprimierung: Verlustfrei
Transparenz: Ja
Animation: Ja
Eingeführt: 1987 · CompuServe

GIF-Konverter

GIF wählt man für eine gerenderte Seite, wenn das Ziel nur GIF akzeptiert, etwa eine E-Mail-Signatur oder eine ältere Plattform, oder wenn mehrere Seitenbilder in einer Datei stecken sollen, die ohne Videoplayer abgespielt wird.

Fragen zu HTML in GIF

Lässt sich eine CSS-Animation in ein animiertes GIF umwandeln?

Nein. Die Seite wird einmal gerendert und aufgenommen, daher sind CSS-Übergänge, Keyframe-Animationen, Videos und skriptgesteuerte Effekte in diesem Moment eingefroren. Um Bewegung festzuhalten, nehmen Sie den Bildschirm auf, während die Seite abgespielt wird, und wandeln die Aufnahme mit Video in GIF um.

Warum wirken Verläufe und Fotos im GIF körnig?

Jedes GIF-Einzelbild kann höchstens 256 Farben verwenden. Eine Seite mit weichen Verläufen, Schatten oder Fotos hat Tausende, deshalb werden sie per Dithering angenähert, was als Sprenkel oder Streifen sichtbar wird. Flache Designs und Text bleiben gut erhalten; bei fotolastigen Seiten behält HTML in PNG jede Farbe.

Warum sehen die Kanten eines transparenten GIFs gezackt aus?

GIF-Transparenz gilt pro Pixel nur als An oder Aus, ohne Teiltransparenz. Geglättete Kanten, die mit einem Hintergrund verrechnet wurden, werden entweder zu einer Volltonfarbe oder verschwinden, was auf dunklen Hintergründen einen hellen Rand hinterlassen kann. Behalten Sie den weißen Hintergrund, wenn das GIF ohnehin auf Weiß liegt.

Funktioniert eine als GIF gespeicherte HTML-E-Mail-Signatur in jedem Mailprogramm?

Ein statisches GIF wird in praktisch jedem E-Mail-Programm angezeigt, weshalb Signaturen das Format jahrelang nutzten. Animierte GIFs sind weniger zuverlässig: Das klassische Outlook für Windows von 2007 bis 2013 zeigt nur das erste Bild, platzieren Sie wichtige Inhalte also im ersten Einzelbild.

Wie mache ich das GIF klein genug für eine Chat-App?

Verwenden Sie eine schmalere HTML-Seitenbreite oder wandeln Sie nur die erste Seite um. Liegt das Ergebnis noch über einem Limit, verkleinert GIF für Discord komprimieren es in Richtung der Upload-Grenze.