Images optimisées par WordPress : compression, chargement retardé

Les images sont une partie importante du contenu des sites web, mais elles sont aussi le "tueur numéro un" qui ralentit la vitesse - une image haute résolution non optimisée (par exemple 5MB) peut entraîner une augmentation du temps de chargement de la page de 3 à 5 secondes, ce qui fera directement perdre patience à l'utilisateur. La bonne chose est que l'optimisation des images est simple, grâce aux deux moyens principaux que sont la "taille compressée" et le "chargement différé", vous pouvez réduire le temps de chargement des images de plus de 50%. Dans cette section, nous utiliserons le plugin pour réaliser une optimisation entièrement automatique, qui peut être gérée par les débutants sans aucune connaissance technique.

Pourquoi les images doivent-elles être optimisées ? 3 données solides

• Les images représentent généralement 60%-80% du volume de chargement total d'un site web (bien plus que les autres contenus tels que le texte et le code).
• Pour chaque seconde d'augmentation du temps de chargement, le taux d'abandon des utilisateurs augmente de 20% (les utilisateurs mobiles sont particulièrement sensibles à la vitesse).
• Des images non optimisées peuvent directement faire baisser les scores de Google PageSpeed (ce qui affecte les classements en matière de référencement).

objectif principalLa compression de la taille de l'image 50%-80% sans perte notable de la qualité de l'image permet de charger à la demande les images qui ne sont pas celles du premier écran.

II. méthode 1 : compression d'images (réduction automatique du volume à l'aide de plug-ins)

Le principe de la compression d'images est de supprimer les données redondantes (par exemple, les informations sur le dispositif de prise de vue, les détails des pixels non affichés) tout en maintenant la qualité de l'image pratiquement inchangée à l'œil nu. Nous recommandons le plugin "Smush" pour une compression entièrement automatique, qui prend en charge le traitement par lots des images existantes et la compression automatique des images nouvellement téléchargées.

Étape 1 : Installer et activer le plugin Smush

1. Connectez-vous au backend de WordPress et allez dans "Plugins → Installer un plugin".
2. Recherchez "Smush", trouvez le plug-in étiqueté "Developed by WPMU DEV", et cliquez sur "Installer" → "Activer".

Étape 2 : Configuration de la compression automatique (aucun traitement manuel n'est nécessaire pour les nouvelles images)

Après l'activation, le plugin passera automatiquement à la page des paramètres, configurez-la comme suit :

1. Activer la compression automatiqueDans l'onglet "Paramètres", assurez-vous que l'option "Compresser automatiquement les images nouvellement téléchargées" est cochée (elle est cochée par défaut), afin que les futurs téléchargements soient automatiquement compressés sans qu'il soit nécessaire de le faire manuellement.
2. Sélection du mode de compression：
   • La "compression sans perte" (option par défaut) est recommandée pour les débutants : seules les données redondantes sont supprimées, aucune perte de qualité d'image, taux de compression d'environ 30%-50%.
   • Si vous recherchez un taux de compression plus élevé (par exemple, si la taille de l'image est encore trop importante), vous pouvez choisir "Lossy Compression" : une légère perte de qualité de l'image (à peine perceptible à l'œil nu), avec un taux de compression allant jusqu'à 60%-80% (doit être activé en cliquant sur "Advanced Settings" (paramètres avancés)).
3. Sauvegarder les paramètresCliquez sur "Enregistrer les paramètres" en bas de la page.

Étape 3 : Compression par lots d'images existantes (une seule opération, optimisation à l'échelle du réseau)

Si le site web contient déjà un grand nombre d'images non compressées (par exemple des images d'articles précédemment téléchargées), la fonction "Compression par lots" permet de les optimiser en un seul clic :

1. Sur la page du plugin Smush, cliquez sur l'onglet "Batch Smush" à gauche.
2. Cliquez sur "Démarrer maintenant" et le plugin analysera automatiquement toutes les images de votre bibliothèque multimédia.
3. Après l'analyse, cliquez sur "Appliquer Smush aux images XX", le système procédera à une compression par lots (le processus peut prendre quelques minutes, il n'est pas nécessaire d'attendre, il peut s'exécuter en arrière-plan).
4. Voir les résultats de la compressionLorsque la compression est terminée, le message "Espace total économisé" (par exemple, "12 Mo économisés") s'affiche et la comparaison du volume de chaque image avant et après la compression est indiquée.

Méthode 2 : Chargement différé (laisser les images se charger à la demande)

Le principe de la charge paresseuse est le suivant :L'image ne commencera à se charger que lorsque l'utilisateur fera défiler la page jusqu'à la position de l'image.De cette manière, le premier écran (la première zone que vous voyez lorsque vous ouvrez la page) sera chargé en premier. De cette manière, les images du premier écran (la première zone que vous voyez lorsque vous ouvrez la page) seront chargées en premier, et les images autres que celles du premier écran (telles que les images de l'article suivant et les images du pied de page) ne seront pas chargées pour l'instant, ce qui réduit considérablement le temps de chargement initial.

Activez le chargement différé en un seul clic avec le plugin Smush (aucun plugin supplémentaire n'est nécessaire)

Smush dispose d'un chargement différé intégré, il n'est pas nécessaire d'installer un plugin séparé avec des étapes de configuration :

1. Sur la page du plugin Smush, cliquez sur l'onglet "Delayed Loading" à gauche.
2. Cochez "Activer le chargement différé" et configurez comme recommandé ci-dessous :
   • "Type d'image dont le chargement est retardé" : Sélectionnez tout (image, avatar, vignette, etc.).
   • "Exclure les images du premier écran" : il est recommandé de cocher cette case (les images du premier écran ne sont pas retardées afin que les utilisateurs puissent voir rapidement le contenu principal lorsqu'ils ouvrent la page).
   • "Animation de chargement" : laissez cette option par défaut (une légère animation est affichée pour avertir les utilisateurs que l'image est en train de se charger).
3. Cliquez sur "Enregistrer les paramètres" et le chargement différé prend effet immédiatement.

Vérifier que le chargement différé est en vigueur

1. Ouvrez n'importe quelle page d'article du site web (contenant plusieurs images) et appuyez sur F12 pour ouvrir le navigateur "Developer Tools".
2. Cliquez sur l'onglet "Web" pour actualiser la page et observer le chargement de l'image :
   • Lors du chargement initial, seule la première image de l'écran est affichée dans la liste "Réseau".
   • En faisant défiler la page, les enregistrements de chargement de ces images n'apparaîtront dans la liste "Réseau" que lorsque les images ne figurant pas sur le premier écran seront affichées, ce qui indique que le chargement différé est en vigueur.

quatre. des conseils supplémentaires sur l'optimisation de l'image que les débutants doivent connaître

1. choisir le bon format d'image (plus fondamental que la compression)

Choisir le bon format avant de télécharger une image permet de réduire sa taille à la source :

• Photographies / Images complexesLe format WebP (30%-50% plus petit que JPG et avec une meilleure qualité d'image), le plugin Smush peut automatiquement convertir JPG/PNG en WebP (activez "Auto Convert to WebP" dans les "Paramètres avancés").
• Graphiques / Icônes simplesLes images doivent être au format PNG (fond transparent, petite taille), et non au format JPG.
• Ne jamais utiliser les formats BMP, TIFFCes formats sont volumineux et ne conviennent pas à une utilisation sur le web.

2. contrôler la taille des images (ne pas utiliser la fonction "réduction de la taille des images")

De nombreux débutants téléchargent une image haute résolution (par exemple 3000×2000 pixels) prise directement par leur appareil photo et l'affichent en 300×200 pixels via WordPress - c'est une erreur ! En effet, le navigateur chargera toujours la grande image d'origine, ce qui entraîne une perte de bande passante et de temps.

bonne approche：

• Avant le téléchargement, utilisez des outils d'image (par exemple "Paint" ou "Canva") pour recadrer la taille de l'image à la taille réelle d'affichage (par exemple 1200 pixels de large pour la bannière du premier écran).
• Si vous ne savez pas comment utiliser les outils d'image, vous pouvez installer le plugin "Imsanity" pour compresser automatiquement les grandes images téléchargées à une taille spécifiée (par exemple, une largeur maximale de 1200 pixels).

3. éviter l'utilisation abusive d'images (plus il y en a, mieux c'est)

• N'utilisez pas d'images pour ce que vous pouvez expliquer avec des mots (par exemple, des instructions simples étape par étape).
• Plusieurs images consécutives peuvent être fusionnées en une image tournante (par exemple, une présentation de produit) afin de réduire le nombre d'images chargées en même temps.

V. Résolution des problèmes courants

1) La qualité de l'image est-elle nettement moins bonne après la compression ?

• Si vous utilisez la "compression avec perte", vous pouvez réduire la force de compression dans les paramètres de Smush ("Paramètres avancés" → "Force de compression" sur 50%).
• Il est recommandé d'utiliser "Compression sans perte" + "Format WebP" pour équilibrer la taille et la qualité.

2. un chargement tardif entraîne un affichage anormal des images (par exemple, vides, mal alignées) ?

• Vérifiez que la première image de l'écran a été exclue (l'absence d'exclusion peut entraîner un retard dans le chargement de la première image de l'écran et un bref blanc).
• Si certaines images doivent être chargées immédiatement, vous pouvez saisir le nom de la classe CSS de l'image dans la case "Exclure" des paramètres de Smush "Chargement différé" (une simple connaissance du code est requise, les débutants peuvent désactiver temporairement le chargement différé sur la page où se trouve l'image).

3. aucune augmentation significative de la vitesse après l'optimisation ?

• Refaire le test avec GTmetrix (voir Outils pour vérifier la vitesse d'un site web), vérifiez le "graphique en cascade" pour confirmer que le temps de chargement de l'image est réduit.
• Si la lenteur persiste, elle peut être due à d'autres facteurs (par exemple, une réponse lente du serveur, un trop grand nombre de plug-ins) et doit être combinée à d'autres méthodes d'optimisation (par exemple, l'activation de la mise en cache).

court

L'optimisation des images est l'opération qui offre le meilleur retour sur investissement en matière d'optimisation de la vitesse du site - avec le plugin Smush, il faut 10 minutes pour la mettre en place, et vous pouvez réduire le temps de chargement des images de plus de 50%. Les principales étapes sont les suivantes : installer Smush → activer l'auto-compression et la compression par lots → activer le chargement différé (exclure les images du premier écran).

N'oubliez pas que le principe de l'optimisation des images est le "juste assez" : il n'est pas nécessaire d'atteindre le taux de compression le plus élevé ou de télécharger des images à très haute définition ; il est préférable de trouver un équilibre entre la qualité et la rapidité de l'image, afin que les utilisateurs puissent voir le contenu et le charger rapidement en même temps.