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. 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 das gilt auch für GIFs. Das praktische Limit ist allerdings deutlich niedriger – alles über 5 MB verschlechtert spürbar die Ladezeit der Seite. Peile unter 2 MB für GIFs in der Produktgalerie an und unter 500 KB für kleine Inline-GIFs.
Das ist fast immer ein Problem mit dem Dateiformat oder dem Theme: (1) Die Datei wurde als Single-Frame-GIF hochgeladen (enthält gar keine echte Animation), (2) der Bildprozessor von Shopify hat sie in ein statisches Bild umgewandelt – lade das GIF über den Bereich "Dateien" anstatt über den Rich-Text-Editor hoch und nutze die URL, oder (3) das Lazy-Loading deines Themes blockiert das GIF.
Ja. Lade das GIF im Produkt-Editor im Bereich "Medien" 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 auf die Rankings auswirkt. Komprimierte, gut dimensionierte GIFs haben kaum Auswirkungen auf das SEO. Ein 10-MB-GIF in deiner Hero-Section ist ein echter 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 der gleiche Inhalt als GIF, das Video ist schärfer und Shopify unterstützt es nativ in Produktgalerien. Nutze GIFs lieber für kurze, einfache Animationen oder für Inhaltsbereiche, in denen du kein Video einfügen kannst. Um ein MP4 im Loop außerhalb der Produktgalerie (z. B. in einer Custom-Feature-Section) zu platzieren, beschreibe Fudge einfach, was du brauchst – es baut dir dann die Section mit autoplay + muted + loop Attributen.
