Vous avez sans doute déjà envoyé une photo par e-mail et attendu de longues secondes que la barre de progression avance. Ou reçu un message du genre « pièce jointe trop volumineuse ». Sur un site, c’est pareil : chaque photo doit voyager du serveur jusqu’au téléphone du visiteur. Et plus elle est lourde, plus le voyage est long.
À quoi servent les images, et où sont-elles ?
Les images donnent envie : la photo de la terrasse d’un restaurant, le visage d’une artisane, le logo d’une entreprise. Elles font partie des fichiers du site, au même titre que le texte. Elles sont rangées sur le serveur, souvent dans un dossier appelé images.
Le HTML de la page ne contient pas l’image elle-même. Il contient seulement une balise, <img>, qui dit « ici, affiche telle image ». Quand votre navigateur lit cette balise, il demande le fichier au serveur web, qui l’envoie. Une page avec dix photos, ce sont donc dix fichiers de plus à télécharger.
Le CSS intervient ensuite pour décider de la taille d’affichage, des coins arrondis ou de la place de l’image dans la page.
Les trois formats qu’on rencontre
Une image est enregistrée dans un format, reconnaissable à la fin du nom du fichier. Trois formats reviennent presque partout :
- JPG (ou JPEG) : le format des photos. Il réduit le poids en simplifiant des détails que l’œil remarque peu. Parfait pour une photo de plat ou de paysage.
- PNG : le format des logos, des schémas et des captures d’écran. Il garde des contours nets et peut avoir un fond transparent. En revanche, pour une photo, il est souvent bien plus lourd que le JPG.
- WebP : un format plus récent, proposé par Google, reconnu par les navigateurs actuels comme Safari et Chrome. À qualité égale, il est en général plus léger que le JPG et le PNG.
Vous croiserez aussi le SVG pour certains logos et icônes. C’est un format particulier, fait de formes dessinées plutôt que de points, qui reste net à toutes les tailles.
Le poids : la vraie question
Le poids d’une image, c’est la place qu’elle occupe, mesurée en kilo-octets (Ko) ou en méga-octets (Mo). Un méga-octet vaut environ mille kilo-octets.
Une photo tout juste sortie d’un iPhone pèse souvent plusieurs méga-octets. Elle est faite pour être imprimée en grand ou agrandie sur un téléviseur. Sur l’écran d’un téléphone, une version de quelques centaines de kilo-octets suffit largement et paraît tout aussi belle.
Pour l’alléger, on fait deux choses :
- réduire ses dimensions : inutile d’envoyer une image de plusieurs milliers de points de large si elle s’affiche dans un cadre de quelques centaines ;
- la compresser : c’est-à-dire l’enregistrer de façon plus économe, ce qui retire des informations que l’œil ne remarque pas.
Pourquoi c’est important
La lenteur fait fuir. Quand une page met trop de temps à s’afficher, beaucoup de visiteurs abandonnent avant même d’avoir vu ce que vous proposez. Les images lourdes sont l’une des causes les plus fréquentes d’un site lent.
Google y fait attention aussi. Le moteur de recherche tient compte de la vitesse d’une page, et il lit la petite description qu’on peut attacher à chaque image, appelée texte alternatif. Ce texte est également lu à voix haute aux personnes qui utilisent un lecteur d’écran. Une phrase simple suffit : « terrasse du restaurant au coucher du soleil ».
Ce que vous avez à retenir
Avant de mettre une photo sur votre site, posez-vous une question : est-elle plus grande que nécessaire ? Si oui, il faut la redimensionner et la compresser, idéalement en WebP ou en JPG.
Vous pouvez aussi confier ce travail à un assistant IA installé sur votre serveur : vous lui envoyez vos photos et lui demandez de les préparer pour le site. Il les réduit, les convertit et les place au bon endroit. Et comme toutes les images font partie de vos fichiers, pensez à les inclure dans vos sauvegardes : une photo perdue ne se retrouve pas toujours.