Das Wichtigste in Kürze
- Shopify unterstützt den Upload von GIFs in Produktmedien, Seiteninhalten und Bildblöcken im Theme-Editor.
- GIFs werden überall, wo sie eingebettet sind, automatisch abgespielt.
- Komprimiere GIFs vor dem Upload – unkomprimierte GIFs können sehr groß sein. Nutze ezgif.com.
- Für Hero-Sections und großflächige Anzeigen ist ein MP4-Video aus Performance-Gründen meist die bessere Wahl.
GIFs sind eine schnelle Möglichkeit, ein Produkt in Bewegung zu zeigen, ein Feature zu demonstrieren oder deinem Shop einen dezenten animierten Akzent zu verleihen. Shopify unterstützt sie nativ – hier erfährst du, wo und wie du sie nutzen kannst.
Warum Sie uns vertrauen können
Wir haben hunderte Shopify-Storefronts erstellt und angepasst. Außerdem haben wir Fudge entwickelt – einen KI-Storefront-Editor mit einer Bewertung von 4.8 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-Hintergründe, Banner-Animationen in voller Breite, Produktdemos, die länger als 3 Sekunden laufen – ist ein MP4-Video fast immer die bessere Wahl.
Ein 5 Sekunden langer Loop-Videoclip im MP4-Format ist in der Regel 80-90 % kleiner als das entsprechende GIF, lädt schneller und sieht schärfer aus. MP4 unterstützt auch Ton und läuft auf Mobilgeräten flüssiger.
Verwende GIFs, wenn:
- Du ein kleines, einfaches animiertes Icon oder Badge brauchst
- Du eine Animation in einem Rich-Text-Bereich hinzufügst (keine Option für Video)
- Die Animation einfach genug ist, sodass GIF-Komprimierung gut funktioniert (2 Farben, wenig Bewegung)
Verwende MP4, wenn:
Passend dazu: Produktbeschreibung in Shopify aktualisieren.
Passend dazu: Videos in Shopify per Lazy Load laden.
Passend dazu: Video zu einer Shopify-Produktgalerie hinzufügen.
Passend dazu: Animierte Inhalte in Shopify hinzufügen.
- Die Animation länger als 2-3 Sekunden ist
- Du sie in einem Hero-, Banner- oder Full-Width-Bereich brauchst
- Dateigröße oder Ladezeit wichtig 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 für GIFs gilt dasselbe Limit. In der Praxis ist das Limit jedoch viel niedriger – alles über 5 MB verschlechtert die Ladezeit der Seite spürbar. Versuche, unter 2 MB für GIFs in der Produktgalerie und unter 500 KB für kleine Inline-GIFs zu bleiben.
Das ist fast immer ein Problem mit dem Dateiformat oder Theme: (1) Die Datei wurde als Einzelbild-GIF hochgeladen (enthält keine echte Animation), (2) der Bildprozessor von Shopify hat sie in ein statisches Bild umgewandelt – lade sie über den Bereich 'Dateien' statt über den Rich-Text-Editor hoch und verweise auf die URL, oder (3) das Lazy-Loading deines Themes fängt das GIF ab.
Ja. Lade das GIF im Medienbereich des Produkt-Editors hoch, klicke dann im Bereich Varianten auf eine Variante und weise ihr das GIF als Medium zu. Das GIF wird dann angezeigt, wenn Kunden diese Variante auswählen.
Indirekt – große, unoptimierte GIFs verschlechtern die Ladezeit und die Core Web Vitals, was sich aufs Ranking auswirkt. Komprimierte GIFs in passender Größe haben kaum Auswirkungen auf die SEO. Ein 10-MB-GIF im Hero-Bereich ist ein Lighthouse-Killer; ein 200-KB-Inline-GIF ist völlig in Ordnung.
Video. Eine 5-sekündige Produktdemo als MP4 ist in der Regel 80–90 % kleiner als derselbe Inhalt als GIF, wird schärfer abgespielt und Shopify unterstützt sie nativ in Produktgalerien. Hebe dir GIFs für kurze, einfache Animationen oder Inhaltsbereiche auf, in denen du kein Video hinzufügen kannst. Um eine MP4-Endlosschleife außerhalb der Produktgalerie (z. B. in einem benutzerdefinierten Feature-Bereich) zu platzieren, beschreibe Fudge, was du brauchst, und es baut dir den Bereich mit den Attributen autoplay + muted + loop.
