Allégez les fichiers de vos projets Figma grâce au plugin “Downsize”
Au fur et à mesure que le web s’accélère, les connexions internet augmentent et l’impatience des internautes s’accentue. De plus, l’optimisation croissante de la qualité des images à travers les écrans Retina de haute résolution et les écrans d’appareils mobiles Full HD, Quad HD, Ultra HD, etc, met la barre haute quant à la qualité attendue.
Dans ce contexte, il devient important de compresser les fichiers et les images de poids lourds pour garantir une meilleure performance de votre site au niveau du temps de chargement et du référencement naturel. Cela, tout en préservant la bonne qualité du fichier traité.
Découvrez dans cet article comment vous pouvez alléger les fichiers de vos projets Figma avec le plugin “Downsize”.
Pourquoi utiliser le plugin “Downsize” ?
Le problème permanent des fichiers volumineux, particulièrement les images, reste toujours le frein le plus important qui nuit à la performance du site. Pour cette raison, vous avez tout intérêt à opter pour les techniques et les outils de compression, dans le but d’optimiser les performances de votre site.
Selon l’étude menée par HTTP Archive, entre 2017 et 2022, les images représentent 13.7 % du volume des données externes demandées par une page web sur un desktop et 8.4 % sur un appareil mobile. Il s’avère alors essentiel d’accorder une attention particulière à l’optimisation de la taille des images, outre les autres fichiers, dans l’objectif de booster l’interactivité de votre site et d’augmenter son temps de réponse.
Il est évident que Figma représente un excellent outil pour la conception graphique, mais aussi, il constitue un moyen efficace pour gérer la taille des fichiers, notamment à travers son plugin “Downsize”.
Downsize est un plugin gratuit et open source de Figma. Il représente une solution pertinente pour compresser et convertir vos fichiers sans quitter votre espace de travail. Il permet de réduire la taille des fichiers de manière importante, sans perte de qualité, à travers une interface utilisateur simple et intuitive.
Cet outil est très utile pour les graphistes et les webdesigners qui doivent souvent travailler avec des fichiers de grande taille. Ce plugin renferme plusieurs fonctionnalités intéressantes permettant de simplifier la gestion des fichiers. Notamment ce plugin permet de :
- Compresser automatiquement les images au format JPEG, PNG et GIF pour réduire leur taille sans perte de qualité.
- Supprimer les fichiers inutiles (doublons, fichiers temporaires…) pour libérer de l’espace disque.
- Optimiser la taille des images et des illustrations destinées pour le web, ce qui est particulièrement utile si vous avez un site vitrine ou une boutique en ligne par exemple.
- Redimensionner plusieurs calques en une seule fois, en fonction de leur contenu, ce qui est parfaitement intéressant lorsque vous travaillez avec des images ou des illustrations.
- Convertir facilement les polices en empattements ou en gras, ce qui est très pratique si vous voulez mettre en forme votre texte rapidement.
- Créer et éditer des modèles de calques. Vous pouvez par exemple ajouter des bordures aux calques, générer des sprites à partir d’images, etc.
- Optimiser la taille des fichiers SVG et particulièrement les images vectorielles de grande taille et qui ralentissent le chargement des pages web.
Le plugin Downsize est très utile pour les designers qui travaillent sur des interfaces graphiques sensibles aux dimensions, comme les applications mobiles ou les sites web responsives. Il permet de garantir que tous les éléments seront affichés à la bonne taille sur tous les écrans.
Améliorez la performance de votre site avec le plugin “Downsize”
La compression d’images avec le plugin “Downsize” de Figma apporte des avantages considérables, comme :
- La réduction de la taille des fichiers volumineux, qui se manifeste dans la diminution du nombre d’octets correspondants au nombre de couleurs constituant l’image, cela, sans perdre en qualité.
- Un niveau de compression étendu allant de 1 à 100 %. Cela offre une plus grande flexibilité aux développeurs pour dupliquer les images selon différentes résolutions. Par contre, il est recommandé de ne pas dépasser un taux de compression de 30 %, pour éviter la perte de qualité.
- Un redimensionnement optimal en fonction de la taille d’origine de l’image et de son contenant. Par exemple, si la taille du contenant est de 200px*200px, la taille de l’image est de 300px*300px et que l’on choisit un multiplicateur de 2x, alors la nouvelle taille de l’image devient 400px*400px, dépassant ainsi la taille de la zone cible (200px*200px), ce qui n’est pas possible. Dans ce cas, le plugin garde la taille initiale de 300px*300px.
- La réduction du temps de chargement de la page. Cela se traduit par la diminution du taux de rebond et par une meilleure satisfaction des utilisateurs. En effet, si le temps de chargement d’un site dépasse généralement 3 secondes, ce dernier risque de perdre ses visiteurs et de subir une baisse dans les conversions.
- Une expérience utilisateur plus intéressante grâce à un parcours utilisateur dépourvu de moments d’attentes ennuyeux, ce qui permet à l’utilisateur d’atteindre son objectif plus rapidement.
- L’optimisation du référencement de site ou de l’application. Étant donné que la vitesse de chargement constitue un facteur de classement éminent, il devient alors très important de réduire la taille des images qui alourdissent le chargement du site, afin de bénéficier d’un meilleur positionnement sur la SERP.
- Un trafic plus important. En effet, la recherche à travers Google Images représente environ 22,6 % de l’ensemble des recherches sur Internet. Cela atteste de l’importance des visuels dans le mode de recherche contemporain. A cet effet, il est profitable d’améliorer la qualité de vos images pour attirer plus de trafic.
- Une visibilité plus considérable. Les images de qualité facilitent l’indexation d’un site par les crawlers de Google, ce qui permet d’affirmer sa qualité aux yeux du moteur de recherche et de développer sa notoriété.
- Un transfert de fichiers plus optimal entre le serveur et le site, ce qui donne en retour une réponse plus rapide et un engagement plus important des utilisateurs.
- Un chargement plus rapide sur les appareils mobiles, qui constituent les supports de connexion à internet les plus sollicités, avec 95 millions de nouveaux mobinautes en 2022. Les terminaux mobiles présentent quelques contraintes techniques au niveau du débit de connexion qui reste inférieur à celui de la fibre optique par exemple. Donc, plus les images sont de poids moins important, plus la vitesse de chargement est rapide.
- Un gain d’espace sur la bande passante qui contribue à améliorer la performance des réseaux et des navigateurs et à réaliser des économies d’énergie.
- Un gain de stockage au niveau du service d’hébergement. Cela offre aux développeurs et aux webmasters plus de liberté pour stocker les images désirées, tout en préservant leur qualité et sans encombrer l’espace alloué.
- Une optimisation automatique du code HTML, CSS et JavaScript pour gagner du temps sur le chargement des pages.
- Un téléchargement plus rapide des images compressées permettant aux appareils de destination : desktop, smartphone, iPhone, etc, d’interpréter ces fichiers plus rapidement et de les afficher de manière plus efficace.
Par ailleurs, la compression représente une condition exigée par certains hébergeurs. Pour cette raison, il convient d’opter pour le plugin “Downsize” pour répondre à cette contrainte.
- Une meilleure flexibilité concernant les formats d’affichage. Dans l’objectif de maintenir la rétention des utilisateurs des ordinateurs de bureau, et d’assurer l’engagement des mobinautes, il est indispensable de créer différentes résolutions d’images, afin de les afficher efficacement sur les écrans cibles (du plus grand au plus petit).
- La possibilité de conversion d’images de PNG à JPEG, si le l’image ne contient pas de fond transparent (ou couche alpha). Cela permet de profiter d’une meilleure qualité avec une taille plus optimisée.
- Une meilleure praticité puisque vous pouvez utiliser “Downsize” pour compresser vos images, sans quitter Figma.
- Une compression intelligente qui n’implique pas d’étapes compliquées pour convertir les images. Notamment, le plugin “Downsize” est capable de repérer automatiquement les éléments à compresser au sein d’une page ou d’une sélection d’éléments.
- Une compression réversible, que vous pouvez annuler à tout moment et l’optimiser à votre guise, si vous n’êtes pas satisfait du résultat.
- Une Compression plus facile et plus rapide de plusieurs images, ce qui rend ce plugin très convoité pour les grands projets Figma.
- L’optimisation du processus de sauvegarde des fichiers.
- La simplicité d’utilisation et la versatilité. Downsize permet de gagner un temps précieux lors de la mise en forme des calques et des textes, tout en offrant de nombreuses options et fonctionnalités attractives à cet effet.
Comment installer et utiliser le plugin Downsize ?
L’utilisation du plugin Downsize est très facile et couvre quelques étapes. Pour compresser un fichier, il suffit de :
- Ouvrir Figma et vous connecter à votre compte.
- Choisir l’option “Plugins…” dans le menu “File”.
- Taper “Downsize” dans la barre de recherche.
- Installer le plugin et le configurer. Vous pouvez vous contenter des paramètres par défaut qui sont généralement suffisants. Cependant, vous pouvez les ajuster en fonction de vos besoins.
- Démarrer le plugin.
- Sélectionner les fichiers que vous envisagez de compresser.
- Identifiez les paramètres de redimensionnement ou de compression en fonction de vos besoins.
- Validez votre configuration en cliquant sur le bouton dédié.
Et le tour est joué. Le plugin “Downsize” travaillera automatiquement en arrière-plan pour compresser les nouvelles images et optimiser le code HTML, CSS et JavaScript du site web. Le plugin redimensionnera l’objet en fonction de la résolution de votre écran. Vous pouvez aussi utiliser le raccourci clavier Alt + D pour activer le plugin.
Voici quelques astuces pour bien utiliser “Downsize” :
- Utilisez les paramètres de redimensionnement automatique pour ajuster la taille de vos calques en fonction de leur contenu.
- Utilisez les modèles de calques pour créer des calques préformatés et ainsi gagner du temps lors de vos projets
Concernant la sécurité d’usage du plugin Downsize, il n’y a pas de problème particulier à signaler. Le plugin est hébergé sur GitHub et les données sont stockées localement sur votre ordinateur et ne sont pas transmises à un tiers.
Sous quel format doit-on exporter une image ?
Le choix du type de fichier dépend de plusieurs facteurs tels que la compatibilité avec le navigateur, la densité des couleurs, le type de compression lossy (avec perte de qualité) ou lossless (sans perte de qualité). Généralement, on distingue les formats qui suivent.
GIF (Graphics Interchange Format)
Les fichiers au format GIF sont très portables et très efficaces pour les créations web, puisque leur taille est limitée à 256 couleurs. Ils se distinguent par des effets d’animations ludiques qui s’obtiennent par l’assemblage de plusieurs images et ils assurent aussi l’avantage de supporter la transparence.
Les fichiers PNG (Portable Network Graphics)
Le format PNG supporte jusqu’à 16 millions de couleurs, ce qui assure une compression optimale, sans occasionner une perte dans la qualité, surtout pour les logos, les textes et les illustrations.
JPEG (Joint Photographic Experts Groups)
La taille des fichiers JPEG peut contenir environ 16,7 millions de couleurs. Ils sont très utilisés pour le web grâce à la possibilité de créer des fichiers de taille plus réduite, éventuellement, avec une perte de qualité négligeable, qui ne peut pas être détectée à l’œil nu. Ces fichiers sont convoités pour la compression d’éléments composés de plusieurs couleurs et contrastes.
Voici en résumé quelques astuces pour optimiser vos fichiers et améliorer votre site internet :
- Utilisez l’outil de compression correspondant à vos besoins.
- Sélectionnez le bon format d’image.
- Redimensionnez vos images avant de les télécharger.
- Utilisez une CDN pour héberger vos images et vos vidéos.
Mot de la fin
“Downsize” est le plugin fantastique qui aide les designers et les développeurs à traiter les images de leurs projets Figma en toute polyvalence. Il est très recommandé pour réaliser de meilleures économies sur l’espace de stockage et sur la vitesse de chargement.
La compression des fichiers consiste à diminuer leur taille afin d’optimiser le transfert de données entre le serveur et le site. Plus leur taille est optimale, plus l’interaction avec le site est fluide et plus l’expérience utilisateur est agréable.
Dans cette optique, “Downsize” permet de redimensionner les images très facilement. Il est particulièrement utile pour les designers qui doivent souvent redimensionner plusieurs images dans le cadre de leurs projets Figma.
Ce plugin est très performant et très simple à utiliser, permettant au designer de gérer pertinemment ses fichiers en moins de temps et avec moins d’effort.