Optimisation des images WordPress : compression de la taille, ajout de balises alt (vitesse et SEO)

Les images sont le “porteur de valeur” du site web, mais si elles ne sont pas gérées correctement, elles deviendront un “handicap” qui ralentira le site web, et elles manqueront également l'occasion d'améliorer le référencement. L'optimisation des images consiste essentiellement à “réduire le volume sans affecter l'effet visuel” et à “permettre aux moteurs de recherche de comprendre le contenu de l'image”.taille compriméeetAjouter une balise altsont les deux méthodes les plus élémentaires et les plus efficaces.

Tout d'abord, pourquoi optimiser les images ?

Il est important de comprendre l'importance de l'optimisation avant de prendre cette étape plus au sérieux :

• Amélioration de la vitesse de chargementLes images de grande taille et non optimisées peuvent allonger le temps de chargement d'une page et les visiteurs risquent de la quitter sans attendre (des études montrent que 53% visiteurs abandonnent une page qui met plus de 3 secondes à se charger).
• Économiser de l'espace sur le serveurLa taille de l'image compressée est plus petite, ce qui peut réduire l'empreinte de stockage du serveur et la consommation de trafic (ce qui est particulièrement important pour les serveurs qui facturent en fonction du trafic).
• Aide au classement SEOLes moteurs de recherche (par exemple Baidu, Google) ne peuvent pas “lire” les images directement, ils ne peuvent comprendre le contenu qu'à travers les informations textuelles (par exemple les balises alt), et l'optimisation des images peut leur donner plus de visibilité dans les résultats de recherche.
• Adaptation aux appareils mobilesLes utilisateurs de téléphones portables ont un trafic limité, les images de petite taille peuvent réduire la consommation de chargement et améliorer l'expérience mobile.

Deuxièmement, la compression de l'image : réduire le volume, sans perte de qualité de l'image.

Le principe de la compression d'images est de supprimer les informations redondantes des pixels (par exemple les différences de couleur indiscernables à l'œil nu) d'une image, ce qui permet de réduire la taille du fichier tout en conservant l'effet visuel. Recommandé pour les débutantsAutocompression par plug-inAucune opération manuelle n'est nécessaire.

Méthode 1 : Compression automatique à l'aide d'un plug-in (recommandée pour les débutants)

Plugins recommandés : Smush ou ShortPixel (la version gratuite suffit)

Avec Smush A titre d'exemple, les étapes sont les suivantes :

1. Installez le plug-in : Arrière-plan [Plug-in] → [Installer le plug-in] → Recherchez “Smush” → Cliquez sur [Installer] → [Activer].
2. Paramètres de base :
   • Après l'activation, allez sur la page des paramètres du plugin et cochez “Automatically compressed newly uploaded images” (les images nouvellement téléchargées seront compressées automatiquement, il n'est pas nécessaire de le faire manuellement).
   • Cliquez sur “Compression par lots” et sélectionnez “Compresser toutes les images” (pour les anciennes images qui ont été téléchargées dans la médiathèque).
3. Attente de la fin de la compression : le plugin affichera la progression de la compression et l'espace économisé (par exemple, “50 images ont été compressées, économisant 20 Mo d'espace”).

tranchantTraitement entièrement automatisé, prise en charge de la compression par lots, version gratuite pour répondre aux besoins des sites web de petite et moyenne taille (Smush version gratuite d'une seule image jusqu'à 5MB, ShortPixel version gratuite pouvant être compressée jusqu'à 100 images par mois).

Méthode 2 : compression manuelle avant le téléchargement (pour une optimisation extrême)

Si la taille de l'image est particulièrement importante (par exemple, la photo originale prise par l'appareil photo peut facilement dépasser 10 Mo), il est recommandé de la compresser manuellement sur l'ordinateur avant de la télécharger sur le site web :

1. Outils en ligne(Aucune installation de logiciel n'est nécessaire) :
   • TinyPNG (tinypng.com) : Prise en charge des formats PNG et JPG, taux de compression élevé, faible perte de qualité d'image et possibilité de télécharger 20 images à la fois.
   • Outil de compression d'images, prend en charge le format WebP (plus petit que le format JPG 30%-50%).
2. procédure：
   • Ouvrez l'outil → téléchargez l'image → attendez que la compression soit terminée → téléchargez l'image compressée → téléchargez-la dans la bibliothèque de médias de WordPress.

ScénarioLa compression manuelle permet de contrôler plus précisément la qualité de l'image.

Notes de compression :

• Les images ordinaires (telles que celles qui accompagnent les articles) sont compressées dans le format Dans la limite de 200KB C'est tout, le contrôle de l'image globale de la page d'accueil est dans Dans la limite de 1MB。
• hiérarchisation Format WebP(WordPress 5.8+ a un support natif), la taille est environ 50% plus petite que JPG avec la même qualité d'image.
• Évitez la surcompression : les taux de compression supérieurs à 80% peuvent rendre les images floues, en particulier celles qui contiennent beaucoup de texte (par exemple, les captures d'écran, les infographies).

Troisièmement, ajoutez des balises alt : pour que les moteurs de recherche “comprennent” l'image

“La balise ”alt“ (nom complet ”attribut alt“) est la ”description textuelle" de l'image, qui s'affiche lorsque l'image ne parvient pas à se charger en raison de problèmes de réseau. Plus important encore, le moteur de recherche comprendra le contenu de l'image grâce à elle, ce qui affectera le classement de l'image dans les résultats de recherche.

Pourquoi dois-je ajouter des balises alt ?

• Exemple 1 : une photo de “baskets rouges” ; s'il n'y a pas de balise alt, le moteur de recherche peut seulement savoir qu'il s'agit d'une photo ; ajoutez la balise alt “baskets rouges légères et respirantes”, le moteur de recherche sera associé aux termes de recherche liés aux “baskets rouges”. termes de recherche liés à "red trainers".
• Exemple 2 : lorsqu'une image ne se charge pas, le visiteur voit le texte de la balise alt et sait ce que l'image aurait dû être (au lieu d'un blanc ou d'une icône “image impossible à afficher”).

Comment ajouter des balises alt ?

Méthode 1 : Ajouter directement lors du téléchargement des images (recommandé)

1. Téléchargez une image (via la bibliothèque de médias ou l'éditeur) et, dans la fenêtre contextuelle Paramètres de l'image, trouvez la zone de saisie Texte alternatif (c'est-à-dire balise alt).
2. Complétez la description :
   • Soyez concis et précis (10 à 15 mots suffisent) et indiquez le contenu essentiel de l'image (par exemple, “façade du bureau de l'entreprise”, “extérieur d'un ordinateur portable de 2023”).
   • Évitez d'empiler les mots-clés (par exemple, “WordPress website builder website design company” comme description non valide).
   • Si l'image est décorative (par exemple, séparateur, motif d'arrière-plan), laissez-la vide ou indiquez “Image décorative” (pour éviter d'induire les moteurs de recherche en erreur).
3. Cliquez sur “Insérer dans l'article” et la balise alt prendra automatiquement effet.

Méthode 2 : Ajouter/modifier les balises alt pour les images téléchargées

1. Allez dans [Média] → [Bibliothèque], recherchez l'image que vous souhaitez modifier et cliquez sur l'image pour accéder à la page de modification.
2. Complétez ou modifiez le contenu de la case “Texte alternatif” à droite, puis cliquez sur [Mettre à jour].

Balises alt vs Titre vs Légende : ne vous y trompez pas !

De nombreux néophytes confondent ces trois concepts et font une simple distinction :

• balise alt (texte alternatif)Pour les moteurs de recherche et les échecs de chargement, qui affectent le référencement, doivent être remplis.
• TitreTexte à afficher lorsque la souris survole l'image (facultatif, convient pour des détails supplémentaires, par exemple “Cliquez pour voir l'image en haute résolution”).
• Description (légende)Texte affiché sous l'image (similaire à la légende d'une image, par exemple “Fig. 1 : Site de l'assemblée annuelle de la société”, à compléter si nécessaire).

IV. questions fréquemment posées par les nouveaux arrivants

1. Toutes les images doivent-elles être accompagnées d'une balise alt ?Presque. Outre les images purement décoratives (par exemple, les fonds de couleur unie, les bordures), d'autres images qui contiennent un contenu réel (images de produits, de personnes, de scènes, etc.) doivent être ajoutées en tant qu'exigence de base pour l'optimisation des moteurs de recherche.
2. Que dois-je faire si mes images deviennent floues après la compression ?Réduisez la force de compression (le taux de compression peut être ajusté dans le plugin), ou recompressez avec un outil de compression manuel (tel que TinyPNG) pour conserver une meilleure qualité d'image.
3. Les images au format WebP ne s'affichent pas sur les anciens navigateurs ?WebP est pris en charge par les navigateurs modernes (Chrome, Edge, Firefox, Safari 14+) et les navigateurs plus anciens (par exemple IE) ont été rarement utilisés sans que cela pose de problème. Pour des raisons de compatibilité, installez le plugin “WebP Express”, qui fournit automatiquement des alternatives JPG pour les navigateurs plus anciens.
4. Pas de changement dans la vitesse du site après l'optimisation des images ?Cela peut être dû à d'autres facteurs (par exemple, un serveur lent, trop de plugins), vous pouvez utiliser l'outil GTmetrix pour vérifier d'abord si la “taille de l'image” est toujours le problème principal.

L'optimisation des images est une opération “peu coûteuse et très rentable” : 10 minutes passées à configurer un plugin et à ajouter des balises alt peuvent améliorer considérablement la vitesse de votre site et ses performances en matière de référencement. Prenez l'habitude de “télécharger et optimiser” et votre site sera plus populaire auprès des visiteurs et des moteurs de recherche.