Optimisation des images et des polices dans React
Utilisez next/image ou chargé de façon différée avec les bonnes dimensions, les bons formats (AVIF/WebP) et font-display.
Optimisation des images et des polices dans React est une leçon React Academy gratuite sur CoddyKit. Ceci est la leçon 3 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage React Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours React Academy comprend 4 leçons au total.
Pourquoi les images sont essentielles
Les images sont généralement les ressources les plus volumineuses d’une page. Les images non optimisées dégradent le LCP, ralentissent le chargement des pages et augmentent les coûts de bande passante — en particulier sur mobile.
Composant Image de Next.js
next/image optimise automatiquement les images : chargement différé par défaut, srcSet réactif, formats modernes (WebP/AVIF) et dimensions correctes pour éviter le CLS.
import Image from 'next/image';
<Image
src="/hero.jpg"
alt="Hero image"
width={1200}
height={600}
priority // preload above-the-fold images
sizes="(max-width: 768px) 100vw, 50vw" // responsive sizing
/>Chargement différé avec React classique
Ajoutez loading='lazy' aux éléments natifs <img>. Le navigateur diffère le chargement des images hors écran jusqu’à ce qu’elles s’approchent de la zone d’affichage pendant le défilement.
// Below-the-fold images:
<img src="/product.jpg" alt="Product" loading="lazy" />
// Above-the-fold (hero) — eager to avoid LCP delay:
<img src="/hero.jpg" alt="Hero" loading="eager" fetchPriority="high" />Formats d’image modernes
Servez les images au format WebP ou AVIF plutôt qu’en JPEG/PNG. À qualité égale, AVIF est 50 % plus léger que JPEG. Utilisez un élément <picture> pour négocier le format avec des solutions de repli.
<picture>
<source srcSet="/hero.avif" type="image/avif" />
<source srcSet="/hero.webp" type="image/webp" />
<img src="/hero.jpg" alt="Hero" width="1200" height="600" />
</picture>Images réactives avec srcSet
Fournissez plusieurs tailles afin que le navigateur choisisse la résolution adaptée à l’écran et évitez ainsi de télécharger une image de 2000 px pour un écran mobile de 400 px.
<img
src="/photo-800.jpg"
srcSet="/photo-400.jpg 400w, /photo-800.jpg 800w, /photo-1600.jpg 1600w"
sizes="(max-width: 600px) 400px, (max-width: 1200px) 800px, 1600px"
alt="Photo"
/>Espaces réservés Blurhash et squelette
Affichez un espace réservé flouté pendant le chargement de l’image afin d’éviter les décalages de mise en page et d’améliorer les performances perçues.
// With next/image blur placeholder:
<Image
src="/photo.jpg"
alt="Photo"
width={800}
height={600}
placeholder="blur"
blurDataURL="data:image/jpeg;base64,/9j/4AAQ..." // tiny base64 blur
/>Stratégie de chargement des polices
Les polices bloquent le rendu. Utilisez font-display: swap pour afficher une police de remplacement pendant le chargement de la police personnalisée, ce qui réduit le FOIT (apparition de texte invisible).
/* In global CSS: */
@font-face {
font-family: 'MyFont';
src: url('/fonts/MyFont.woff2') format('woff2');
font-display: swap; /* show fallback, swap to MyFont when ready */
}Optimisation des polices avec Next.js
next/font charge les polices Google lors de la compilation, les héberge localement et applique font-display: optional pour éliminer le CLS lié au remplacement des polices.
import { Inter } from 'next/font/google';
const inter = Inter({
subsets: ['latin'],
display: 'swap',
variable: '--font-inter',
});
export default function RootLayout({ children }) {
return <html className={inter.variable}><body>{children}</body></html>;
}Sous-ensembles de polices
Ne chargez que les sous-ensembles de caractères dont vous avez besoin. Une police Unicode complète peut dépasser 1 Mo ; un sous-ensemble latin fait généralement entre 30 et 80 Ko.
// Google Fonts URL with subset:
https://fonts.googleapis.com/css2?family=Roboto&subset=latin
// next/font:
const roboto = Roboto({ weight: '400', subsets: ['latin'] });Préchargement des polices critiques
Préchargez les polices utilisées au-dessus de la ligne de flottaison afin qu’elles se chargent en parallèle de l’analyse du HTML et réduisent le temps de blocage du rendu.
<link
rel="preload"
href="/fonts/MyFont.woff2"
as="font"
type="font/woff2"
crossOrigin="anonymous"
/>CDN et mise en cache
Servez les images et les polices depuis un CDN avec des durées de mise en cache longues (Cache-Control: max-age=31536000, immutable). Les noms de fichier contenant le hachage du contenu garantissent que les fichiers actualisés ignorent le cache.
Vérification rapide
Que fait font-display: swap pour les polices Web ?
Récapitulatif
Utilisez next/image pour l’optimisation automatique, ou loading='lazy' natif et srcSet avec React classique. Servez AVIF/WebP avec des solutions de repli dans <picture>. Appliquez font-display: swap aux polices Web, utilisez next/font pour héberger localement les polices Google et préchargez les ressources critiques situées au-dessus de la ligne de flottaison.
Questions Fréquemment Posées
La leçon « Optimisation des images et des polices dans React » est-elle gratuite ?
Oui — le texte complet de « Optimisation des images et des polices dans React » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours React Academy, passe à CoddyKit PRO. Le cours React Academy comprend 4 leçons au total.
Qu'est-ce que j'apprendrai dans « Optimisation des images et des polices dans React » ?
Utilisez next/image ou chargé de façon différée avec les bonnes dimensions, les bons formats (AVIF/WebP) et font-display. Tu pratiques React Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.
Dois-je avoir de l'expérience pour commencer React Academy ?
Aucune expérience préalable n'est requise. React Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 3 sur 4.
Combien de temps prend la leçon « Optimisation des images et des polices dans React » ?
La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.
Peux-tu écrire et exécuter du code dans cette leçon React Academy ?
Oui. Chaque leçon React Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.
Toutes les leçons de ce cours
- Mesurer les indicateurs Web essentiels dans les applications React
- Analyse du bundle et stratégie de séparation du code
- Optimisation des images et des polices dans React
- Réduire l’INP : optimisation des gestionnaires d’événements