Animierte GIFs verwenden auf der Produktseite? NEIN DANKE!

Höhere Conversion-Rate durch schnellere Ladezeit der Produktseite!

Dein Online-Shop sollte unter zwei Sekunden für den Kunden "geladen" sein. Große GIF-Dateien verhindert das, hauptsächlich auf dem mobilen Netzwerk - und die Mehrheit kauft online ein. Den Artikel über Speed-Optimierung findest Du hier.

❌ Warum nicht?

• Die Ladezeiten sind massiv, da die Dateigröße der GIFs viel zu groß ist.
• Die Qualität nicht gut (max. 256 Farben) und wenn man diese komprimiert, wird es noch schlechter.*

✅ Die Alternative?

• Die GIFs umwandeln in Videos und diese mit HTML5 einbinden.
• Die Dateigröße verringert sich damit bis zu 95 %

⁉ Wie geht das?

1. GIF umwandeln in ein MP4 Video mit dem kostenlosen Service ezGIF
2. Danach das MP4 Video auf den Server laden (bei Shopify bei den Einstellungen/Dateien, sonstige Systeme per Mediathek, FTP etc.)
3. Sich die Datei-URL merken/zwischenspeichern.
4. Den aktuell verwendeten <img> Tag wie:
   
   <img src="https://meinedomain.de/verzeichnis/meinvideo.gif"
   alt="" width="400" height="300" />
   
   ersetzen durch:
   
   <video autoplay loop muted playsinline width="400" height="300">
   <source src="https://meinedomain.de/verzeichnis/meinvideo.mp4" type="video/mp4" />
   <img src="https://meinedomain.de/verzeichnis/meinvideo.gif" width="400" height="300" />
   </video>
   
5. Die GIF-Datei solltest Du auf dem Server lassen, diese wird verwendet, falls der Browser HTML5 Videos nicht unterstützt.

Das war auch schon alles. So einfach geht das! 😃

* Du kannst natürlich direkt Videos erstellen und musst nicht zuerst animierte GIFs davon erstellen, wenn Du Videomaterial hast. Dann musst du einfach schauen, dass Du H.264 Videos verwendest und diese komprimiert sind.