Key Takeaways
- Shopify unterstützt den Upload von GIFs in Produktmedien, Seiteninhalten und Bildblöcken im Theme Editor.
- GIFs starten per Autoplay automatisch überall dort, wo sie eingebettet sind.
- Komprimiere GIFs vor dem Upload – unkomprimierte GIFs können extrem groß sein. Nutze dafür am besten ezgif.com.
- Für Hero Sections und große Darstellungen ist ein MP4-Video aus Performance-Gründen meist die bessere Wahl.
GIFs sind ein schneller Weg, um ein Produkt in Aktion zu zeigen, ein Feature zu demonstrieren oder deinem Store einen dezenten animierten Akzent zu verleihen. Shopify unterstützt sie nativ – hier erfährst du, wo und wie du sie einsetzt.
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. Gehe zu Produkte > wähle dein Produkt aus > scrolle zum Bereich Medien.
Schritt 2. Klicke auf Medien hinzufügen und lade deine GIF-Datei hoch.
Schritt 3. Das GIF erscheint in der Produktgalerie neben deinen statischen Bildern. Wenn Kunden darauf klicken, wird es in der Full-Size Lightbox abgespielt.
Schritt 4. Ziehe es per Drag-and-Drop, um die Reihenfolge bei Bedarf zu ändern. Speichern.
Das GIF wird in der Galerie-Vorschau und in der Vollansicht automatisch abgespielt (Autoplay). Es gibt keine Wiedergabetaste oder Pausenfunktion – es läuft in einer Endlosschleife.
Verwandt: Shopify Theme beschleunigen.
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.
Verwandt: Lazy Load Videos in Shopify.
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-Backgrounds, Banner-Animationen über die volle Breite, Produktdemos, die länger als 3 Sekunden dauern – ist MP4-Video fast immer die bessere Wahl.
Ein 5-sekündiger Videoclip im MP4-Format ist in der Regel 80-90 % kleiner als ein entsprechendes GIF, lädt schneller und sieht schärfer aus. MP4 unterstützt zudem Ton und läuft auf Mobilgeräten flüssiger.
Verwende GIFs, wenn:
- Du ein kleines, einfaches animiertes Icon oder Badge benötigst
- Du eine Animation zu einem Rich-Text-Bereich hinzufügst (keine Video-Option)
- Die Animation einfach genug ist, dass die GIF-Komprimierung gut funktioniert (2 Farben, begrenzte Bewegung)
Verwende MP4, wenn:
Verwandt: Produktbeschreibung in Shopify aktualisieren.
Verwandt: Videos in Shopify per Lazy Load laden.
Verwandt: Video zu einer Shopify Produktgalerie hinzufügen.
Verwandt: Animierte Inhalte in Shopify hinzufügen.
- Die Animation länger als 2-3 Sekunden ist
- Du sie in einer Hero-, Banner- oder Full-Width-Section benötigst
- Dateigröße oder Ladegeschwindigkeit ein Faktor sind
GIFs extern hosten
Der Speicherplatz bei Shopify ist großzügig, aber nicht unbegrenzt. Wenn du viele GIFs verwendest, kannst du sie extern hosten (z. B. auf Giphy, Cloudinary oder einem eigenen CDN) und über ihre URL einbetten.
In den Bild-Blöcken des Theme-Editors benötigt man dafür normalerweise etwas Code, um ein Bild per URL einzubetten, anstatt die normale Dateiauswahl zu nutzen. Beschreibe Fudge einfach, was du brauchst, falls das auf dich zutrifft.
FAQ
Das allgemeine Bildlimit von Shopify liegt bei 20 MB pro Datei, und dieses Limit gilt auch für GIFs. In der Praxis ist das Limit jedoch sehr viel niedriger – alles über 5 MB wird den Page Speed spürbar verschlechtern. Ziele auf unter 2 MB für GIFs in der Produktgalerie und auf unter 500 KB für kleine Inline-GIFs ab.
Meistens liegt es am Dateiformat oder am Theme: (1) Die Datei wurde als Single-Frame-GIF hochgeladen (enthält also gar keine echte Animation), (2) der Bildprozessor von Shopify hat das Bild vereinfacht – lade das GIF stattdessen lieber über den Bereich 'Dateien' statt über den Rich-Text-Editor hoch und verlinke die URL, oder (3) das Lazy-Loading deines Themes blockiert das GIF.
Ja. Lade das GIF im Bereich 'Medien' des Produkt-Editors hoch. Klicke dann im Bereich 'Varianten' auf eine Variante und weise das GIF als Medium zu. Das GIF wird dann angezeigt, wenn Kunden diese Variante auswählen.
Indirekt – große, unoptimierte GIFs verschlechtern den Page Speed und die Core Web Vitals, was unmittelbar in die SEO-Rankings einfließt. Komprimierte GIFs in angemessener Größe haben hingegen kaum Auswirkungen auf die SEO. Ein 10 MB großes GIF in deiner Hero Section ist ein absoluter Lighthouse-Killer; ein 200 KB großes Inline-GIF ist hingegen völlig in Ordnung.
Video. Eine 5-sekündige Produktdemo als MP4 ist in der Regel 80-90 % kleiner als derselbe Inhalt als GIF. Sie wird schärfer abgespielt und Shopify unterstützt sie nativ in den Produktgalerien. Nutze GIFs lieber für kurze, einfache Animationen oder für Inhaltsbereiche, in denen du kein Video einbinden kannst. Um ein Looping-MP4 außerhalb der Produktgalerie einzufügen (z. B. in einer benutzerdefinierten Feature Section), beschreibe Fudge einfach, was du haben möchtest, und es erstellt die Section direkt mit Autoplay-, Muted- und Loop-Attributen.
