À retenir
- Shopify prend en charge le téléchargement de GIF dans les médias de produits, le contenu des pages et les blocs d’images de l’éditeur de thème (Theme Editor).
- Les GIF se lisent automatiquement (autoplay) partout où ils sont intégrés.
- Compressez les GIF avant de les télécharger - les GIF non compressés peuvent être très lourds. Utilisez ezgif.com.
- Pour les sections hero et les grands affichages, une vidéo MP4 est généralement un meilleur choix pour les performances.
Les GIF sont un moyen rapide de montrer un produit en mouvement, de démontrer une fonctionnalité ou d’ajouter une touche d’animation subtile à votre boutique. Shopify les prend en charge nativement - voici où et comment les utiliser.
Pourquoi vous pouvez nous faire confiance
Nous avons créé et personnalisé des centaines de boutiques en ligne Shopify. Nous avons également créé Fudge - un éditeur de boutique IA noté 5.0 sur le Shopify App Store.
Comment ajouter un GIF sur une page produit
Étape 1. Allez dans Produits > sélectionnez votre produit > faites défiler jusqu’à la section Multimédia.
Étape 2. Cliquez sur Ajouter un fichier multimédia et téléchargez votre fichier GIF.
Étape 3. Le GIF apparaît dans la galerie du produit aux côtés de vos images statiques. Lorsque les clients cliquent dessus, il se lance en mode plein écran (lightbox).
Étape 4. Faites un glisser-déposer pour réorganiser si nécessaire. Enregistrez.
Le GIF se lira en boucle automatiquement (autoplay) dans la miniature de la galerie et en plein écran. Il n’y a pas de bouton lecture ou pause - il tourne en boucle continue.
À lire aussi : Accélérer un thème Shopify.
Comment ajouter un GIF sur une page ou un article de blog Shopify
Étape 1. Allez dans Boutique en ligne > Pages (ou Articles de blog) et ouvrez la page que vous souhaitez éditer.
Étape 2. Dans l’éditeur de texte enrichi, cliquez sur le bouton Insérer une image (l’icône photo dans la barre d’outils).
Étape 3. Téléchargez votre GIF ou sélectionnez-le dans la bibliothèque de fichiers.
Étape 4. Le GIF s’insère directement dans le texte et se lancera automatiquement au chargement de la page.
Comment ajouter un GIF via l’éditeur de thème
Dans l’éditeur de thème (Theme Editor), partout où vous voyez un bloc ou une section Image, vous pouvez télécharger un GIF comme vous le feriez pour une image statique.
Étape 1. Allez dans Boutique en ligne > Thèmes > Personnaliser.
Étape 2. Cliquez sur la section ou le bloc où vous voulez mettre le GIF.
Étape 3. Dans le sélecteur d’image, téléchargez votre GIF ou choisissez-le dans vos fichiers.
Étape 4. Enregistrez.
Le GIF se lira automatiquement à cet emplacement sur votre boutique.
Poids du fichier GIF - pourquoi c’est important
Les GIF sont réputés pour être des fichiers très lourds. Une animation de 5 secondes à 800px de large peut facilement dépasser 10 Mo si elle n’est pas compressée. Des GIF trop lourds entraînent :
- Des temps de chargement de page lents
- De mauvais scores Core Web Vitals
- Une forte consommation de données mobiles pour vos clients
Compressez toujours vos GIF avant de les télécharger. Utilisez ezgif.com - c’est gratuit, sans inscription, et vous permet de réduire les couleurs, recadrer et couper des frames pour réduire considérablement le poids du fichier. Visez moins de 2 Mo pour tout GIF utilisé dans une galerie de produits ou le contenu d’une page, et moins de 500 Ko pour des petits GIF intégrés au texte.
GIF vs MP4 pour le contenu animé
Pour les grandes zones animées - arrières-plans hero, animations de bannières en pleine largeur, démos de produits qui durent plus de 3 secondes - la vidéo MP4 est presque toujours le meilleur choix.
Un clip vidéo en boucle de 5 secondes au format MP4 est généralement 80 à 90 % plus léger que le GIF équivalent, se charge plus vite et offre une image plus nette. Le format MP4 prend également en charge le son et tourne de manière plus fluide sur mobile.
Utilisez les GIF quand :
- Vous avez besoin d’une petite icône animée simple ou d’un badge
- Vous ajoutez une animation dans une zone de texte enrichi (pas d’option vidéo)
- L’animation est assez simple pour que la compression GIF fonctionne bien (2 couleurs, mouvements limités)
Utilisez le MP4 quand :
À lire aussi : Mettre à jour une description de produit sur Shopify.
À lire aussi : Lazy Load des vidéos sur Shopify.
À lire aussi : Ajouter une vidéo dans une galerie de produits Shopify.
À lire aussi : Ajouter du contenu animé sur Shopify.
- L’animation dure plus de 2 à 3 secondes
- Vous en avez besoin pour une section hero, une bannière ou une section pleine largeur
- Le poids du fichier ou le temps de chargement est un problème
Héberger des GIF en externe
L’espace de stockage de fichiers de Shopify est généreux mais pas illimité. Si vous utilisez beaucoup de GIF, vous pouvez les héberger en externe (par exemple, sur Giphy, Cloudinary ou votre propre CDN) et les intégrer à l’aide de leur URL.
Dans les blocs d’images de l’éditeur de thème, cela nécessite généralement du code pour intégrer une image à partir d’une URL plutôt que d’utiliser le sélecteur de fichiers standard. Décrivez cela à Fudge si vous en avez besoin.
FAQ
Quelle est la taille maximale d’un fichier GIF sur Shopify ?
La limite générale d’image de Shopify est de 20 Mo par fichier, et les GIF suivent cette même limite. La limite pratique est cependant bien inférieure : tout fichier de plus de 5 Mo ralentira visiblement la vitesse de chargement de votre page. Visez moins de 2 Mo pour les GIF des galeries de produits, et moins de 500 Ko pour les petits GIF intégrés au contenu.
Pourquoi mon GIF Shopify ne s’anime-t-il pas ?
Il s’agit presque toujours d’un problème de format de fichier ou de thème : (1) le fichier a été importé sous la forme d’un GIF à une seule image (sans véritable animation), (2) le processeur d’images de Shopify l’a aplati - importez-le via la section Fichiers au lieu de l’éditeur de texte enrichi et faites référence à l’URL, ou (3) le lazy-loading de votre thème intercepte le GIF.
Puis-je ajouter un GIF à l’image d’une variante de produit Shopify ?
Oui. Dans la section Médias de l’éditeur de produit, importez le GIF, puis dans la section Variantes, cliquez sur une variante et attribuez le GIF comme média. Le GIF s’affichera lorsque les acheteurs sélectionneront cette variante.
Les GIF vont-ils nuire à mon référencement SEO sur Shopify ?
Indirectement : les gros GIF non optimisés nuisent à la vitesse de la page et aux Core Web Vitals, ce qui a un impact sur le classement. Les GIF compressés et de taille appropriée ont un impact négligeable sur le SEO. Un GIF de 10 Mo dans votre section hero ruinera votre score Lighthouse ; un GIF de 200 Ko dans le texte ne posera aucun problème.
Vaut-il mieux utiliser un GIF ou une vidéo pour une démonstration de produit sur Shopify ?
Une vidéo. Une démo de produit de 5 secondes en MP4 est généralement 80 à 90 % plus légère que le même contenu sous forme de GIF, elle est plus nette et Shopify la prend en charge de manière native dans les galeries de produits. Réservez les GIF pour des animations courtes et simples ou pour des zones de contenu où vous ne pouvez pas ajouter de vidéo. Pour placer un MP4 en boucle en dehors de la galerie de produits (par exemple, dans une section de fonctionnalités personnalisée), décrivez ce que vous souhaitez à Fudge et il créera la section avec les attributs autoplay + muted + loop.
