Optimisation du téléchargement d'images avec recadrage et compression dans les projets Next.js

En tant que développeur frontend, il y a de fortes chances que vous ayez travaillé ou travailliez actuellement sur un projet qui implique la publication et l'affichage d'images. Si ce n’est pas le cas, eh bien, vous le ferez bientôt. Ainsi, récemment, après avoir fini de travailler sur notre projet, nous nous sommes retrouvés face à un problème au moment d'afficher les images fournies par les utilisateurs.

Comment tout s'est déroulé
Le plus gros problème était de savoir comment gérer les dimensions, plus encore la hauteur par rapport à la largeur des images. Ajuster l'image à l'objet : la couverture semblait être la solution parfaite pour remplir le conteneur d'images. Mais cela a introduit d’autres problèmes. Les utilisateurs téléchargeaient des images de différentes dimensions ; certains étaient mis à l'échelle et d'autres recadraient dans le même conteneur. Le résultat de ces incohérences était une interface utilisateur peu attrayante, en particulier lorsque les photos de profil des utilisateurs étaient recadrées de manière à être moins visibles.

La solution
J'ai décidé de trouver une meilleure solution. En émulant la façon dont les plateformes de médias sociaux gèrent le téléchargement d'images, j'ai pensé qu'il serait bon de donner aux utilisateurs la possibilité de recadrer et de prévisualiser les images avant de les télécharger. Un peu de recherche, et j'ai finalement trouvé le package React-Image-Crop. Ce package offre aux utilisateurs la possibilité de recadrer leurs images en temps réel, résolvant ainsi une partie du problème.

Lors du test de la fonctionnalité de recadrage, j'ai remarqué que la taille de l'image avec laquelle je travaillais était de 9,5 Mo. C'est à ce moment-là que j'ai pensé : pourquoi ne pas compresser l'image côté client avant de la télécharger ? Même si le backend gère cela également, la possibilité d'optimiser l'image une étape plus tôt permet d'économiser de la bande passante et d'améliorer les temps de téléchargement.

Cela m'a amené à un autre package pratique : browser-image-compression. La fusion de cela avec React-image-crop m'a permis maintenant de recadrer et de compresser des images à la volée, et avec beaucoup d'effet.

Compromis
Cette solution n’est pas sans quelques compromis. Tout d'abord, vous devrez ajouter deux packages supplémentaires à votre projet ; De plus, les images de moins de 30 Ko finiront par être plus grandes en raison de la surcharge de compression.

Je l'ai également stylisé à l'aide des composants Shadcn UI et du package React-dropzone afin de permettre aux utilisateurs de cliquer pour sélectionner ou glisser-déposer leurs images.

Utilisation du composant d'image Next.js
Pour des performances encore meilleures, cette solution peut être combinée avec le composant Next.js Image, qui optimise automatiquement les images. Le composant Next.js Image permet de fournir des images de taille appropriée, améliorant ainsi les temps de chargement et les performances globales. En intégrant le recadrage et la compression à la puissance de l'optimisation d'image Next.js, vous pouvez offrir aux utilisateurs une expérience plus fluide et plus efficace.

Démo et code source
Vous pouvez également essayer une démo en direct ici

Voici également le référentiel GitHub du code source. Veuillez marquer si vous le trouvez utile ! Faites-moi savoir si vous envisagez d'utiliser cette solution dans votre projet.

Ce qui précède est le contenu détaillé de. pour plus d'informations, suivez d'autres articles connexes sur le site Web de PHP en chinois!