Fessle die Aufmerksamkeit der Besucher mit automatisch abgespielten Animationen in Endlosschleife.

Eine .gif-Datei (Graphics Interchange Format) ist ein Bildtyp, der kurze Animationen unterstützt. Animierte .gifs werden automatisch abgespielt, enthalten keinen Sound und werden normalerweise in einer Endlosschleife wiedergegeben.

Du kannst Google Bilder und Websites wie giphy.com durchsuchen, um .gif-Bilder zu finden, oder eigene GIFs mithilfe von Drittanbieter-Software erstellen. Wenn du eine .gif-Datei hast, kannst du sie auf deiner Website überall dort hochladen, wo Bilder unterstützt werden.

Hier ist ein Beispiel für ein animiertes .gif:

Ein .gif hinzufügen

Du kannst auf deiner Website eine .gif-Datei überall dort hochladen, wo du Bilder hinzufügen kannst, darunter:

• Banner
• Cover-Seiten (Version 7.0)
• Galerie-Blöcke (Version 7.0)
• Galerie-Seiten (Version 7.0)
• Galerie-Abschnitte
• Bild-Blöcke
• Index-Seiten (Version 7.0)
• Logos
• Portfolio-Seiten und Unterseiten
• Website-Hintergrund (Version 7.0)

Die .gif-Datei hat die gleichen Optionen wie ein statisches Bild. Wenn die Banner-Bilder deiner Website beispielsweise Overlay-Text unterstützen, kann der Text über ein .gif-Banner angezeigt werden.

Hinweis: Wenn du ein .gif mit dem integrierten Bild-Editor bearbeitest, oder Bildeffekte hinzufügst, konvertiert er die .gif-Datei in eine statische .jpg-Datei.

Best Practices

Verwende kleine Größen

Große .gif-Dateien können deine Website verlangsamen. Wir empfehlen, animierte .gifs so zu formatieren, dass sie die gewünschte Größe für die Anzeige auf deiner Website haben. Befolge unsere Best Practices für Bilder, um sicherzustellen, dass deine .gif-Dateien unseren Richtlinien für die Dateigröße entsprechen.

Selbst wenn dein .gif unter unserer Dateigrößenbeschränkung liegt, kann die Anzahl der einzelnen Frames das Hochladen verhindern. Du kannst versuchen, deine Datei mit Bildtools von Drittanbietern zu komprimieren. Dies fällt jedoch außerhalb des Zuständigkeitsbereichs unseres Supports. Wenn du nach dem Komprimieren deiner .gif-Datei eine schlechte Qualität feststellst, verwandle dein .gif in ein Video und füge das Video zu deiner Website hinzu.

Vermeide ablenkende Bilder

Während .gif-Dateien eine gute Möglichkeit sein können, Aufmerksamkeit zu erregen oder dynamische Bewegungen hinzuzufügen, können ihre Animationen auch ablenken. Vermeide sie in folgenden Situationen:

• An Orten, an denen Besucher sich wirklich auf deinen Text oder andere Inhalte konzentrieren sollen.
• Mehrmals in einem einzigen Bereich, da diese Anzahl an Bewegungen störend wirken können.

Tipp: Wie du deine .gifs barrierefreier machen kannst, findest du unter Audio, Bilder und Videos barrierefrei gestalten.

Überprüfe die Komprimierungseinstellungen, um Verzerrungen oder seltsame Farben zu vermeiden

Wenn deine GIF-Datei verzerrt aussieht, insbesondere in Bereichen mit Farbverläufen oder Schatten, liegt dies wahrscheinlich an der Komprimierung. Eine GIF-Datei kann nur 256 Farben pro Frame enthalten, daher verwenden Bildbearbeitungstools einen Prozess namens „Dithering“ (Fehlerdiffusion), um die Anzahl der Farben beim Erstellen einer GIF-Datei zu reduzieren.

Das Anpassen der Bildqualität fällt nicht in den Zuständigkeitsbereich des Squarespace-Supports. Versuche, die Komprimierungs- oder Dithering-Einstellungen deines Bildbearbeitungstools anzupassen, eine Quelle mit höherer Qualität für die GIF-Datei zu verwenden oder die Hilfedokumentation für dein verwendetes Tool zu lesen.

Animierte Buttons erstellen

Klick-URLs verwandeln Bilder in Links zu anderen Seiten deiner Website, externen Seiten oder Dateien. Diese Links sind in Bild-Blöcken, Galerie-Blöcken und einigen Galerie-Seiten verfügbar.

Tipp: Logos haben eine integrierte Klick-URL, die dich zu deiner Startseite führt.

Eine Methode, wie du einen animierten Button erstellen kannst:

1. Füge einen Plakat-Bild-Block zu einem Bereich hinzu, der Blöcke unterstützt, z. B. eine Layout-Seite.
2. Lade deine .gif-Datei im Tab Inhalt hoch.
3. Füge im Tab Design deinen Link in das Feld Klick-URL ein. Wenn du auf eine Seite deiner Website verlinkst, erstelle eine Inhaltsverknüpfung.
4. Verwende den Titel oder Untertitel des Plakat-Bild-Blocks, um Text hinzuzufügen.
5. Gestalte den Bild-Block und füge weitere Blöcke hinzu, um die Größe zu ändern.

Eine Video-URL anstelle einer .gif-Datei verwenden

Du kannst einen ähnlichen Effekt wie ein animiertes GIF erzielen, indem du einen Videohintergrund zu einem Seitenabschnitt, einem Banner oder einer Cover-Seite hinzufügst.

• Videohintergründe werden wie .gifs automatisch ohne Ton abgespielt und in einer Endlosschleife wiedergegeben
• Anstatt eine .gif-Datei zu verwenden, verlinkst du auf eine Video-URL, z. B. ein YouTube-Video
• Video-Banner werden nur in einigen Templates der Version 7.0 unterstützt, aber Videohintergründe für Seitenabschnitte werden auf allen Websites der Version 7.1 unterstützt. Videohintergründe für Cover-Seiten werden in allen Templates der Version 7.0 unterstützt.

Hier erfahren Sie mehr: Ein Hintergrund-Video hinzufügen.