Images plus légères, blog plus rapide : optimiser un ancien

Un blog qui traîne n’est pas bon à jeter. Quand les pages mettent plusieurs secondes à s’afficher, on pense refonte complète, alors qu’une piste plus simple existe : sur un site ancien, les images accumulées, souvent sans compression ni vérification de format, pèsent la majeure partie du poids des pages. Traiter ces fichiers en ligne, sans toucher au code ni au thème, réduit le chargement. Voici une méthode par lots, avec repères concrets.

Pourquoi les images anciennes plombent le chargement sans qu’on le remarque

Sur un blog de cinq ou dix ans, la médiathèque est un grenier où les images se sont accumulées sans compression. Résultat : elles pèsent 60 à 80 % du poids d’une page. Une photo de 5 Mo, par exemple une illustration non compressée, peut faire passer le temps de chargement de 2 à 15 secondes, selon la connexion en ligne, ce qui n’est pas un détail d’ergonomie mais une perte d’audience directe.

Quand une page met plus de trois secondes à s’afficher, quatre visiteurs sur dix sont déjà partis, selon Think with Google, et ce chiffre suffit à justifier une action rapide, surtout si l’on sait qu’un visiteur mécontent ne revient pas. Sur un ancien blog, on ne va pas refondre le thème ni réécrire le code. On s’attaque d’abord aux fichiers qui ralentissent tout. Franchement, aucun hébergement ni plugin de cache ne compensera une image de 5 Mo laissée telle quelle.

Définir un repère de poids avant de toucher au moindre fichier

Avant de lancer une compression, il faut un seuil clair. La plupart des guides conseillent environ 150 Ko maximum par image. Cette barre des 150 Ko ne tient pas du dogme : une photo d’illustration détaillée peut monter un peu sans gêner, à condition qu’elle reste nette, tandis qu’une bannière ou une image de mise en avant peut tolérer davantage si son impact visuel le justifie. Pour une capture d’écran ou une vignette, descendre sous les 100 Ko est possible. Évitez de viser le poids le plus bas à tout prix au détriment du rendu.

À quoi bon viser 150 Ko pour une image minuscule ? Sur mobile, une illustration de largeur modeste n’a pas besoin de la taille d’origine en pixels. Le temps de chargement ne dépend pas seulement du poids du fichier, mais aussi de sa dimension d’affichage. Du coup, ce seuil de 150 Ko sert de garde-fou pour les images moyennes, mais on peut descendre bien plus bas sur les vignettes et les logos, car ces petits éléments n’ont pas besoin d’une résolution élevée pour rester lisibles, et leur poids réduit contribue directement à la rapidité du blog.

Vérifier la dimension d’affichage dans l’inspecteur prend quelques secondes. Une image réduite à la largeur de la colonne de contenu suffit amplement, alors qu’une bannière demande une taille supérieure, et le niveau de détail joue aussi : une photo de nuit très sombre se compresse autrement qu’une capture d’écran de tableau de bord, ce qui demande une observation attentive avant de se lancer. Ce regard rapide évite de traiter des fichiers qui auraient de toute façon besoin d’un recadrage.

Traiter les images par lot plutôt qu’une à une

La méthode qui change tout pour un ancien blog, c’est de ne pas ouvrir chaque fichier dans un éditeur, car repérer d’abord les images les plus lourdes via la médiathèque, les trier par taille, puis lancer un traitement groupé fait gagner un temps considérable sur tout le parc en une après-midi. TinyPNG et Compressor.io compressent les fichiers par lots. Un détour par monsite1.com aide à comparer les services d’envois groupés.

Les points de contrôle avant de lancer la compression

Plutôt que de compresser à l’aveugle, je passe toujours par une petite revue d’effectifs, car cela me permet de repérer les fichiers inutiles, les doublons et les erreurs de format, et de concentrer les efforts de compression sur ce qui en vaut vraiment la peine, sans risquer de détériorer des images qui auraient pu rester intactes. Ces vérifications ne prennent que quelques minutes et évitent de retravailler deux fois les mêmes fichiers. Voici ce qui mérite un coup d’œil avant le premier lot.

  • Une comparaison entre la taille d’affichage réelle et la taille du fichier, car une image très large ne sert à rien si son affichage final est réduit, et cette vérification évite de télécharger ou de conserver des fichiers inutilement lourds, ce qui fait gagner du temps lors du traitement par lots.
  • La chasse aux doublons, même quand deux fichiers portent des noms différents.
  • Est-ce que cette image a encore une raison d’être dans l’article, ou est-elle seulement décorative ?
  • Le tri entre photos, captures d’écran et illustrations, parce que le format de sortie ne sera pas le même.

Une fois ces contrôles faits, le traitement par lot devient presque mécanique. On sélectionne les fichiers, on choisit le niveau de compression, et on laisse l’outil travailler. Il faut juste garder une copie des originaux, parce qu’une compression trop agressive sur une image mal exposée peut révéler des artefacts disgracieux, et ces défauts, une fois appliqués à tout un lot, deviennent impossibles à corriger sans repartir des fichiers sources. Le vieux blog se met alors à respirer, sans qu’on ait touché à une seule ligne de code.

Une personne qui tape sur un clavier d'ordinateur portable

Choisir le bon format pour chaque famille d’images

Le format compte autant que le poids. Sur le web, trois formats dominent les médiathèques : PNG, JPEG et WebP. Le PNG convient aux captures d’écran et aux images avec texte ou aplats, mais il peut être lourd sur une photo, car il stocke chaque pixel sans perte, ce qui augmente considérablement le poids des fichiers pour les dégradés et les zones complexes, contrairement au JPEG qui utilise une compression avec perte. Le JPEG reste le choix par défaut pour les photographies, car il compresse bien les dégradés et les ombres. Le WebP, plus récent, offre un meilleur rapport qualité-poids, mais certains anciens navigateurs ne l’affichent pas.

Pour un blog high tech ou téléphonie, les captures d’écran de réglages et les photos de produits ne se traitent pas pareil. Une capture d’écran gagne à passer en PNG si elle contient du texte fin, puis à être réduite aux dimensions d’affichage. Une photo de téléphone sort mieux en JPEG ou en WebP, sans dépasser la barre des 150 Ko. Testez sur deux ou trois images avant d’appliquer le choix au lot entier.

Un allègement qui vaut mieux qu’une refonte

Réduire le temps de chargement d’un ancien blog passe rarement par une refonte complète. Traiter les images par lots, avec des repères de poids et de format, produit des gains sur l’audience et le confort de lecture, car chaque seconde gagnée sur le temps de chargement se traduit par une meilleure rétention des visiteurs et une expérience plus fluide, sans qu’il soit nécessaire de modifier la moindre ligne de code du thème.

On garde le thème, les articles, on allège ce qui ralentit. Les outils en ligne rendent cette opération accessible sans compétence technique. À quel moment un fichier de 5 Mo mérite-t-il encore de rester en ligne ?

Articles Similaires