Les images représentent presque toujours la majeure partie du poids d'une page, et c'est là que se joue la plus grande partie du temps d'affichage. Bien traitées, elles ne coûtent presque rien ; mal traitées, elles annulent tout le reste du travail technique. Quatre décisions suffisent : le bon format, le bon poids, les bonnes dimensions déclarées, et le bon moment de chargement. Voici comment les prendre.
Choisir le format avant de compresser
Compresser un mauvais format ne rattrape rien. Le choix se fait d'abord sur la nature de l'image.
| Type d'image | Format à privilégier | Pourquoi |
|---|---|---|
| Photo, visuel riche | WebP (ou AVIF) | Nettement plus léger qu'un JPEG à qualité perçue équivalente |
| Logo, pictogramme, tracé | SVG | Vectoriel : net à toutes les tailles, souvent quelques kilo-octets |
| Capture avec transparence | WebP ou PNG | Le PNG reste lourd : ne l'utiliser que si la transparence est indispensable |
| Animation courte | Vidéo (MP4/WebM) | Un GIF pèse souvent dix fois plus qu'une vidéo équivalente |
Le réflexe le plus rentable en Tunisie, où une part importante du trafic arrive en connexion mobile : ne jamais publier une photo sortie d'un appareil sans la retraiter. Un fichier de 6 Mo destiné à l'impression n'a rien à faire sur une page web.
Réduire le poids sans dégrader visiblement
La compression a un point d'équilibre : au-delà, on gagne quelques kilo-octets et on perd la netteté. La méthode est simple et ne demande aucun outil coûteux.
- Redimensionnez d'abord. Une image affichée dans un bloc de 800 pixels de large n'a pas besoin d'en faire 4000. C'est le gain le plus important, et il est gratuit.
- Convertissez ensuite au format moderne, avec un repli pour les navigateurs anciens si votre outil le gère.
- Compressez en regardant le résultat, pas en appliquant un réglage à l'aveugle. Les zones de dégradé et les visages révèlent les excès en premier.
- Fixez un budget par page, par exemple un poids maximal pour l'image principale. Sans budget, le poids remonte au fil des publications.
- Servez plusieurs tailles quand c'est possible, pour qu'un téléphone ne télécharge pas la version conçue pour un grand écran.
Un ordre de grandeur utile : une image de couverture bien traitée pèse en général quelques centaines de kilo-octets, pas plusieurs mégaoctets.
Déclarer les dimensions, toujours
C'est la correction la moins visible et l'une des plus rentables. Une image sans largeur ni hauteur déclarées ne réserve pas sa place : le navigateur affiche le texte, puis l'image arrive et pousse tout ce qui est en dessous. Le visiteur perd sa ligne de lecture, ou clique à côté d'un bouton qui vient de se déplacer.
Deux attributs par image suffisent à supprimer ce défaut. C'est aussi ce qui fait chuter le plus vite l'indicateur de stabilité visuelle décrit dans le guide des Core Web Vitals.
Le même raisonnement vaut pour les vidéos et les blocs insérés après coup : bandeau de consentement, encart publicitaire, widget de chat. Tout ce qui apparaît en retard doit avoir une place réservée à l'avance.
Le texte alternatif : accessibilité d'abord, SEO ensuite
Le texte alternatif décrit l'image pour une personne qui ne la voit pas, et pour une machine qui ne la comprend pas. Écrit dans cet ordre, il sert les deux.
- Décrivez ce que montre l'image, pas ce que vous voulez référencer. « Salon de coiffure à Tunis, poste de travail et miroirs » est utile ; une liste de mots-clés ne l'est pas.
- Laissez-le vide pour une image purement décorative — un séparateur, une texture. Un lecteur d'écran passera dessus au lieu de lire un texte inutile.
- Ne commencez pas par « image de » : la technologie d'assistance annonce déjà qu'il s'agit d'une image.
- Nommez les fichiers lisiblement avant l'envoi : un nom qui décrit le sujet vaut mieux qu'une suite de chiffres issue de l'appareil photo.
- Si l'image porte du texte important, reprenez ce texte dans la page. Une information qui n'existe que dans un visuel est invisible pour beaucoup de monde.
Charger au bon moment
Toutes les images d'une page ne se valent pas. Celle qui occupe le haut de l'écran doit arriver en priorité : c'est elle que le visiteur attend, et c'est souvent elle que Google mesure pour évaluer la vitesse d'affichage. Celles qui se trouvent plus bas peuvent attendre d'approcher de l'écran.
L'erreur classique consiste à appliquer le chargement différé à tout, image de couverture comprise. Le résultat est contre-productif : la page reste vide plus longtemps, précisément là où c'est le plus coûteux.
Un dernier point souvent négligé : les images servies depuis un autre domaine ajoutent une connexion supplémentaire. Pour une galerie ou un catalogue, cela se sent. Le guide des fiches produit traite ce cas côté boutique.