Le texte est bon marché (kilo-octets). Les images coûtent cher (mégaoctets). Si vous téléchargez un fichier JPEG de 5 Mo directement depuis un appareil photo reflex numérique sur votre page d’accueil, vous avez commis un crime contre les performances. Sur un réseau 3G, cette image prend 20 secondes à charger. L’utilisateur est parti. L’optimisation de l’image est la chose la plus efficace que vous puissiez faire pour Core Web Vitals.

Pourquoi Maison Code en parle

Chez Maison Code Paris, nous agissons comme la conscience architecturale de nos clients. Nous héritons souvent de stacks “modernes” construites sans compréhension fondamentale de l’échelle.

Nous abordons ce sujet car il représente un point de pivot critique dans la maturité de l’ingénierie. Une mise en œuvre correcte différencie un MVP fragile d’une plateforme résiliente de niveau entreprise.

La guerre des formats : JPG contre WebP contre AVIF

JPG/PNG : La vieille garde. Lourd. Le PNG est bon pour la transparence, mais massif.
WebP : Le standard de Google. 30 % plus petit que JPG. Pris en charge par tous les navigateurs modernes.
AVIF : Le nouveau roi. Basé sur le codec vidéo AV1. 50 % plus petit que JPG. Prise en charge HDR. Stratégie : Servez AVIF aux navigateurs qui le prennent en charge (Chrome, Safari). Repli sur WebP. Repli vers JPG. Next.js <Image /> le fait automatiquement.

Dimensionnement réactif (srcset)

Un utilisateur sur un iPhone (écran large de 375 px) n’a pas besoin d’une bannière de bureau de 4 000 px de large. Cela gaspille de la bande passante et de la mémoire GPU (downscaling). Vous devez servir différentes tailles sur différents appareils. La méthode HTML :

<img 
  src="petit.jpg"
  srcset="moyen.jpg 1000w, grand.jpg 2000w"
  tailles="(largeur maximale : 600px) 100vw, 50vw"
/>

Le navigateur examine sa propre largeur, calcule la densité de pixels (Retina 2x) et sélectionne le fichier parfait. Si vous utilisez un framework comme Next.js, définissez simplement correctement la prop sizes. “Cette image occupe 100 % de l’écran sur mobile et 50 % sur ordinateur.”

Chargement paresseux vs chargement impatient

Lazy Loading : “Ne chargez pas cette image tant que l’utilisateur ne la fait pas défiler.”

Cela économise la bande passante initiale.
Résultat : chargement initial de la page plus rapide.
Par défaut : dans Next.js, les images sont paresseuses par défaut.

Chargement impatient (priorité) : “Chargez-le immédiatement.”

Cas d’utilisation : L’élément LCP (Largest Contentful Paint). Généralement la bannière du héros.
Critique : Si vous chargez paresseux l’image Hero, le navigateur attend que JS s’hydrate avant de charger l’image. Cela tue votre score LCP.
Règle : marquez l’image la plus haute comme priority={true}.

Prévention des changements de mise en page

Si vous insérez une image sans dimensions :

Le navigateur affiche le texte.
Chargements d’images (hauteur 500px).
Le texte est poussé vers le bas. Il s’agit de CLS (Cumulative Layout Shift). Google déteste ça. Correction : réservez toujours l’espace de format d’image. Le navigateur dessine immédiatement une « boîte d’espace réservé » de la taille correcte. L’image se charge dans la boîte.

Le CDN (Content Delivery Network)

Ne diffusez pas d’images à partir de votre serveur Web. Servez-les à partir d’un Image CDN (Cloudinary, Imgix, Vercel Blob). Pourquoi?

Transformation à la volée : image.jpg?w=500&q=80. Vous générez la taille/qualité exacte demandée.
Global Edge : L’image est mise en cache dans 200 villes.
Smart Crop : L’IA détecte le visage sur la photo et le recadre pour la vignette mobile.

6. Graphiques vectoriels (SVG) : la résolution infinie

Pour les logos et les icônes, n’utilisez jamais de format PNG. Utilisez SVG (Scalable Vector Graphics). Un logo PNG de 5 000 px fait 1 Mo. Le même logo en SVG fait 2 Ko. Et il s’adapte à la taille d’un panneau d’affichage sans pixels. Avertissement de sécurité : les SVG sont des fichiers XML. Ils peuvent contenir du JavaScript (XSS). Nettoyez toujours les SVG téléchargés par l’utilisateur côté serveur à l’aide de bibliothèques telles que « isomorphic-dompurify ».

7. La révolution vidéo (WebM & AV1)

Les images statiques sont ennuyeuses. Le commerce électronique passe à la « lecture automatique de la vidéo » en survol. Les GIF sont terribles (taille énorme, 256 couleurs). Utilisez WebM ou MP4 (H.264) sans audio. <vidéo autoPlay boucle mutée playInline>. C’est souvent plus petit qu’un GIF et une couleur 32 bits complète. Le nouveau codec AV1 est encore plus petit, mais vérifiez la prise en charge du navigateur.

10. Optimisation LCP sur les stéroïdes

Core Web Vitals « la plus grande peinture de contenu » est généralement une image. Pour frapper < 2,5 s :

En-tête de préchargement : envoyez <link rel="preload" as="image" href="hero.avif"> dans la réponse initiale du document HTML.
Fetch Priority : utilisez <img fetchpriority="high"> (Chrome 101+).
Arrière-plans CSS en ligne : s’il s’agit d’un petit motif, encodez-le en Base64 dans le CSS pour éviter une requête réseau.

11. Stratégies d’image d’arrière-plan

Les images de « couverture » sont délicates car le rapport hauteur/largeur change. CSS : object-fit : couverture. Le problème : la « partie importante » (le visage) peut être rognée sur mobile. Solution : Recadrage du point focal. Nous utilisons les hotspots Sanity CMS. Nous transmettons les coordonnées du point focal (x=0,5, y=0,3) au Image CDN. Le CDN génère un recadrage centré pour le bureau et un recadrage aligné en haut pour le mobile. La direction artistique reste intacte sur tous les appareils.

13. La révolution AVIF (immersion approfondie)

Pourquoi AVIF change-t-il la donne ? Il prend en charge le HDR (High Dynamic Range). Si vous vendez des bijoux, l’éclat dépend de la plage de contraste. JPEG fixe les couleurs à la plage dynamique standard (SDR). AVIF préserve la profondeur de couleur complète de 10 ou 12 bits de la photo source. Sur un écran OLED d’iPhone, le diamant scintille. Nous configurons nos pipelines multimédias pour détecter la prise en charge du HDR (via CSS Media Queries « plage dynamique : élevée ») et servons le HDR AVIF uniquement aux appareils compatibles. C’est la « Fidélité visuelle » comme avantage concurrentiel.

14. Pourquoi Maison Code ?

Chez Maison Code, nous sommes des perfectionnistes en pixels. Nous n’acceptons pas la compression « floue ». Nous affinons le paramètre « qualité » par type d’image.

Packshots de produits : q=85 (lignes Crisp).
Arrière-plans de style de vie : q=60 (la mise au point douce est correcte). Nous construisons des pipelines d’images adaptatifs qui optimisent à la fois la vitesse (LCP) et la beauté (rétention). Car dans le Luxe, une image pixellisée est une insulte au savoir-faire.

15. Conclusion

Les images sont la chose la plus lourde du Web. Ils sont aussi la chose la plus importante. Vous devez équilibrer la tension entre « Rapide » et « Beau ». Avec les codecs modernes (AVIF), la syntaxe réactive (srcset) et les CDN Edge, vous pouvez avoir les deux. Arrêtez de diffuser des fichiers JPEG de 5 Mo. Respectez le forfait de données de votre utilisateur.

Les images se chargent lentement ?

Nous optimisons les pipelines multimédias pour un LCP instantané et une fidélité visuelle parfaite sur tous les appareils. Engagez nos Architectes.