En tant que développeurs Web et ingénieurs logiciels, nous voulons offrir aux gens ce qu'ils veulent. Si vous êtes familier avec NextJS , vous devriez être familiarisé avec la fonctionnalité d'optimisation d'image impressionnante incluse dans la version 10 récemment publiée. NextJS est un framework qui peut être utilisé à la fois dans le backend et le frontend des applications React. Il est capable d'effectuer un large éventail de manipulations, y compris la conversion d'images au format WebP convivial, le téléchargement d'images selon les besoins de l'utilisateur, etc.
Si vous travaillez déjà avec NextJS, cela est très utile. Mais que se passe-t-il si vous voulez la fonctionnalité d'optimisation, le style en ligne et la simplicité d'un composant React sans les obstacles associés au nouveau cadre?
— , . , , ( !) .
, BetterImage
BetterImage est un outil open source qui imite de nombreuses fonctionnalités d'optimisation de manière simple et pratique au format React. Il convertit l'image en WebP optimisé 30% plus petit que JPEG sans sacrifier la qualité. Cela améliore l'affichage, ainsi que le référencement, l'accessibilité sur Google Lighthouse par rapport à la balise standard. Le composant rationalise également le formatage CSS, y compris les manipulations les plus populaires prêtes à l'emploi. Le composant prend des propriétés, résume les manipulations et les importations, ce qui permet de se concentrer davantage sur l'application. BetterImage est compatible avec les composants fonctionnels et basés sur les classes, vous pouvez donc l'inclure dans votre application, quel que soit l'arôme avec lequel vous servez votre React. Activation de l'image de sauvegarde,ainsi que les dimensions de hauteur et de largeur, CSS empêche l'application de la métrique de décalage de mise en page globale lors de l'évaluation d'un site dans Google Lighthouse.
Résultats Google Lighthouse pour la balise standard (à gauche) et les résultats BetterImage (à droite).
Le composant est toujours en version bêta, de nouvelles fonctionnalités et des packages NPM en développement. Si vous souhaitez essayer le boîtier de composants ou avez des questions, veuillez visiter Github et le site Web !
Qu'y a-t-il sous le capot de BetterImage?
Les tests Lighthouse montrent que le composant peut améliorer les performances de chargement des images. D'autres frameworks comme Next.JS donnent d'excellentes optimisations. Notre équipe souhaite adopter cela dans React afin que d'autres frameworks ne soient pas nécessaires. Nous avons créé BetterImage afin que les développeurs puissent écrire des styles directement dans le code React sous forme de chaîne. Le style est facultatif et ne peut pas être utilisé du tout.
BetterImage Component
Qu'y a-t-il sous le capot? Les propriétés sont transmises au composant, qui extrait ensuite les informations pour manipuler l'image. Il n'est pas nécessaire d'importer l'image elle-même dans le composant React, seul le chemin relatif est nécessaire et BetterImage importera dynamiquement l'image convertie. BetterImage convertit le fichier source en WebP à l'aide d'un appel d'API de package NPM externe et stocke l'image convertie dans un dossier local. Cela aidera à rendre l'image encore plus rapide après la première manipulation. Toutes les autres fonctionnalités - toujours flexibles - sont appliquées selon les besoins. Pour un aperçu du composant actuellement en version bêta, bienvenue sur Github et sur le site Web !
Merci d'avoir lu cette petite critique!
