Si vous souhaitez égayer votre site WordPress avec de petites images animées, il existe un moyen très simple de le faire : utiliser des lotties. Ils permettent de mettre en valeur certaines parties de votre site web pour attirer l’attention des visiteurs sur quelque-chose de bien précis.
Mais de quelle manière pouvez-vous rendre votre site web plus excitant à l’aide de ces animations dont certains webmaster raffolent ? Je vous dis tout dans ce petit guide.
Entrons dès maintenant dans le vif du sujet !
Un lottie, c’est quoi ?
Un lottie est une animation composée entièrement de code. Pour être un peu plus précis sur sa définition, il s’agit d’une description numérique de toutes les formes, couleurs et mouvements d’une animation.
Il faut savoir que ce type de support numérique est petit. De manière générale, un fichier lottie :
- Maintient les images d’une animation avec une résolution de haute qualité
- Mélange les éléments vectoriels et matriciels des images qui composent l’animation et leur applique des transformations au moment de leur exécution.
Les animations conçues au moyen des lotties sont un excellent choix si vous souhaitez des images interactives : par exemple qui s’animent au survol de la souris.
Elles permettent de mettre en avant des produits ou des services qui engagent et divertissent les gens. Un excellent moyen pour les mettre en avant sur votre site !
Il faut reconnaitre que dans le passé, côté animation sur un site web (WordPress ou pas), il n’y avait pas de nombreuses options. Nous nous souvenons tous de ces fameuses images animées au format GIF avec un rendu de définition très médiocre.
Bien qu’elles soient revenues à la mode sur certains sites web, elles ne permettent d’égaler la qualité et la fluidité de l’animation d’un lottie.
Comparaison entre une animation GIF et Lottie. Je vous laisse deviner laquelle des deux images ci-dessous affiche un meilleur rendu au niveau de sa résolution et de sa fluidité !
Lottie vs GIF
Pourquoi on l’appelle « lottie » ?
Lottie doit son nom à Charlotte “Lotte” Reiniger, réalisatrice allemande et pionnière de l’animation de silhouettes. Ce sont tout simplement les ingénieurs Brandon Withrow, Gabriel Peal et Leland Richardson d’Airbnb ainsi que l’animateur principal Salih Abdul-Karim de la même compagnie qui ont décidé de donner ce nom à ce type de fichiers d’animation.
Les participants à ce projet ont réussi un véritable travail collaboratif (design/developpement) et ont rendu possible l’animation d’objets visuels beaucoup plus fluide qu’auparavant.
Poids/taille d’un lottie VS fichier GIF ou PNG
Allez, commençons par un petit exemple comparatif pour que vous puissiez mieux vous rendre compte de la taille d’un lottie. Sachez qu’à ce propos, ce n’est pas moi qui ai inventé cet exemple. Mais je trouve très intéressant de le reprendre, car il explique simplement et précisément la différence avec d’autres types de fichiers concurrents.
Considérons par exemple qu’un fichier image PNG ai la taille d’un T-Rex. Maintenant, qu’un fichier de type GIF ai la taille d’un éléphant. Alors un fichier lottie aurait une taille encore plus petite : celle d’un chiot !
Comment ça marche ?
Comme le souligne le site officiel LottieFiles.com*, Lottie est un format de fichier d’animation basé sur JSON (JavaScript Objet Notation). Ce dernier permet aux créateurs qui travaillent avec ce format d’exporter une animation créée sur les plateformes ci-dessous.
Librairies Lottie compatibles : systèmes d’exploitation, appareils et plateformes.
| Android | Angular |
| Appcelerator | Flutter |
| iOS, macOS, iPadOS | jLottie Player |
| Lottie Colorify | Lottie Interactive |
| Lottie Toggles | LottieFiles for Interactivity |
| NativeScript | Python Module |
| Qt | React Native |
| ReactJS | rLottie |
| Skia | Svelte |
| Vue | Web Player |
| Windows | Xamarin |
Ces petits fichiers animés offrent donc la possibilité d’être utilisés aussi bien sur les sites Internet que les smartphones (applications mobiles inclues web) et peuvent être mis à l’échelle ou réduits sans pixellisation.
* lien source au bas de cet article
Pourquoi les utiliser ?
L’intérêt principal d’utiliser des Lotties sur les site web, applications mobiles, montres connectés, jeux vidéos, ebooks et autres supports numériques, c’est qu’ils sont très légers et permettent un affichage sans perte de qualité (quel que soit le support).
À grande échelle, cela induit une réduction plus que significative au niveau du poids des éléments graphiques comparé à d’autres formats plus lourds tels que les formats GIF ou MP4.
Où en trouver (gratuits et payants) ?
Vous pouvez principalement télécharger des Lotties sur le site officiel. Vous en trouverez aussi bien des gratuits que des payants via la marketplace du site.
Aussi, sur ce même site, il vous est possible de vendre vos propres créations. À l’inverse, si vous avez besoin d’une création sur mesure, vous pouvez également engager un concepteur ou une conceptrice de Lottie pour réaliser votre propre animation visuelle. Le site regroupe en effet une large communauté de professionnels qui offrent directement leurs services créatifs.
J’envisage d’ailleurs moi-même de faire appel à l’un de ces créateurs de Lottie pour animer le logo carré de Domicile et Travail.
Comment faire un lottie ?
Vous pouvez créer des animations Lotties avec plusieurs outils/logiciels dont le plus connu : Adobe After Effects. Pour exporter le Lottie que vous venez de créer via After Effects, il vous faut intégrer le plugin Bodymovin disponible sur Adobe Exchange.
Pour importer un fichier lottie sur Adobe After Effects et l’exporter aussi, vous pouvez utiliser le plugin officiel de LottieFiles. Celui-ci vous permet en effet d’importer directement les animations vectorielles conçues sous le format lottie.
En plus du logiciel Adobe After Effects, il existe à l’heure actuelle 8 autres méthodes pour créer, modifier et exporter les lotties.
Outils et logiciels de création
| Adobe Animate | Cavalry |
| Flow | Haiku Animator |
| Inkscape | Keyshape |
| Sketch | Synfig Studio |
Il faut savoir que même si vous n’avez pas les compétences d’un web designer pour créer une animation réussie, lottie vous permet quand même de créer vos propres animations.
Toutefois, il faut reconnaitre qu’il vous faudra un minimum de connaissances en graphisme (voire design) pour créer un lottie digne de ce nom.
Apprendre à faire un lottie : formation
Lors de mes recherches effectuées dans le cadre de cet article, j’ai trouvé un site web très intéressant : Webflow University. Ce site vous apprend à créer une animation qui se déclenche lorsque quelqu’un charge une page web, clique, survole ou fait défiler cette même page.
Tant et si bien que cette formation vous permet de créer vous aussi de très beaux lotties !
Les différentes façons d’intégrer des lotties sur votre site WordPress
Voici comment insérer directement ou indirectement ces visuels animés sur votre site WordPress.
Directement
- Au moyen d’un simple code HTML intégrant du script : le code est toujours présent et copiable à côté du lottie choisi.
- À l’aide d’une iFrame : même chose que pour le code HTML, il suffit de copier/coller le code et de l’intégrer dans le code source de la page web à l’endroit choisi.
Indirectement en utilisant les plugins WordPress
- Lottie Player – Gutenberg Block : c’est celui qui s’utilise le plus facilement et dont je me sers pour vous présenter les jolis lotties ci-dessous. C’est aussi le plus compatible : quel que soit le thème que vous utilisez.
- Widget d’Elementor : il est disponible dans la version Pro d’Elementor : un constructeur de pages (page builder) pour WordPress. Il existe aussi des add-ons gratuits spécialement conçus pour Elementor : ces derniers permettent d’intégrer des lotties.
- Brizy : un autre plugin de constructeur de pages qui permet également d’ajouter une animation Lottie (version Pro requise).
Une sélection des lotties les plus jolis et les plus réussis
Pour terminer ce petit guide, je tenais à vous présenter des lotties très réussis. Voici donc quelques exemples d’animations créées grâce à ce formidable format de fichier.
Commencez par passer votre curseur sur la petite boule ci-dessous.
Sources
- Site officiel : lottieFiles.com
- Adobe Exchange : Plugin Bodymovin
- Webflow University : Apprendre à créer des lotties
Autres sujets sur WordPress :
- Blog WordPress non indexé par google : les vraies raisons (avec Checklist !)
- Ces 2 plugins WordPress sont indispensables. Pas les autres !
- Comment égayer votre site WordPress avec les lotties ? Voici la réponse détaillée !
- Link Whisper, LE meilleur plugin WordPress pour vos liens
- ManageWP : gérez vos sites WordPress simplement & efficacement
- Pourquoi choisir le thème Trellis pour son blog WordPress ?
- Quelle est la dernière version de WordPress en français ? (Répondu)
- Trouvé ! Hébergement de blog rapide & pas cher : Cloudways est LA solution
