Sur un blog de voyage, les images font rêver, rassurent et donnent envie de réserver. Elles sont aussi, très souvent, la principale cause d’une page lente. La bonne nouvelle, c’est que leur optimisation ne demande pas forcément de toucher au code : avec une méthode simple, vous pouvez réduire fortement le poids d’une page sans sacrifier la qualité visuelle.

Pourquoi commencer par les images

Les images représentent souvent la majorité des octets transférés. Une page avec une grande photo de plage et une galerie d’hôtel peut facilement dépasser plusieurs mégaoctets.

C’est donc le premier poste à examiner. Réduire une photographie de 2,5 Mo à 250 Ko produit un effet immédiat, surtout sur mobile.

L’erreur fréquente consiste à optimiser le cache et le serveur tout en publiant des fichiers issus directement d’un smartphone. Une seule image non préparée peut annuler les gains obtenus ailleurs.

Commencez par identifier les dix pages les plus visitées, puis classez leurs images par poids. Une poignée de fichiers explique souvent l’essentiel du problème. C’est le levier le plus rentable selon Jimenez Julien, et le plus simple à mettre en œuvre.

Servir la bonne dimension

Une image de 4 000 pixels de large n’a aucune raison d’être chargée dans une colonne qui n’en affiche que 800. Le navigateur peut la réduire visuellement, mais il télécharge tout de même le fichier complet.

Avant chaque publication, estimez la largeur maximale réelle. Pour une photo intégrée à un article, 1 200 à 1 600 pixels suffisent souvent. Pour une vignette, quelques centaines de pixels peuvent suffire.

Il faut aussi prévoir plusieurs tailles selon l’écran. Un mobile n’a pas besoin de recevoir la même image qu’un écran large. La plupart des CMS modernes génèrent plusieurs variantes et laissent le navigateur choisir la plus adaptée. Vérifiez simplement que votre thème les utilise réellement.

Sur une page consacrée à Kyoto, la photo panoramique du temple peut mériter une grande version. Les miniatures des restaurants voisins doivent rester légères.

Choisir le bon format

Tous les formats ne répondent pas au même besoin. Une photographie de paysage se prête bien au JPEG ou au WebP. Une illustration simple avec aplats peut être plus efficace en PNG, WebP ou SVG. Un logo vectoriel doit idéalement rester en SVG s’il doit être affiché à plusieurs tailles.

Le format WebP constitue aujourd’hui un bon choix par défaut pour de nombreuses images. Il offre généralement un poids inférieur au JPEG ou au PNG à qualité visuelle comparable. L’AVIF peut aller plus loin, mais le gain n’est pas toujours décisif sur de petites images.

La transparence change aussi la décision. Un logo transparent doit conserver des contours propres. Les captures d’écran contenant du texte supportent mal une compression forte.

En 2026, les formats modernes sont largement compatibles avec les navigateurs courants. Il reste néanmoins utile de vérifier le comportement du CMS et de prévoir une solution de repli lorsque le thème ou un outil tiers l’exige.

Compresser sans dégrader visiblement

La bonne compression n’est pas celle qui réduit le plus possible le fichier. C’est celle qui enlève les données invisibles tout en conservant une image crédible à l’écran.

Pour une photographie, commencez avec un niveau de qualité situé autour de 70 à 80 sur 100, puis comparez. La valeur exacte dépend du sujet. Un ciel uniforme, un coucher de soleil ou des cheveux fins révèlent plus vite les défauts qu’une rue animée.

Contrôlez l’image à sa taille réelle d’affichage. Un zoom excessif conduit souvent à rejeter une version pourtant acceptable.

Une méthode efficace consiste à exporter trois versions, par exemple à 65, 75 et 85 de qualité. Choisissez la plus légère qui reste propre. Sur vingt photos d’un road trip, cette discipline peut économiser plusieurs dizaines de mégaoctets. Supprimez aussi les métadonnées inutiles issues de l’appareil.

Déclarer les dimensions

Quand le navigateur ne connaît pas la largeur et la hauteur d’une image, il ne peut pas réserver sa place avant le chargement. Le texte, les boutons ou les cartes situés autour risquent alors de se déplacer brusquement.

Ce décalage est particulièrement gênant sur mobile. Un lecteur commence à lire une description d’hôtel, puis une photo arrive et repousse le paragraphe plus bas. Il peut même cliquer sur le mauvais lien si un bouton change de position.

Déclarer les dimensions permet au navigateur de calculer le bon ratio dès le départ. Même lorsque l’image s’adapte à l’écran, la mise en page reste stable.

Les CMS ajoutent souvent ces attributs automatiquement. Le problème apparaît davantage avec des blocs personnalisés, des constructeurs de pages ou des images injectées par un outil externe. Vérifiez donc le rendu final, pas seulement la médiathèque.

Différer ce qui n’est pas visible

Le chargement différé, ou lazy loading, évite de télécharger immédiatement les images situées sous la ligne de flottaison. Elles sont chargées à mesure que le lecteur descend dans la page.

Cette technique convient à une galerie ou à une sélection de destinations. Inutile de charger quinze photographies si l’utilisateur n’en voit que deux.

En revanche, l’image principale du haut de page ne doit généralement pas être différée. C’est souvent le contenu visuel le plus important, celui qui donne au visiteur le sentiment que la page est prête. La charger tardivement peut dégrader la perception de vitesse.

Ne cochez donc pas une option de chargement différé sur toutes les images. Ce qui est visible immédiatement doit être prioritaire. Ce qui se trouve plus bas peut attendre.

Rédiger un texte alternatif utile

Le texte alternatif décrit l’image lorsqu’elle ne peut pas être vue ou comprise visuellement. Il sert d’abord à l’accessibilité, notamment pour les personnes utilisant un lecteur d’écran.

Il peut aussi aider les moteurs de recherche à comprendre le contenu visuel, mais ce n’est pas une zone où répéter des mots-clés. « Vue sur les falaises d’Étretat au coucher du soleil » est utile. « Voyage France vacances Normandie hôtel pas cher » ne l’est pas.

Une image décorative peut recevoir un attribut alternatif vide. Une carte ou un graphique essentiel demande une description plus explicite.

Le bon texte alternatif dépend donc du rôle de l’image dans la page, pas seulement de ce qu’elle représente.

La procédure à appliquer avant chaque publication

Adoptez une checklist courte et constante. Vérifiez d’abord la dimension maximale utile, puis exportez une version adaptée. Choisissez le format selon le type d’image, compressez le fichier et contrôlez le résultat à l’œil.

Renommez le fichier avec un intitulé compréhensible. Importez-le dans le CMS, vérifiez que ses dimensions sont déclarées et que plusieurs tailles sont disponibles. Rédigez enfin le texte alternatif selon la fonction de l’image.

Avant de publier, ouvrez la page sur un smartphone et observez trois points : la photo principale apparaît-elle rapidement, la mise en page reste-t-elle stable et les images situées plus bas se chargent-elles seulement lorsqu’elles deviennent nécessaires ?

Cette vérification prend moins de deux minutes. Appliquée à chaque article ou fiche de destination, elle évite l’accumulation de centaines de fichiers trop lourds. L’optimisation d’images fonctionne surtout lorsqu’elle devient une règle éditoriale, pas une opération de nettoyage menée une fois par an.