Des images qui ne plombent pas le site.

Commencer par les dimensions

C’est l’erreur la plus fréquente et la plus coûteuse : publier une photo de six mille pixels de large pour l’afficher dans un bloc de huit cents. Le navigateur télécharge tout, puis réduit. La règle est simple : exportez à la taille maximale d’affichage, doublée pour les écrans à haute densité.

Choisir le bon format

• WebP : le choix par défaut aujourd’hui, bien plus léger que le JPEG à qualité équivalente.
• JPEG : encore utile pour les photographies quand la compatibilité prime.
• PNG : réservé aux images avec transparence ou aux aplats nets, sinon il alourdit inutilement.
• SVG : pour les logos, pictogrammes et schémas — net à toutes les tailles, souvent quelques kilo-octets.

Compresser sans abîmer

Une qualité de 75 à 85 % suffit presque toujours pour une photographie destinée au web : l’écart visuel est imperceptible, le gain de poids considérable. Vérifiez surtout les zones de dégradé — ciel, ombre douce — où la compression se voit en premier.

Éviter les sauts de page

Une image sans dimensions déclarées fait bouger le texte au moment où elle arrive : le lecteur perd sa ligne, ou clique au mauvais endroit. Indiquer la largeur et la hauteur réserve l’espace à l’avance et supprime ce décalage.

Charger au bon moment

• Les images visibles à l’arrivée doivent être chargées en priorité.
• Les autres attendent l’approche du défilement : c’est le chargement différé.
• Une seule image doit être prioritaire par page, en général celle du haut.

Choisir avant d’optimiser

Aucune compression ne rattrape une image mal choisie. Avant de parler de format, il faut trancher : cette image apporte-t-elle une information, une preuve ou une émotion ? Si elle ne fait qu’occuper l’espace, la retirer améliore la page à tous les niveaux.

• Les photos de banque génériques affaiblissent une marque : tout le monde peut les utiliser, et le visiteur les reconnaît.
• Une photo réelle, même imparfaite, vaut mieux qu’une mise en scène impeccable mais interchangeable.
• Les captures d’écran d’interface doivent être lisibles au format d’affichage, pas seulement en plein écran.
• Un schéma clair remplace souvent trois paragraphes et deux photos.

Décrire chaque image

Le texte alternatif sert d’abord aux personnes qui ne voient pas l’image — lecteur d’écran, connexion coupée, image non chargée. Il aide aussi les moteurs de recherche, qui n’ont aucun autre moyen de savoir ce que montre une photo.

• Décrire ce que l’image apporte, pas ce qu’elle contient en détail.
• Laisser le texte alternatif vide pour une image purement décorative.
• Éviter « image de », « photo de » : le lecteur d’écran l’annonce déjà.
• Pour une capture d’écran ou un schéma, résumer l’information qu’il contient.

Où stocker les images

Sur un petit site, les images vivent dans les fichiers du projet : simple, gratuit, suffisant. Dès qu’un client ajoute lui-même des photos, un service d’images devient utile : il redimensionne, convertit et sert automatiquement la bonne version à chaque écran.

Sans cet automatisme, la performance se dégrade lentement : les premières images sont soignées, les suivantes sont déposées telles quelles, et six mois plus tard la page d’accueil pèse cinq mégaoctets.

Une chaîne à écrire une fois

1. 01RecevoirDemander les originaux en pleine résolution, jamais des captures ou des images compressées par messagerie.
2. 02TrierChoisir avant de traiter : dix bonnes images valent mieux que trente moyennes.
3. 03PréparerRecadrer, redimensionner, exporter au format retenu, avec un nom de fichier lisible.
4. 04PublierDimensions déclarées, texte alternatif écrit, chargement différé sauf pour la première image.

Cadrer pour mobile

Un cadrage panoramique pensé pour un grand écran devient illisible une fois recadré sur un téléphone : le sujet sort du cadre, le visage est coupé. Vérifiez chaque image importante en étroit, et prévoyez un recadrage différent quand le sujet le mérite.

Une image bien préparée pèse dix fois moins et se voit dix fois mieux.