Un artisan nous confie l'adresse de son site en expliquant qu'il rame sur téléphone. Nous ouvrons la page d'accueil et nous pesons les fichiers : la photographie de chantier qui occupe le bandeau fait 4 800 pixels de large pour 5,2 mégaoctets. Elle sort directement d'un appareil photo et elle a été déposée telle quelle dans le constructeur de pages. À l'écran, elle s'affiche dans un cadre de 1 200 pixels. Le navigateur télécharge donc quatre fois plus de données que nécessaire, puis réduit l'image lui-même.
Ce cas représente la majorité des sites lents que nous reprenons. Avant d'acheter une extension de vitesse, avant de changer d'hébergeur, avant de discuter d'une refonte, il faut peser les images. Le gain obtenu là est presque toujours le plus important, et il ne coûte que de la rigueur.
Pourquoi une image lourde pénalise davantage que le reste
Une page de site vitrine bien construite pèse quelques centaines de kilooctets de code, de feuilles de style et de scripts. Une seule photographie non préparée pèse dix à vingt fois cela. Sur une connexion mobile en zone de faible couverture, entre deux communes du Bassin Genevois ou dans un parking souterrain, ce volume se traduit directement en secondes d'attente.
L'effet est aggravé par le fait que l'image de bandeau est justement l'élément que Google chronomètre pour évaluer l'affichage du contenu principal. Cette mesure et ses seuils sont détaillés dans notre article sur les Core Web Vitals expliqués en français. En pratique, tant que le bandeau n'est pas descendu à un poids raisonnable, aucune autre optimisation ne produira de résultat visible.
Trois notions à ne pas confondre : dimensions, poids et format
Ces trois grandeurs sont indépendantes, et la confusion entre elles explique la plupart des mauvaises manipulations.
Les dimensions correspondent au nombre de pixels du fichier, par exemple 4 800 par 3 200. Elles doivent être ajustées à la taille d'affichage réelle : un bandeau pleine largeur se contente de 1 800 à 2 000 pixels, une image d'article de 1 200 pixels, une vignette de 600 pixels. Au-delà, vous transportez de la donnée que personne ne verra jamais.
Le poids correspond à la taille du fichier en kilooctets. Il dépend des dimensions, mais aussi du taux de compression choisi à l'export. Une photographie exportée avec une qualité de 80 pour cent est très rarement distinguable de la même image à 100 pour cent, pour un fichier deux à trois fois plus léger.
Le format détermine la manière dont l'image est encodée. Le JPEG convient aux photographies mais reste coûteux, le PNG est destiné aux logos et aux images à fond transparent et devient énorme dès qu'il contient une photographie, le SVG est un format vectoriel parfait pour un logo ou un pictogramme puisqu'il reste net à toutes les tailles pour un poids minuscule. Le WebP, développé par Google et supporté par tous les navigateurs actuels, produit à qualité visuelle comparable des fichiers nettement plus légers que le JPEG et gère la transparence comme le PNG. C'est le format que nous utilisons par défaut sur les sites que nous livrons, y compris celui que vous consultez.
Ce que WordPress fait tout seul, et ce qu'il ne fait pas
WordPress n'est pas passif sur ce sujet, et il est utile de savoir où s'arrête son aide. À chaque dépôt dans la médiathèque, il génère automatiquement plusieurs déclinaisons de tailles différentes, puis il indique au navigateur la liste de ces variantes afin que celui-ci télécharge celle qui correspond à la largeur de l'écran. Il applique également un chargement différé, ce qui signifie que les images situées plus bas dans la page ne sont récupérées qu'à l'approche du défilement.
En revanche, il conserve le fichier original tel que vous l'avez déposé, et c'est souvent celui-là qu'un constructeur de pages finit par afficher lorsque l'on insère une image en pleine largeur. Il ne convertit pas non plus automatiquement vos JPEG en WebP dans toutes les configurations d'hébergement. Enfin, il ne peut rien contre une image dont les proportions ne correspondent pas au cadre prévu, cas qui produit soit un recadrage malheureux, soit un déplacement de la mise en page pendant le chargement.
Notre méthode de préparation, en amont plutôt qu'en rattrapage
Nous préférons régler la question avant le dépôt, parce que chaque extension ajoutée pour compenser un mauvais fichier consomme elle-même des ressources. Notre séquence est simple et se transmet en quinze minutes à la personne qui alimente le site.
- Redimensionnez l'image à la largeur d'affichage prévue, sans jamais dépasser 2 000 pixels pour un bandeau et 1 200 pixels pour une illustration d'article.
- Exportez en WebP avec une qualité autour de 80 pour cent, et vérifiez le rendu à l'écran plutôt que de vous fier au chiffre.
- Visez un poids inférieur à 200 kilooctets pour un bandeau et à 100 kilooctets pour une image d'article. Ces ordres de grandeur sont largement atteignables sur une photographie ordinaire.
- Renseignez le texte alternatif, qui décrit factuellement le contenu de l'image. Il sert aux personnes utilisant un lecteur d'écran et à la compréhension de la page par les moteurs, sujet que nous abordons dans notre article sur l'accessibilité d'un site.
- Nommez le fichier de manière lisible avant le dépôt, par exemple
chantier-toiture-annemasse.webpplutôt qu'une suite de chiffres issue de l'appareil photo.
Quand un site existant contient déjà plusieurs centaines d'images mal préparées, la reprise manuelle n'est pas raisonnable. Nous utilisons alors une conversion en lot côté serveur, en conservant les originaux à part, et nous rectifions à la main les seules images de bandeau et de page d'accueil qui pèsent réellement sur la mesure.
La question des droits, qui coûte plus cher que la lenteur
Un visuel récupéré dans les résultats d'un moteur de recherche pose deux problèmes à la fois. Il arrive presque toujours dans un format et un poids inadaptés, et il n'est presque jamais libre d'utilisation commerciale. Une réclamation d'ayant droit se règle en centaines d'euros, très au-delà du coût d'une banque d'images ou d'une séance photo.
Nous livrons donc les sites avec des visuels dont la licence est traçable, et nous encourageons nos clients à photographier leur atelier, leur équipe et leurs réalisations. Ces images convertissent mieux qu'un cliché générique de bureau vitré, et elles vous appartiennent. Le sujet rejoint plus largement la question de la propriété de ce qui est livré, que nous traitons dans à qui appartient votre site.
Où ce travail entre dans nos offres
Sur un site que nous créons dès 900 HT, la préparation des visuels est incluse dans la production : les images sont dimensionnées, converties et nommées avant la mise en ligne, et le texte alternatif est renseigné page par page. La maintenance WordPress à 500 HT / an joue ensuite le rôle de garde-fou, car la dérive vient rarement du site livré : elle vient du visuel de 6 mégaoctets déposé dans un article dix-huit mois plus tard. Le rapport mensuel signale cette dérive avec la page concernée.
Une fois les images assainies, le cache prend le relais pour le reste du gain, ce que nous détaillons dans notre article sur le réglage du cache WordPress. Vous constaterez alors que le score PageSpeed bouge enfin, parce que la cause principale a été traitée et non contournée. Nous travaillons à distance dans toute la France et en Suisse, avec le même montant hors taxes en euros et en francs.
Si la photographie de votre page d'accueil met plusieurs secondes à apparaître sur un téléphone, envoyez-nous l'adresse de votre site. Nous pesons vos visuels page par page et nous vous rendons la liste des fichiers à reprendre, avec le poids visé pour chacun.