Comment servir facilement des images redimensionnées dans WordPress (étape par étape)

Si vous avez effectué un test de vitesse sur votre site WordPress, vous avez probablement vu un avertissement concernant la « diffusion d'images mises à l'échelle ». Des outils comme Google PageSpeed et GTmetrix le signalent souvent, mais ils ne l'expliquent pas clairement.

Tout ce que cela signifie, c'est que vos images sont plus grandes que l'espace qu'elles occupent. Cela peut ralentir vos pages, nuire au référencement et frustrer les utilisateurs mobiles.

Nous avons aidé les utilisateurs de WordPress à résoudre ce problème sans avoir à modifier chaque image manuellement ou à fouiller dans le code. Avec la bonne approche, vous pouvez le résoudre rapidement et l'empêcher de se reproduire.

Dans ce guide, nous vous montrerons comment diffuser des images mises à l'échelle dans WordPress étape par étape, sans compétences techniques nécessaires.

Pourquoi diffuser des images mises à l'échelle dans WordPress ?

Sur votre site Web WordPress, vous utiliserez probablement des images pour les articles de blog, les miniatures, les en-têtes de page, les images de couverture, et plus encore. Chaque image a un but, contribuant à créer une expérience visuelle pour vos visiteurs.

Selon votre thème, ces images sont affichées avec des dimensions spécifiques en pixels. Par exemple, votre image mise en avant peut s'afficher à 680 × 382 pixels, tandis qu'une miniature peut faire 100 × 100 pixels.

Il est important d'enregistrer les images avec les dimensions exactes nécessaires pour votre site. Par exemple, si l'espace de votre image mise en avant est de 680 × 382 pixels, le fichier image doit correspondre à ces dimensions.

Ne pas redimensionner les images peut entraîner des temps de chargement plus lents ou une expérience utilisateur de moindre qualité. Voici quelques raisons pour lesquelles :

• Les fichiers plus volumineux que nécessaire ralentissent les temps de chargement car les visiteurs doivent télécharger des données supplémentaires.
• L'utilisation d'images avec moins de pixels que nécessaire peut les rendre floues ou pixellisées à des tailles d'affichage plus grandes.
• Votre site web doit redimensionner les images à la volée, ce qui nécessite plus de temps de traitement avant que le contenu n'apparaisse aux utilisateurs.

Tout cela peut entraîner une expérience moins satisfaisante pour vos visiteurs et même nuire à votre SEO d'images.

C'est pourquoi lorsque vous testez les performances de votre site web avec des outils comme GTMetrix, vous verrez souvent des recommandations pour servir des images redimensionnées afin d'améliorer la vitesse.

Maintenant, voyons comment servir des images redimensionnées dans WordPress. Nous aborderons deux méthodes simples pour optimiser vos images en termes de performances.

• Méthode 1 : Servir des images redimensionnées avec un plugin (Plus facile)
• Méthode 2 : Servir des images redimensionnées manuellement
• Questions fréquemment posées sur le redimensionnement des images dans WordPress
• Ressources bonus

Méthode 1 : Servir des images redimensionnées avec un plugin (Plus facile)

La manière la plus simple de servir des images redimensionnées dans WordPress est d'utiliser un plugin qui redimensionne et livre automatiquement les images aux bonnes dimensions pour l'appareil de chaque visiteur.

Nous recommandons cette méthode pour la plupart des débutants car elle s'occupe de tout en coulisses. Elle est rapide à configurer et fonctionne bien pour les sites web typiques.

Le plugin gratuit Optimole est l'un des meilleurs plugins de compression d'images WordPress que nous ayons testés. Il redimensionne automatiquement vos images. Notez simplement que si votre site reçoit plus de 5 000 visiteurs par mois, vous aurez besoin de la version premium.

Pour commencer, installez et activez le plugin Optimole. Vous pouvez suivre notre guide sur comment installer un plugin WordPress si vous avez besoin d'aide.

Une fois activé, rendez-vous sur Média » Optimole. Il vous sera demandé de vous inscrire pour obtenir une clé API ou d'entrer celle que vous possédez déjà. Le processus est simple.

Confirmez simplement votre e-mail et cliquez sur le bouton « Créer et connecter votre compte ». Optimole connectera automatiquement votre site, sans avoir besoin de coller de clés ni de quitter le tableau de bord.

Optimole commencera alors à optimiser vos images en arrière-plan. Il choisit la bonne taille en fonction de l'écran de chaque visiteur et sert les images via son CDN mondial, afin que votre site reste rapide.

Dans l'onglet « Paramètres », vous verrez que vos images sont maintenant remplacées par des versions optimisées et redimensionnées. Cela se produit automatiquement et ne ralentit pas votre serveur, grâce au CDN.

Optimole active également le chargement différé par défaut. Cela signifie que les images qui ne sont pas visibles à l'écran ne se chargeront que lorsqu'elles seront nécessaires — ce qui contribue à réduire le temps de chargement des pages et à améliorer les performances.

Les paramètres par défaut fonctionnent bien pour la plupart des sites, mais vous pouvez affiner les choses dans le menu « Avancé ». Assurez-vous simplement de cliquer sur le bouton « Enregistrer les modifications » si vous apportez des mises à jour.

Cette méthode est idéale si vous souhaitez une solution « configurez et oubliez ». Elle est rapide, conviviale pour les débutants et ne nécessite pas de modifier chaque image manuellement.

Cela dit, ce n'est pas l'option la plus flexible. Si vous avez besoin d'un contrôle total sur les dimensions des images ou si vous souhaitez gérer vous-même l'optimisation, alors servir des images redimensionnées manuellement — pourrait être une meilleure solution.

Méthode 2 : Servir des images redimensionnées manuellement

Le redimensionnement manuel des images vous donne un contrôle total sur leur apparence et leurs performances. Cela demande un peu plus d'efforts, mais les résultats peuvent être plus précis et cohérents sur votre site.

Voici pourquoi cette approche offre plus de flexibilité :

• Vous pouvez choisir les dimensions exactes et les formats d'image avant de les télécharger.
• Vous pouvez réduire la taille des fichiers sans dépendre d'outils tiers.
• Vous évitez les limitations des plugins ou les plafonds mensuels de visiteurs.
• Vous obtenez des résultats plus cohérents sur différents thèmes et mises en page.

C'est pourquoi cette méthode est idéale pour les designers, les photographes et toute personne souhaitant un contrôle précis. Il existe trois façons de procéder :

1. En utilisant un logiciel de retouche d'images (Recommandé)
2. La Bibliothèque de médias WordPress
3. Dans vos paramètres de médias WordPress.

Commençons par l'approche du logiciel de retouche d'images.

1. Redimensionner les images avec un logiciel de retouche d'images

C'est la méthode que nous utilisons sur nos sites Web. Avec des outils comme Adobe Photoshop ou Affinity Photo, vous pouvez redimensionner vos images avant de les télécharger.

Vous pouvez sélectionner les bonnes dimensions en pixels, choisir le format dont vous avez besoin et enregistrer le fichier avec une taille plus petite, le tout en une seule étape.

Voici un exemple de l'outil de recadrage d'Affinity Photo en action :

En plus de choisir les bonnes dimensions, il existe d'autres moyens de garder les images légères et rapides à charger avant le téléchargement.

Pour plus de conseils, consultez notre guide sur comment optimiser les images pour les performances Web.

2. Redimensionner les images dans la médiathèque WordPress

Vous pouvez également redimensionner les images directement dans WordPress. L'éditeur d'images intégré vous permet de recadrer, faire pivoter, retourner et redimensionner les images téléchargées.

Pour ce faire, ouvrez l'article ou la page où l'image apparaît. Cliquez sur l'image, puis sur le bouton « Remplacer » et choisissez « Ouvrir la médiathèque ».

Cela ouvrira la médiathèque avec votre image sélectionnée.

Sur la droite, vous verrez des champs pour le texte alternatif, le titre, la légende et la description. En dessous, cliquez sur le lien « Modifier l'image ».

Cela vous mènera à l'écran de l'éditeur d'images.

D'ici, vous pouvez prévisualiser l'image et utiliser les outils d'édition de base. Pour redimensionner l'image, recherchez l'option « Mise à l'échelle de l'image » sur le côté droit.

Entrez la largeur souhaitée, et la hauteur sera mise à jour automatiquement pour conserver le rapport d'aspect.

Par exemple, une image de 2560×1637 peut être réduite à 1200 pixels de large en un seul clic.

Après avoir saisi la nouvelle largeur, cliquez sur le bouton « Mise à l'échelle » pour enregistrer la modification.

Gardez à l'esprit que vous ne pouvez réduire la taille des images dans WordPress, pas l'augmenter. Augmenter la taille peut réduire la qualité ou échouer complètement.

Besoin d'aide pour l'édition d'images dans WordPress ? Consultez nos tutoriels sur l'édition d'images de base et le recadrage des miniatures.

Ajustement des tailles d'image dans les réglages des médias

Par défaut, WordPress crée plusieurs versions de chaque image dans différentes tailles. Vous pouvez modifier ces tailles par défaut en allant dans Réglages » Médias dans votre tableau de bord.

Ici, vous pouvez ajuster les dimensions pour les tailles miniature, moyenne et grande. Cela affecte la façon dont les images sont mises à l'échelle et affichées sur votre site.

Si vous avez besoin de plus de tailles d'image, vous pouvez en créer d'autres en utilisant quelques lignes de code ou un plugin.

Après avoir modifié vos tailles d'image, vous devrez régénérer les miniatures pour les images existantes afin qu'elles utilisent les nouveaux réglages.

Lors de l'insertion d'une image dans un article ou une page, vous pouvez également choisir la taille à afficher dans le panneau des réglages du bloc.

Questions fréquemment posées sur le redimensionnement des images dans WordPress

Voici quelques questions courantes que les utilisateurs se posent sur la mise à l'échelle et la gestion des images dans WordPress.

update_option( 'medium_size_w', 0 );
update_option( 'medium_size_h', 0 );
update_option( 'large_size_w', 0 );
update_option( 'large_size_h', 0 );

Ressources bonus

Les médias et les images rendent un site Web WordPress attrayant. Voici quelques ressources supplémentaires qui vous aideront à tirer pleinement parti des capacités multimédias de WordPress.

• Comment ajouter une image principale dans WordPress
• Image de couverture vs. Image mise en avant dans l'éditeur de blocs WordPress (Guide pour débutants)
• Pourquoi vous ne devriez jamais télécharger une vidéo sur WordPress
• Comment créer une galerie d'images dans WordPress (étape par étape)
• Comment ajouter vos flux de réseaux sociaux à WordPress (étape par étape)

Nous espérons que ce tutoriel vous a aidé à apprendre comment servir des images mises à l'échelle dans WordPress. Vous voudrez peut-être aussi consulter notre guide sur l'optimisation SEO des images WordPress ou notre article sur l'utilisation de l'IA pour générer des images pour les articles de blog.

Si cet article vous a plu, abonnez-vous à notre chaîne YouTube pour des tutoriels vidéo WordPress. Vous pouvez également nous retrouver sur Twitter et Facebook.