So erstellen Sie eine GIF-Animation und fügen sie zu HTML hinzu

Zuletzt aktualisiert am 22. November 2023 by Peter Wood


In der sich ständig weiterentwickelnden Welt des Webdesigns und der Inhaltserstellung ist die Fähigkeit, auffällige Grafiken und Animationen in Webseiten zu integrieren, eine wertvolle Fähigkeit. GIFs sind eine der ansprechendsten und am weitesten verbreiteten Animationsformen im Internet. Ganz gleich, ob Sie Humor hinzufügen, interaktive Elemente erstellen oder einfach die visuelle Attraktivität Ihrer Website verbessern möchten: Zu wissen, wie man GIFs zu HTML hinzufügt, ist eine wesentliche Fähigkeit für jeden Webentwickler oder Inhaltsersteller. In dieser Beispielanleitung werden Sie durch die Schritte geführt, um nahtlos zu funktionieren Integrieren Sie GIFs in HTML-Code damit Sie Ihre Webinhalte zum Leben erwecken können.

Laden Sie animiertes GIF hoch

Teil 1: So erstellen Sie eine GIF-Animation zum Hinzufügen in HTML

Bevor Sie eine GIF-Animation zu HTML hinzufügen, benötigen Sie zunächst eine GIF-Animation. Wenn Sie auf der Website eine sehr geeignete GIF-Animation finden, können Sie den Link direkt zur späteren Verwendung speichern. Wenn Sie jedoch keine geeignete GIF-Animation finden, können Sie selbst eine GIF-Animation erstellen und sie der Website hinzufügen. WidsMob GIF ist ein GIF-Animationsersteller und -Editor, mit dem Sie jede gewünschte GIF-Animation aus Video- und Bilddateien erstellen können.

1. Importieren Sie MP4, MKV, WEBM, MPEG und viele andere Arten von Videodateien.

2. Passen Sie den Inhalt der GIF-Animation an und zeigen Sie sie sofort in der Vorschau an.

3. Passen Sie die HSL-Einstellungen der GIF-Animation an, um das beste Seherlebnis zu erzielen.

4. Fügen Sie der GIF-Animation Text zur zusätzlichen Erläuterung hinzu.

Win Download Mac download

Schritt 1: Downloaden und installieren WidsMob GIF auf deinem Computer. Nach erfolgreicher Installation starten Sie die Software. Drücke den Video to GIF Klicken Sie auf die Schaltfläche auf der Homepage der Software, wählen Sie die Videodatei im Popup-Dialogfeld aus und importieren Sie sie in die Software. Nachdem das Video erfolgreich importiert wurde, wird die GIF-Animation automatisch generiert und mit der Wiedergabe begonnen.

Wählen Sie Foto zu GIF

Schritt 2: Der Inhalt des Videos wird immer komplizierter, daher können Sie erwägen, den Inhalt der GIF-Animation neu auszuwählen. Unterhalb des Vorschaufelds der GIF-Animation befindet sich eine Zeitleiste. Sie können den Inhalt der GIF-Animation über die Auswahlfelder an beiden Enden der Zeitleiste bestimmen oder an beiden Enden die Startzeit und Wiedergabezeit der GIF-Animation eingeben. Drücke den Play Symbol, um eine Vorschau der Wiedergabe der GIF-Animation anzuzeigen.

WidsMob GIF Play

Schritt 3: Klicken Sie auf die Video Adjustment Taste. Im Bearbeitungsbereich auf der rechten Seite erscheinen drei Optionen, mit denen Sie die HSL der GIF-Animation anpassen können. Passen Sie den Schieberegler an Kontrast-Funktion und beobachten Sie die Echtzeitänderungen der GIF-Animation auf der linken Seite. Wenn Sie das beste Seherlebnis erzielen möchten, müssen Sie direkt mit den beiden anderen Optionen zusammenarbeiten.

WidsMob GIF Brightness

Schritt 4: Für die in HTML hinzugefügte GIF-Animation müssen Sie möglicherweise Text hinzufügen, um die Erklärung zu unterstützen. Drücke den Text hinzufügen Klicken Sie auf die Schaltfläche in der oberen rechten Ecke des Vorschaufelds, geben Sie Text in das Popup-Dialogfeld ein und legen Sie Textfarbe, Schriftart, Größe usw. fest. Klicken Sie auf OK Klicken Sie auf die Schaltfläche und der Text wird offiziell zur GIF-Animation hinzugefügt.

WidsMob GIF OK

Schritt 5: Wählen Sie den Text in der GIF-Animation direkt aus und ziehen Sie ihn, um die Position des Texts in der GIF-Animation zu ändern. Für GIF-Animationen in HTML können Sie den Schieberegler anpassen Qualität in GIF-Einstellungen um eine hochwertige GIF-Animation zu erhalten. Klicken Sie nach der Bearbeitung auf GIF exportieren Klicken Sie auf die Schaltfläche, um die GIF-Animation zu exportieren und in HTML einzufügen.

WidsMob GIF exportieren Win Download Mac download

Teil 2: So fügen Sie animierte GIFs in HTML hinzu

Nachdem Sie nun über eine GIF-Animation verfügen, müssen Sie als Nächstes die GIF-Animation erfolgreich zur HTML-Datei hinzufügen, um sicherzustellen, dass sie reibungslos im Web abgespielt werden kann. Allerdings können die Anzeigeeinstellungen verschiedener Webbrowser unterschiedlich sein und Sie müssen weiterhin versuchen, das beste Seherlebnis zu gewährleisten.

Schritt 1: Stellen Sie sicher, dass Ihre GIF-Animationsdatei im selben Dateiverzeichnis abgelegt wird wie der HTML-Code. Zum Öffnen der HTML-Datei können Sie einen Texteditor oder eine integrierte Entwicklungsumgebung wählen. Suchen Sie in Ihrem Code den Code, der eine GIF-Animation einfügen muss. Im Allgemeinen verwenden Sie die Tag zum Einfügen einer GIF-Animation.

Schritt 2: Fügen Sie src zu img hinzu, um den Speicherpfad der GIF-Animationsdatei anzugeben. Der relative Pfad ist die Dateiadresse, die im selben Verzeichnis wie der HTML-Code gespeichert ist. Vergessen Sie nicht, den Namen und das Format der GIF-Animation anzugeben. Mit absoluten Pfaden können Sie animierte GIFs hinzufügen, die auf die Website hochgeladen wurden.

Schritt 3: Im Attribut img können Sie das Attribut alt festlegen, das eine kurze Beschreibung der GIF-Animation liefern kann. Wenn die GIF-Animation nicht geladen werden kann, wird der Text zur Unterstützung angezeigt.

Schritt 4: Abhängig von den Anzeigeeinstellungen des Webs müssen Sie möglicherweise die Breite und Höhe anpassen. HTML enthält diese Attributfunktion.

Schritt 5: Speichern Sie die HTML-Datei mit der hinzugefügten GIF-Animation, und Sie können sie in einem Webbrowser öffnen, um eine Vorschau der auf der Webseite abgespielten GIF-Animation anzuzeigen. Animierte GIFs sollten in den meisten Browsern automatisch abgespielt werden, ohne dass zusätzlicher Code erforderlich ist.

Teil 3. FAQs von GIF zu HTML

1Was ist HTML und warum sollte ich GIFs hinzufügen?
HTML (Hypertext Markup Language) ist die Standardsprache zum Erstellen von Webseiten. Das Hinzufügen von GIFs zu HTML kann die visuelle Attraktivität von Webinhalten steigern und sie für Ihr Publikum ansprechender, interaktiver und unterhaltsamer machen.
2Gibt es eine Größenbeschränkung für HTML-formatierte GIFs?
Es gibt keine spezifischen Größenbeschränkungen für GIFs in HTML, aber die Abmessungen und die Dateigröße des GIFs müssen berücksichtigt werden, um sicherzustellen, dass es in Ihre Webseite passt und das Laden der Seite nicht verlangsamt.
3Was sind die Best Practices zur Optimierung von GIFs in HTML, um die Webleistung zu verbessern?
Um GIFs für die Webleistung zu optimieren, sollten Sie erwägen, die Dateigröße zu reduzieren, indem Sie geeignete Komprimierungstools verwenden, die Anzahl der Frames minimieren und eine begrenzte Farbpalette verwenden. Darüber hinaus können Sie in Ihrem HTML die Attribute „width“ und „height“ angeben, um unnötige Größenänderungen durch den Browser zu vermeiden.

Konklusion

Sie haben inzwischen gelernt, wie man GIFs zu HTML hinzufügt, und wir hoffen, dass dieser Leitfaden Ihnen dabei hilft, Ihre Webinhalte zu verbessern und Ihr Publikum mit ansprechenden Animationen zu fesseln. Das Web ist ein dynamischer Raum und die Möglichkeit, GIFs einzubinden, eröffnet eine Welt voller kreativer Möglichkeiten. Unabhängig davon, ob Sie GIFs zur Unterhaltung, zur Bildung oder zur Verbesserung des Benutzererlebnisses verwenden, denken Sie daran, Ihre Animationen relevant, leistungsoptimiert und im Einklang mit dem Gesamtdesign Ihrer Website zu halten.

Das könnte Sie interessieren