Optimisation des images pour les sites web marocains : le guide complet

Ouvrez n'importe quel site d'entreprise marocaine, lancez un audit de performance, et le même problème apparaît : des images massives et non optimisées. Une image hero de 4 Mo. Des photos produit uploadées directement depuis l'appareil photo. Les images seules représentent 50–70% du poids de la plupart des sites.

Le coût des images non optimisées

Une seule image JPEG hero non optimisée peut faire 3–5 Mo. Sur une connexion 4G à Casablanca, cela prend 3–5 secondes à télécharger. En comparaison, une version WebP correctement optimisée de la même image fait 80–150 Ko et charge en moins d'une seconde.

WebP : le format que vous devriez utiliser

WebP fournit des fichiers 25–35% plus petits que JPEG à qualité équivalente. Tous les navigateurs modernes le supportent. Il n'y a aucune raison de servir des JPEG ou PNG en 2026.

Images responsives : servir la bonne taille

Une image hero de 1 200 px de large n'a pas besoin d'être servie en 1 200 px sur un téléphone de 375 px. Les images responsives utilisent srcset pour servir différentes tailles selon l'appareil. Dans Next.js, le composant Image gère cela automatiquement.

Lazy loading : charger au besoin

Les images sous le fold ne devraient charger que quand l'utilisateur scrolle vers elles. Une galerie de 20 images passe de 4 Mo+ (toutes chargées) à 300 Ko (les 3 visibles).

La checklist d'optimisation

Format : WebP pour toutes les images. Taille : Aucune image plus large que sa taille d'affichage maximale. Compression : Cible 80–85% de qualité. Lazy loading : Sur toutes les images sous le fold. Dimensions : Toujours spécifier largeur et hauteur. Taille fichier : Hero sous 150 Ko, produits sous 80 Ko, miniatures sous 30 Ko.

Pour le contexte performance global, voir comment nous atteignons 100/100 Lighthouse. Si votre site est lourd en images et lent, corrigeons-le.