Wichtige Erkenntnisse
- Shopify unterstützt den GIF-Upload in Produktmedien, Seiteninhalten und Bild-Blöcken im Theme Editor.
- GIFs werden überall dort automatisch abgespielt (Autoplay), wo sie eingebettet sind.
- Komprimieren Sie GIFs vor dem Hochladen – unkomprimierte GIFs können sehr groß sein. Nutzen Sie ezgif.com.
- Für Hero-Sections und große Anzeigen ist ein MP4-Video meist die bessere Wahl für die Performance.
GIFs sind ein schneller Weg, um ein Produkt in Bewegung zu zeigen, ein Feature zu demonstrieren oder Ihrem Store einen dezenten animierten Akzent zu verleihen. Shopify unterstützt sie nativ – hier erfahren Sie, wo und wie Sie sie einsetzen können.
Warum Sie uns vertrauen können
Wir haben hunderte von Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer 5,0-Bewertung im Shopify App Store.
So fügen Sie ein GIF zu einer Produktseite hinzu
Schritt 1. Gehen Sie zu Produkte > wählen Sie Ihr Produkt aus > scrollen Sie zum Bereich Medien.
Schritt 2. Klicken Sie auf Medien hinzufügen und laden Sie Ihre GIF-Datei hoch.
Schritt 3. Das GIF erscheint in der Produktgalerie neben Ihren statischen Bildern. Wenn Kunden darauf klicken, wird es in der Vollbild-Lightbox abgespielt.
Schritt 4. Ziehen Sie das GIF per Drag & Drop, um die Reihenfolge bei Bedarf zu ändern. Speichern.
Das GIF wird in der Galerie-Vorschau und in der Vollansicht automatisch abgespielt. Es gibt keinen Play-Button oder Pause-Steuerung – es läuft in einer Endlosschleife.
So fügen Sie ein GIF zu einer Shopify-Seite oder einem Blog-Post hinzu
Schritt 1. Gehen Sie zu Online-Shop > Seiten (oder Blog-Beiträge) und öffnen Sie die Seite, die Sie bearbeiten möchten.
Schritt 2. Klicken Sie im Rich-Text-Editor auf die Schaltfläche Bild einfügen (das Fotosymbol in der Toolbar).
Schritt 3. Laden Sie Ihr GIF hoch oder wählen Sie es aus der Dateibibliothek aus.
Schritt 4. Das GIF wird direkt in den Inhalt eingefügt und spielt automatisch ab, wenn die Seite geladen wird.
So fügen Sie ein GIF über den Theme Editor hinzu
Im Theme Editor können Sie überall dort, wo Sie einen Bild-Block oder -Abschnitt sehen, ein GIF hochladen, genau wie ein statisches Bild.
Schritt 1. Gehen Sie zu Online-Shop > Themes > Anpassen.
Schritt 2. Klicken Sie auf den Abschnitt oder Block, in dem Sie das GIF haben möchten.
Schritt 3. Laden Sie im Bildwähler Ihr GIF hoch oder wählen Sie es aus Ihren Dateien aus.
Schritt 4. Speichern.
Das GIF wird an dieser Stelle im Storefront automatisch abgespielt.
GIF-Dateigröße – warum sie wichtig ist
GIFs sind bekanntlich große Dateien. Eine 5-sekündige Animation mit einer Breite von 800px kann unkomprimiert leicht über 10 MB groß sein. Große GIFs verursachen:
- Langsame Seitenladezeiten
- Schlechte Core Web Vitals-Werte
- Hohen mobilen Datenverbrauch für Kunden
Komprimieren Sie GIFs immer vor dem Hochladen. Nutzen Sie ezgif.com – es ist kostenlos, erfordert keinen Account und ermöglicht es Ihnen, Farben zu reduzieren, die Größe anzupassen und Frames zu entfernen, um die Dateigröße drastisch zu senken. Streben Sie weniger als 2 MB für GIFs in einer Produktgalerie oder auf einer Seite an, und weniger als 500 KB für kleine Inline-GIFs.
GIF vs. MP4 für animierte Inhalte
Für große animierte Bereiche – Hero-Hintergründe, Banner-Animationen in voller Breite, Produktdemos, die länger als 3 Sekunden dauern – ist MP4-Video fast immer die bessere Wahl.
Ein 5-sekündiger Loop-Videoclip im MP4-Format ist typischerweise 80-90 % kleiner als das entsprechende GIF, lädt schneller und sieht schärfer aus. MP4 unterstützt zudem Ton und läuft flüssiger auf Mobilgeräten.
Verwenden Sie GIFs, wenn:
- Sie ein kleines, einfaches animiertes Icon oder Badge benötigen
- Sie Animationen in einen Rich-Text-Inhaltsbereich einfügen (keine Videooption)
- Die Animation einfach genug ist, dass die GIF-Komprimierung gut funktioniert (wenige Farben, begrenzte Bewegung)
Verwenden Sie MP4, wenn:
- Die Animation länger als 2-3 Sekunden dauert
- Sie sie in einer Hero-, Banner- oder Full-Width-Sektion benötigen
- Dateigröße oder Ladegeschwindigkeit ein kritisches Thema sind
GIFs extern hosten
Shopifys Dateispeicher ist großzügig, aber nicht unbegrenzt. Wenn Sie viele GIFs verwenden, können Sie diese extern hosten (z. B. auf Giphy, Cloudinary oder Ihrem eigenen CDN) und sie über ihre URL einbetten.
In den Bild-Blöcken des Theme Editors erfordert dies in der Regel Code, um ein URL-basiertes Bild einzubetten, anstatt den Standard-Dateiwähler zu verwenden. Beschreiben Sie dies Fudge, falls Sie Hilfe benötigen.
