🖼️Image Optimization

Optimisation des Images

next/image pour des images performantes

✓

Avec next/image

✅Format moderne (WebP/AVIF)

✅Redimensionnement automatique

✅Lazy loading par défaut

✅Pas de layout shift

✗

Avec <img>

❌Format original (JPEG/PNG)

❌Taille fixe non optimisée

❌Charge immédiatement

❌Layout shift possible

Exemples de Code

1. Usage de base

import Image from 'next/image'

<Image
  src="/photo.jpg"
  width={500}
  height={300}
  alt="Description de l'image"
/>

2. Image above-the-fold (haute priorité)

<Image
  src="/hero.jpg"
  width={1200}
  height={600}
  alt="Image hero"
  priority  // Pas de lazy loading
/>

3. Image responsive (fill)

<div className="relative w-full h-64">
  <Image
    src="/background.jpg"
    fill
    className="object-cover"
    sizes="100vw"
    alt="Background"
  />
</div>

4. Avec qualité et placeholder

<Image
  src="/photo.jpg"
  width={800}
  height={600}
  alt="Photo"
  quality={90}        // 1-100 (default: 75)
  placeholder="blur"  // Effet de flou
  blurDataURL="data:..." // Data URL du blur
/>

Avantages de next/image

🚀 Performance

• Formats modernes (WebP, AVIF)
• Redimensionnement automatique
• Lazy loading par défaut
• CDN automatique sur Vercel

📱 Responsive

• Adapte la taille à l'écran
• Génère plusieurs tailles
• srcset automatique
• Économie de bande passante

🎨 UX

• Pas de layout shift (CLS)
• Placeholder blur
• Transition douce
• Meilleur Core Web Vitals

⚙️ Configuration

• Domaines autorisés
• Formats personnalisés
• Tailles prédéfinies
• Optimisation build-time

💡 Bonnes Pratiques

•Toujours spécifier width et height ou utiliser fill
•Utiliser priority pour les images above-the-fold
•Ajouter des alt descriptifs pour l'accessibilité
•Utiliser sizes pour le responsive
•Configurer les domaines externes dans next.config.js