À retenir
- Shopify permet d’importer des GIF dans les médias des produits, le contenu des pages et les blocs d’images de l’éditeur de thème.
- Les GIF se lisent automatiquement partout où ils sont intégrés.
- Compressez vos GIF avant de les importer : 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 présenter une fonctionnalité ou d’ajouter une touche animée 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 Shopify. Nous avons également développé Fudge : un éditeur de boutique IA avec une note de 4.8 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 - hero backgrounds, animations de bannières 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 fonctionne de manière plus fluide sur mobile.
Utilisez les GIF quand :
- Vous avez besoin d’une petite icône ou d’un badge animé simple
- Vous ajoutez une animation à une zone de texte enrichi (sans 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 : Le lazy-loading de vidéos sur Shopify.
À lire aussi : Ajouter une vidéo à une galerie de produits Shopify.
À lire aussi : Ajouter du contenu animé sur Shopify.
- L’animation dure plus de 2 ou 3 secondes
- Vous en avez besoin pour un hero, une bannière ou une section pleine largeur
- La taille du fichier ou la vitesse de chargement est un enjeu
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
La limite générale d'image sur Shopify est de 20 Mo par fichier, et les GIF suivent cette même règle. En pratique, la limite est bien plus basse - tout ce qui dépasse 5 Mo nuira visiblement à la vitesse de chargement de la page. Visez moins de 2 Mo pour les GIF des galeries de produits, et moins de 500 Ko pour les petits GIF inline.
C'est presque toujours un problème de format de fichier ou de thème : (1) le fichier a été uploadé comme un GIF à image unique (sans véritable animation), (2) le processeur d'images de Shopify l'a aplati - uploadez-le via la section Fichiers plutôt que par l'éditeur de texte enrichi et utilisez l'URL, ou (3) le lazy-loading de votre thème bloque le GIF.
Oui. Dans la section Médias de l'éditeur de produit, uploadez le GIF, puis dans la section Variantes, cliquez sur une variante et assignez-lui le GIF comme média. Le GIF s'affichera quand les clients sélectionneront cette variante.
Indirectement - les gros GIF non optimisés ralentissent la page et dégradent les Core Web Vitals, ce qui impacte le classement. Les GIF compressés et bien dimensionnés ont un impact SEO négligeable. Un GIF de 10 Mo dans votre hero est un tueur de score Lighthouse ; un GIF inline de 200 Ko ne pose aucun problème.
La vidéo. Une démo produit de 5 secondes en MP4 est généralement 80 à 90 % plus légère que le même contenu en GIF, l'image est plus nette et Shopify la prend en charge nativement dans les galeries de produits. Réservez les GIF aux animations courtes et simples ou aux 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 (ex : dans une section de fonctionnalités sur mesure), décrivez simplement ce que vous voulez à Fudge et il générera la section avec les attributs autoplay + muted + loop.
