L’optimisation des images est un aspect fondamental pour garantir un site web rapide, efficace, et agréable à utiliser. Next.js, avec son composant Image, facilite cette tâche tout en offrant des fonctionnalités robustes pour gérer le chargement et la mise en cache des images. Dans cet article, nous allons découvrir comment exploiter ce composant pour optimiser au maximum l’affichage des images sur votre site Next.js.
1. Introduction à l’Optimisation des Images
Dans un monde où la vitesse de chargement impacte directement l’expérience utilisateur, l’optimisation des images est cruciale. Effectivement, les images représentent souvent la majeure partie des ressources d’une page. C’est ici que le composant Image de Next.js entre en jeu. Ce composant vous permet d’ajuster des paramètres comme la taille, la qualité, et le chargement différé pour chaque image. Mais alors, comment exploiter ces fonctionnalités pour obtenir des performances maximales ? Découvrons-le.
2. Configuration de Base du Composant Image
Avant de plonger dans les détails, configurons une image de base avec le composant Image de Next.js. Voici un exemple de code qui charge une image depuis un dossier local avec plusieurs paramètres activés.
"use client"
import Image from "next/image"
import MyImage from "@/public/image.jpg"export default function Home() {
const imgUrl = "https://images.unsplash.com/photo-1718556256225-82afc1b30580?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
return (
<>
<Image
src={MyImage}
width={500}
height={500}
alt="Picture of the author"
sizes="(max-width: 768px) 100vw, 33vw"
quality={80}
priority={true}
placeholder="blur"
onLoadingComplete={() => console.log('Image loaded')}
onLoad={() => console.log('Image loading started')}
onError={() => console.log('Image loading failed')}
loading="eager"
/>
</>
);
}
Dans cet exemple, nous voyons déjà plusieurs optimisations en action. Tout d’abord, l’attribut priority est défini sur true, ce qui indique que cette image est importante et doit être chargée immédiatement. Le paramètre quality est défini à 80, ce qui offre un compromis idéal entre qualité visuelle et taille de fichier. Enfin, placeholder="blur" applique un effet de flou temporaire, améliorant l’expérience utilisateur pendant le chargement.
3. Gestion des Paramètres pour l’Optimisation
Ensuite, explorons les options supplémentaires pour peaufiner encore davantage le chargement des images. Vous pouvez ainsi configurer sizes, fill, et même des événements pour contrôler les images comme souhaité.
- Le paramètre
sizespermet de spécifier des conditions pour les media queries. Par exemple,(max-width: 768px) 100vw, 33vwajuste la taille de l’image en fonction de la largeur de l’écran. - La qualité (
quality) est définie entre 1 et 100, avec une valeur élevée améliorant la qualité au détriment du temps de chargement. Pour la plupart des sites, une qualité de 80 offre un bon compromis. - Chargement avec
loading="lazy"peut différer le chargement des images hors écran jusqu’à ce qu’elles soient visibles, réduisant ainsi le temps de chargement initial de la page. Cependant, pour les images importantes au-dessus de la ligne de flottaison, il est recommandé d’utiliserloading="eager".
L’ajout de ces options s’inscrit dans une démarche d’optimisation intelligente. Ainsi, les images sont ajustées en fonction du contexte d’affichage, réduisant la consommation de bande passante et les temps de chargement.
4. Mise en Cache et Optimisation Avancée
Outre les paramètres de base, Next.js propose une configuration avancée dans next.config.js. Cela permet notamment de gérer les tailles de dispositif (deviceSizes), les tailles d’image (imageSizes), et les formats d’image supportés (formats). Voici un exemple de configuration pour optimiser la mise en cache :
/** @type {import('next').NextConfig} */
const nextConfig = {
images: {
remotePatterns: [
{
protocol: "https",
hostname: 'images.unsplash.com',
pathname: "**"
},
],
deviceSizes: [320, 420, 768, 1024, 1200],
imageSizes: [16, 32, 48, 64, 96],
formats: ['image/avif', 'image/webp'],
minimumCacheTTL: 60,
disableStaticImages: false,
dangerouslyAllowSVG: false,
}
};export default nextConfig;
En spécifiant deviceSizes et imageSizes, Next.js crée des versions de chaque image adaptées aux dimensions de l’appareil utilisé. Les formats image/avif et image/webp sont très efficaces en termes de compression, ce qui réduit encore la taille des fichiers image tout en maintenant une excellente qualité.
Par ailleurs, l’attribut minimumCacheTTL spécifie la durée pendant laquelle une image est stockée en cache avant de vérifier sa mise à jour. Ce cache réduit considérablement la charge du serveur et optimise les temps de chargement.
5. Exemple Complet de Code pour le Composant Image
Réunissons ces éléments pour créer un exemple complet d’une configuration de composants Image exploitant tous les paramètres que nous avons abordés. Voici comment le code pourrait apparaître :
"use client"
import Image from "next/image"
import MyImage from "@/public/image.jpg"export default function Home() {
const imgUrl = "https://images.unsplash.com/photo-1718556256225-82afc1b30580?q=80&w=1770&auto=format&fit=crop&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D"
return (
<>
<Image
src={MyImage}
width={500}
height={500}
alt="Picture of the author"
sizes="(max-width: 768px) 100vw, 33vw"
quality={80}
priority={true}
placeholder="blur"
onLoadingComplete={() => console.log('Image loaded')}
onLoad={() => console.log('Image loading started')}
onError={() => console.log('Image loading failed')}
loading="eager"
/>
</>
);
}
Dans cet exemple final, toutes les options essentielles d’optimisation sont appliquées. La gestion dynamique des tailles d’images et le paramètre de qualité assurent un rendu visuel optimal tout en préservant la bande passante. De plus, l’utilisation de onLoad et onError permet de gérer les événements critiques, offrant ainsi un contrôle supplémentaire sur le processus de chargement.
6. Conclusion
Le composant Image de Next.js est un atout majeur pour optimiser les images dans vos projets. Grâce aux multiples options de configuration, vous pouvez gérer le chargement, le format, et la qualité des images de manière flexible et performante. En suivant ces conseils, vous garantirez une expérience utilisateur fluide tout en réduisant la consommation de ressources. En somme, intégrer une optimisation intelligente des images améliore à la fois les performances et le référencement de votre site. Si vous souhaitez aller plus loin et approfondir vos compétences avec Next JS, découvrez ma formations sur Next.js conçues pour vous faire progresser de manière structurée et efficace !
Bonjour certaines sections sont en cours d'écriture bien à vous Jonathan
Hello Gregory, Merci pour ton retour et ton soutien, Pour répondre à t'as question, non tu peut utiliser Yup sans…
Excellent Article mais est-on "obligé" d'utiliser React Hook Form ? Yup est une solution vraiment excellente et la mise en…
formation très complet par rapport au autre qui coûte très cher
comment ameliore la qualite des videos ?