Les images sont une partie importante de tout site Web ou application. Ils contribuent à rendre le contenu plus engageant et visuellement attrayant.
Cependant, si les images ne sont pas correctement optimisées, elles peuvent également ralentir un site ou une application.
Pourquoi optimiser les images ?
Il y a plusieurs raisons pour lesquelles il est important d'optimiser les images.
- Cela peut aider à améliorer le temps de chargement du site ou de l'application.
- Il peut réduire la quantité de données qu'un client doit télécharger, ce qui peut économiser sur les coûts de bande passante.
- Cela peut aider à améliorer les performances globales du site ou de l'application.
Comment optimiser les images dans Next.js
Il existe plusieurs façons d'optimiser les images dans Next.js. L'une consiste à utiliser le composant Image. Ce composant optimise automatiquement les images pour les performances.
Une autre façon d'optimiser les images consiste à utiliser les capacités de traitement d'image intégrées. Next.js peut automatiquement redimensionner, compresser et optimiser les images pour les performances.
Enfin, vous pouvez utiliser une bibliothèque tierce comme react-optimized-image. Cette bibliothèque fournit une variété de capacités d'optimisation d'image.
Utilisation du composant Image
Le composant Image est le moyen le plus simple d'optimiser les images dans Next.js. Pour l'utiliser, il suffit d'importer le composant depuis le suivant/image emballer.
Une fois que vous avez importé le composant, vous pouvez l'utiliser comme n'importe quel autre dans React. Le composant Image a quelques accessoires que vous pouvez utiliser pour contrôler la façon dont il rend les images.
importer Image depuis 'suivant/image'exporterdéfautfonctionMon image() {
retour (
<Image
source="/my-image.jpg"
largeur="200"
hauteur="200"
qualité="100"
alt="Mon image"
/>
)
}
Dans cet exemple, le composant Image restitue une image d'une largeur de 200 pixels et d'une hauteur de 200 pixels. Vous pouvez également utiliser CSS ou un framework comme Tailwind pour styliser votre application et vos images.
Certains des accessoires requis pour le composant Image sont width, height, src et alt. La propriété src est l'URL de l'image que vous souhaitez utiliser. Utilisez les accessoires largeur et hauteur pour définir la largeur et la hauteur de l'image, en pixels. L'accessoire alt est le texte alternatif de l'image.
Certains accessoires facultatifs pour le composant Image sont la mise en page, le chargeur, l'espace réservé et la priorité. Le prop de mise en page spécifie la mise en page de l'image. Vous pouvez utiliser le prop loader pour spécifier un chargeur d'image personnalisé. Le prop d'espace réservé spécifie un espace réservé d'image personnalisé. La prop priority spécifie la priorité de l'image.
Certains des avantages de l'utilisation du composant Image sont :
- Performance améliorée: L'amélioration des performances est l'un des principaux avantages de l'utilisation du composant Image. Le composant optimise automatiquement les images pour les performances.
- Redimensionnement automatique de l'image : Un autre avantage de l'utilisation du composant Image est le redimensionnement automatique de l'image. Le composant peut automatiquement redimensionner les images pour s'adapter aux accessoires de largeur et de hauteur.
- Compression automatique des images : Le composant Image peut également compresser automatiquement les images pour réduire la taille du fichier.
- Prise en charge du chargement paresseux: Le composant Image prend également en charge le chargement différé. Cela signifie qu'il ne chargera les images que lorsqu'elles seront visibles à l'écran.
Utilisation d'une bibliothèque tierce
Si vous avez besoin de plus de contrôle sur l'optimisation des images, vous pouvez utiliser une bibliothèque tierce comme réagir-optimisé-image. Cette bibliothèque fournit une variété de capacités d'optimisation d'image.
Certaines des fonctionnalités de react-optimized-image incluent :
- Optimisez les images sur le client et le serveur : react-optimized-image peut optimiser les images sur le client et le serveur. Cela signifie que les images sont optimisées pour les performances ainsi que la taille du fichier.
- Redimensionnement automatique de l'image : react-optimized-image peut automatiquement redimensionner les images pour s'adapter aux accessoires de largeur et de hauteur.
- Compression automatique des images : react-optimized-image peut également compresser automatiquement les images pour réduire la taille du fichier.
- Prise en charge du chargement paresseux : react-optimized-image prend également en charge le chargement paresseux. Cela signifie qu'il ne chargera les images que lorsqu'elles seront visibles à l'écran.
- Prise en charge de plusieurs formats d'image : react-optimized-image prend en charge plusieurs formats d'image, notamment JPEG, PNG et WebP.
Pour utiliser react-optimized-image, installez simplement la bibliothèque avec npm.
Une fois que vous avez installé la bibliothèque, vous pouvez l'importer dans votre projet.
importer image depuis 'react-optimized-image'exporterdéfautfonctionNextImg() {
retour (
<image
source="/my-image.jpg"
tailles={[400, 800]}
alt="Mon image"
/>
)
}
Vous pouvez également utiliser des fichiers SVG avec react-optimized-image.
importer {Svg} depuis 'react-optimized-image'exporterdéfautfonctionNextImg() {
retour (
<SVG
source="/my-image.svg"
NomClasse=“rempli-rouge”
/>
)
}
Cet exemple utilise la propriété className pour spécifier un nom de classe pour le SVG. Vous pouvez utiliser ce nom de classe pour styliser le SVG avec CSS ou interagir avec lui en utilisant JavaScript.
react-optimized-image offre également quelques autres avantages par rapport aux capacités d'optimisation d'image intégrées.
L'un des avantages de l'utilisation d'un package par rapport aux fonctionnalités intégrées est qu'il peut générer automatiquement différentes tailles d'images. Cela signifie que vous n'avez pas à créer différentes versions de la même image.
Un autre avantage est qu'il peut automatiquement servir la taille d'image appropriée pour l'appareil de l'utilisateur. Cela signifie que les appareils dotés d'écrans haute résolution obtiendront une image haute résolution et que les appareils dotés d'écrans basse résolution obtiendront une image basse résolution.
Enfin, react-optimized-image est une image complètement projet open source. Cela signifie que vous pouvez contribuer à la bibliothèque si vous avez besoin d'une fonctionnalité spécifique ou d'une correction de bogue.
Quelle méthode devriez-vous utiliser ?
Alors, quelle méthode devriez-vous utiliser pour optimiser les images dans Next.js ?
Si vous avez besoin d'une optimisation d'image de base, vous pouvez utiliser les capacités de traitement d'image intégrées. C'est le moyen le plus simple de démarrer avec l'optimisation d'image.
Si vous avez besoin de plus de contrôle sur l'optimisation de l'image, vous pouvez utiliser une bibliothèque tierce comme react-optimized-image. Cette bibliothèque fournit des capacités d'optimisation d'image plus avancées.
Si vous avez besoin des meilleures performances absolues, vous pouvez utiliser une combinaison des capacités de traitement d'image intégrées et d'une bibliothèque tierce. Cela vous donnera le meilleur des deux mondes. Cependant, cette approche n'est pas recommandée pour les débutants car elle nécessite plus de configuration.
Améliorez le référencement avec des images optimisées
En optimisant les images de votre site Web ou de votre application, vous pouvez améliorer votre référencement. L'algorithme de Google tient compte de la vitesse de chargement des sites Web et des applications. Si votre site Web ou votre application se charge lentement, cela aura un impact négatif sur votre référencement.
Avec des images optimisées, vous pouvez améliorer le temps de chargement de votre site Web ou de votre application, ce qui peut améliorer votre référencement. Après cela, vous pouvez également ajouter un protocole de graphe ouvert pour des performances encore meilleures.