Utilisation de .gifs animés

Attirez l’attention des visiteurs grâce à des animations en boucle qui se déclenchent automatiquement.

Dernière mise à jour le 10 juillet 2024

Un .gif (Graphics Interchange Format) est un type d'image qui prend en charge de courtes animations. Les .gifs animés sont lus automatiquement, n'incluent pas le son et sont généralement lus en boucle.

Vous pouvez chercher sur Google Images et des sites comme giphy.com pour trouver des images .gif, ou créer les vôtres avec des logiciels tiers. Lorsque vous avez un fichier .gif, vous pouvez le télécharger n'importe où sur votre site qui prend en charge les images.

Voici un exemple de .gif animé :

gif-exemple.gif

Ajout d'un fichier .gif

Vous pouvez télécharger un fichier .gif à n'importe quel endroit sur votre site où vous pouvez ajouter des images, y compris les :

Le .gif aura les mêmes options qu'une image statique. Par exemple, si les images de bannière de votre site prennent en charge le texte superposé, le texte peut s'afficher sur une bannière .gif.

Remarque

si vous modifiez un fichier .gif avec l’éditeur d’image intégré, ou ajoutez des effets d’image, il convertira le fichier .gif en fichier .jpg statique.

Bonnes pratiques

Optez pour des fichiers de petite taille

Les fichiers .gif volumineux peuvent ralentir votre site. Nous vous recommandons de formater les fichiers .gif animés à la taille que vous souhaitez qu’ils s’affichent sur votre site. Suivez nos bonnes pratiques relatives aux images pour vous assurer que vos fichiers .gif respectent nos indications en matière de taille de fichier.

Même si la taille de votre fichier .gif est inférieure à notre limite de taille de fichier, le nombre d'images individuelles peut l'empêcher de se charger. Vous pouvez essayer de compresser votre fichier à l'aide d'outils d'image tiers. Cela ne relève pas du cadre de la prise en charge de Squarespace. Si la qualité est médiocre après compression de votre .gif, transformez votre .gif en vidéo et ajoutez la vidéo à votre site.

Éviter les images distrayantes

Si les .gifs peuvent être un excellent moyen d'attirer l'attention ou d'ajouter un mouvement dynamique, leur mouvement peut également être distrayant. Évitez de les utiliser :

  • Aux endroits où vous voulez que les visiteurs se concentrent vraiment sur votre texte ou tout autre contenu.
  • Plusieurs fois dans une seule zone, car la quantité de mouvement pourrait être incongrue.

Astuce

pour obtenir davantage d’informations sur la façon de rendre vos fichiers .gifs plus d’accessibles, consultez l’article Améliorer l’accessibilité des images, de l’audio et des vidéos.

Vérifiez les paramètres de compression pour éviter les déformations ou les couleurs étranges

Si votre fichier .gif semble déformé, en particulier dans les zones avec un dégradé de couleurs ou des ombres, cela est probablement dû à un problème de compression. Un fichier .gif ne peut contenir que 256 couleurs par image. Les outils de retouche d'image utilisent donc un processus appelé tramage pour réduire le nombre de couleurs lors de la création d'un fichier .gif.

Le réglage de la qualité d'une image n'entre pas dans le cadre de l'assistance de Squarespace. Essayez d'ajuster les paramètres de compression ou de tramage de votre outil de retouche d'image, en utilisant une source de meilleure qualité pour le .gif ou en consultant la documentation d'aide de l'outil que vous utilisez.

Création de boutons animés

Les URLs de destination transforment les images en liens vers d'autres pages de votre site, des pages externes ou des fichiers. Ces liens sont disponibles dans les blocs Image, les blocs Galerie et certaines pages de la galerie.

Astuce

Des logos avec une URL de destination intégrée qui renvoient à votre page d'accueil.

Voici une méthode pour créer un bouton animé :

  1. Ajoutez un bloc Image poster à une zone prenant en charge les blocs comme disposition de page.
  2. Téléchargez votre fichier .gif dans l'onglet Contenu.
  3. Dans l'onglet Création, ajoutez votre lien dans le champ URL de destination. Si vous créez un lien vers une page de votre site, créez un lien du Contenu.
  4. Utilisez le titre ou le sous-titre du bloc Image poster pour ajouter du texte.
  5. Modifiez le bloc Image et ajoutez d'autres blocs pour le redimensionner.
gif-exemple4.gif

Utilisation d'une URL vidéo au lieu d'un .gif

Vous pouvez créer un effet similaire à un .gif animé en ajoutant un arrière-plan vidéo à une section de page, une bannière ou une page de couverture.

  • Comme les fichiers .gif, les arrière-plans vidéo sont lus automatiquement, en boucle et sans son.
  • Au lieu d’utiliser un fichier .gif, vous allez créer un lien vers une URL vidéo, comme une vidéo YouTube par exemple.
  • Les bannières vidéo ne sont prises en charge que dans certains templates de la version 7.0, mais les arrière-plans vidéo des sections de page sont pris en charge sur tous les sites de la version 7.1 et les arrière-plans vidéo des pages de couverture sont pris en charge dans tous les templates de la version 7.0.

Pour en savoir plus, rendez-vous sur Ajouter une vidéo d'arrière-plan.

Footer Image
  • Obtenir de l’aide de notre communauté

  • Obtenez de l’aide sur les personnalisations avancées auprès de notre communauté.

  • Trouver un Squarespace Expert

  • Démarquez-vous en ligne avec l’aide d’un designer ou d’un développeur expérimenté.