Introduction
Votre site met 6 secondes à charger sur mobile, et Google Search Console vous alerte que la performance mobile est mauvaise. En regardant de près, les coupables sont les images : chaque bannière fait 4000 pixels et 3 Mo, alors que l'écran d'un téléphone n'affiche que 400 pixels de large. Le visiteur mobile télécharge 10 Mo d'images pour en voir 1 Mo à l'écran, donc tout rame. La solution, c'est de baisser la résolution des images pour accélérer le chargement web mobile, en servant des images à la bonne taille. Dans ce guide, on voit comment faire ça en un lot et gagner plusieurs secondes de chargement.
Pourquoi ça arrive
Le chargement web mobile dépend beaucoup du poids des images. Sur 4G, le débit est limité, et chaque mégaoctet téléchargé ajoute du temps. Le problème, c'est que beaucoup de sites servent des images en pleine résolution, 4000 pixels et 3 Mo, alors que l'écran d'un téléphone n'affiche que 400 pixels de large. Le navigateur mobile télécharge l'image complète puis la réduit à l'affichage, ce qui gaspille de la bande passante et du temps. Google pénalise d'ailleurs les sites lents dans son référencement mobile-first, donc un site qui rame perd des visiteurs et des places dans les résultats. La solution, c'est de baisser la résolution des images à la taille d'affichage réelle, souvent 800 ou 1200 pixels de large pour le mobile, et de compresser en JPG à 75-80 pour cent. Une image qui faisait 3 Mo tombe à 150 Ko, et la page charge en 2 secondes au lieu de 6.
3 solutions
Solution 1 : Redimensionner et compresser par lot. Passez toutes les images du site dans le compresseur par lot de piczen, fixez la largeur à 1200 pixels et la qualité à 75 pour cent. Chaque image tombe sous 200 Ko.
Solution 2 : Servir des images responsive avec srcset. Générez plusieurs tailles par image et laissez le navigateur choisir la bonne selon l'écran. Plus complet mais demande de générer plusieurs versions.
Solution 3 : Utiliser un plugin d'optimisation côté CMS. WordPress, Shopify et autres ont des plugins qui optimisent à l'upload. Pratique mais souvent payant.
Guide étape par étape
D'abord, repérez la taille d'affichage réelle des images sur votre site. Sur mobile, une bannière fait souvent 800 pixels de large, une image d'article 1200 pixels. Ouvrez le navigateur et chargez l'outil de compression par lot. Glissez toutes les images du site sur la page. Fixez le plus grand côté à 1200 pixels, ce qui couvre la plupart des usages web mobile et desktop. Réglez le format de sortie en JPG et la qualité à 75 pour cent. Cliquez sur Compresser et laissez le lot tourner. Téléchargez le zip, décompressez-le, et remplacez les images du site par les versions compressées. Ouvrez le site sur un téléphone en 4G et chronométrez le chargement. Il doit être beaucoup plus rapide. Vérifiez la qualité des images à l'écran pour confirmer qu'elles restent nettes. Si une image paraît molle, montez la qualité à 80 pour cent pour ce lot. Vérifiez aussi Google Search Console après quelques jours, le score de performance mobile doit remonter.
Avantages et inconvénients
Baisser la résolution des images est le levier le plus efficace pour accélérer le chargement web mobile. L'avantage, c'est que la qualité reste largement suffisante pour l'écran, donc le visiteur ne voit pas la différence, mais le chargement s'effondre. Google récompense les sites rapides dans le référencement, donc vous gagnez aussi en visibilité. La contrepartie, c'est que les images redimensionnées ne sont plus exploitables pour un affichage en pleine résolution sur un écran 4K ou pour un recadrage, donc gardez les originaux quelque part. Les images responsive avec srcset sont plus complètes mais demandent de générer plusieurs versions par image, ce qui alourdit le flux. Pour la plupart des sites, baisser la résolution à 1200 pixels et compresser à 75 pour cent est le bon compromis entre performance et qualité.