Sur la plupart des sites qu'on audite, les images representent 60 a 80% du poids total d'une page. Une photo de smartphone fait souvent 4 a 8 Mo, integree telle quelle dans une page web sans aucun traitement. Resultat : des temps de chargement de 6 a 10 secondes sur mobile, et des visiteurs qui partent avant meme d'avoir vu le contenu. C'est un des points les plus faciles a corriger sur un site, et pourtant un des plus negliges.
Le bon format pour chaque usage
Le choix du format d'image change directement le poids final du fichier.
- WebP : le format de reference en 2026 pour la photo et les visuels complexes. 25 a 35% plus leger qu'un JPEG a qualite equivalente, supporte par tous les navigateurs modernes.
- AVIF : encore plus performant que le WebP, jusqu'a 50% de gain de poids, mais l'encodage est plus lent et certains outils de gestion de contenu le supportent mal.
- SVG : reserve aux logos, icones et illustrations vectorielles. Poids quasi nul, net a n'importe quelle taille d'ecran.
- PNG : uniquement si vous avez besoin de transparence reelle. A eviter pour les photos, le fichier explose en poids compare a un WebP.
La dimension compte plus que le format
Une erreur tres frequente : integrer une image de 4000 pixels de large dans un bloc qui n'en affiche que 800 a l'ecran. Le navigateur telecharge quand meme le fichier complet, ce qui gaspille de la bande passante pour rien. La regle : exportez vos images a la taille reelle d'affichage maximale, jamais plus grand. Sur un site avec des vignettes produits, un carrousel et une banniere, cela veut dire preparer plusieurs tailles pour chaque usage, pas une seule photo geante utilisee partout.
Le responsive images (srcset)
Un bon site technique sert une image differente selon l'appareil : une version 400px pour un mobile, 1200px pour un ecran large. C'est le role de l'attribut srcset en HTML. Sur un site vitrine bien construit, cette mecanique est automatique et invisible pour vous.
La compression, sans y laisser la qualite
Une compression bien reglee (qualite 75-85% en JPEG ou WebP) est invisible a l'oeil nu mais divise le poids par 2 a 4. Des outils comme Squoosh, TinyPNG ou des plugins integres au CMS automatisent cette etape a l'upload. L'erreur classique : compresser trop fort pour gagner quelques kilooctets et obtenir des photos de gateaux ou de produits visiblement pixelisees, ce qui nuit a la conversion autant qu'un chargement lent.
Le lazy loading, ou comment ne charger que ce qui est vu
Sur une page avec 30 photos, il est inutile de charger les 25 dernieres avant que le visiteur ait scrolle jusqu'a elles. Le lazy loading (attribut loading="lazy") retarde le chargement des images hors champ de vision initial. Sur les sites e-commerce avec de longues pages catalogue, le gain est souvent de 2 a 4 secondes sur le temps de chargement percu.
Ce qu'on fait concretement chez nous
Sur chaque site e-commerce ou vitrine qu'on livre, la chaine est automatisee : conversion WebP a l'upload, generation de plusieurs tailles, compression calibree, lazy loading par defaut. Si votre site actuel n'a rien de tout ca, c'est probablement la source la plus rapide de gain de vitesse disponible, avant meme de toucher au code ou a l'hebergement. Un audit rapide des images les plus lourdes de vos pages les plus visitees suffit souvent a identifier 3 a 5 fichiers responsables de la moitie du poids total de la page. Commencez par ceux-la.