How to Easily Serve Scaled Images in WordPress (Step by Step)

Avez-vous déjà visité un site et quitté en quelques secondes parce que les images ne se chargeaient pas assez rapidement ? C'est exactement ce que vos visiteurs pourraient vivre si vous ne servez pas d'images redimensionnées sur votre site WordPress. 

Ce problème se produit lorsque vos images sont trop grandes pour leur taille d'affichage, ce qui ralentit le chargement de votre site et affecte négativement l'expérience utilisateur.

Mais ne vous inquiétez pas, nous vous couvrons ! Suivez le tutoriel rapide ci-dessous pour apprendre comment servir facilement des images redimensionnées !

Pourquoi devez-vous servir des images redimensionnées ?

Les images redimensionnées sont des images qui ont été ajustées pour correspondre aux dimensions exactes auxquelles elles seront affichées sur une page web. Cela diffère des téléchargements originaux, qui ont généralement des tailles et résolutions beaucoup plus grandes.

Par exemple, votre image mise en avant originale peut mesurer 4000 x 3000 pixels, mais votre site web ne l'affiche qu'à 800 x 600 pixels. Si l'image originale est utilisée à la place de la version redimensionnée, votre site se chargera plus lentement.

Lorsque les images ne sont pas correctement redimensionnées, le navigateur doit les redimensionner manuellement à la volée. Cela ralentira le chargement de la page, obligeant les utilisateurs à attendre et pouvant augmenter le taux de rebond.

Il'est important d'utiliser des images redimensionnées car ne pas le faire peut entraîner plusieurs problèmes :

• Temps de chargement inutiles, car les utilisateurs doivent télécharger des fichiers plus volumineux que nécessaire.
• Images pixelisées ou floues, si l'image est trop petite et est étirée.
• Temps de traitement accru, car le navigateur doit redimensionner les images à la volée, ce qui entraîne des retards dans l'affichage du contenu.

Guide étape par étape

1. Utilisez des outils d'édition d'images

Cette méthode offre un redimensionnement d'images plus rapide en utilisant des outils d'édition. Vous pouvez utiliser des outils comme Adobe Photoshop pour créer des images correctement mises à l'échelle. Photoshop permet une personnalisation étendue afin que vous puissiez choisir les dimensions en pixels en fonction des exigences de taille.

Si vous'êtes à la recherche d'une alternative gratuite, les outils en ligne comme PhotoPea sont une bonne option. Mais. pour ce tutoriel, nous nous concentrerons sur Photoshop en raison de ses fonctionnalités complètes.

Pour redimensionner une image avant de la télécharger, suivez le tutoriel ci-dessous :

• Ouvrez votre image dans Photoshop.
• Cliquez sur le Image onglet et sélectionnez Taille de l'image.

• Dans la boîte de dialogue qui apparaît, modifiez la taille de l'image selon les exigences d'affichage de la page Web. 

Par exemple, si votre image originale mesure 1281 x 493 px et que vous souhaitez l'agrandir à 3600 x 2400 px, saisissez les nouvelles dimensions. 

• Modifiez le Résolution à 72 PPI pour une utilisation web, ou 300 PPI si vous avez besoin d'une haute qualité d'impression.
• Ensuite, choisissez une méthode de rééchantillonnage. Les deux options les plus appropriées pour l'optimisation web sont :

• Cliquez OK pour appliquer les modifications. Votre image est maintenant redimensionnée.
• Pour enregistrer l'image, ouvrez le Fichier onglet et sélectionnez Exporter.

• Cliquez Exporter sous et choisissez n'importe quel format de fichier et ajustez les paramètres pour obtenir la taille de fichier la plus petite possible sans perdre trop de qualité d'image.

2. Exploitez les tailles d'images intégrées de WordPress

Si vous préférez ne pas installer de logiciel tiers, vous pouvez utiliser l'éditeur d'images intégré à WordPress. Avec cet outil, vous pouvez effectuer des tâches d'édition d'images de base telles que le recadrage, le retournement et le redimensionnement.

Vous pouvez accéder à cette fonctionnalité en cliquant sur n'importe quelle image dans votre article ou votre bibliothèque multimédia. De plus, vous pouvez définir des tailles d'image personnalisées en modifiant le fichier functions.php de votre thème.

Pour simplifier les choses, commençons par un guide de base ci-dessous :

• Téléchargez votre image dans votre article WordPress. 

• Sélectionnez l'image, puis cliquez Remplacer et choisissez Ouvrir la bibliothèque multimédia depuis le menu.

• Dans la barre latérale, cliquez Modifier l'image.

• Vous serez dirigé vers l'éditeur d'image. Cliquez sur Redimensionner pour redimensionner une image

• Entrez le nouvelle dimension pour votre image. Par exemple, changez-le de 1198 × 744 px à 805 x 500 px. Le rapport d'aspect est contraint, donc l'autre valeur s'ajustera automatiquement en fonction de la largeur ou de la hauteur que vous saisissez.

• Cliquez sur Mise à l'échelle bouton pour appliquer les modifications.
• Votre image est maintenant mise à l'échelle et prête à être utilisée dans votre article.

3. Utilisez des extensions

• Installez et activez WP Meta SEO sur votre site WordPress.

• Depuis le tableau de bord de votre WordPress, allez à WP Meta SEO > éditeur d'images.

• Ouvrez les paramètres Image SEO & Redimensionnement HTML.

• Activez l'option Redimensionnement dynamique des images pour permettre à WP Meta SEO de redimensionner automatiquement les images en fonction de leur taille d'affichage.

• Définissez les valeurs maximales de largeur et de hauteur pour contrôler la façon dont les images sont redimensionnées sur le front‑end.

Une fois activé, WP Meta SEO ajustera automatiquement les dimensions des images lorsqu'elles sont affichées sur votre site, garantissant des tailles d'image optimales sans intervention manuelle. Cette approche améliore la vitesse de chargement des pages, renforce les performances SEO et offre une meilleure expérience utilisateur—en particulier pour les sites riches en images. 

Pour plus de détails, vous pouvez consulter la documentation officielle et la présentation des fonctionnalités :

• WP Meta SEO Fonctionnalité Image SEO & Redimensionnement HTML
• Dynamique Documentation du redimensionnement d'images

4. Mettez en œuvre des images réactives en utilisant l'attribut srcset

Le attribut srcset est utilisé dans la balise en HTML pour fournir différentes sources d'images pour diverses résolutions d'écran. En ajoutant cet attribut, le navigateur peut sélectionner l'image la plus appropriée en fonction de l'appareil de l'utilisateur.

Par exemple, si un utilisateur accède à votre site Web sur un appareil mobile avec un affichage à basse résolution, le navigateur chargera une image à résolution inférieure pour offrir une expérience plus fluide.

Si vous souhaitez savoir comment servir des images redimensionnées manuellement, suivez les instructions ci-dessous:

• Ouvrez le fichier HTML du site via votre éditeur de code.
• Localisez le balise pour l'image que vous souhaitez optimiser.

• Modifiez la balise et ajoutez l'attribut srcset, comme indiqué sur l'image. 

Dans cet exemple, 100w et 400w indiquent la largeur réelle de chaque image. Le navigateur utilisera ces informations pour décider quelle image charger sur l'appareil de l'utilisateur.

• Enregistrez les modifications et rechargez votre site Web pour voir le résultat.

Comment identifier les images non redimensionnées

Après avoir appris comment optimiser les images, il est également important d'identifier quelles images doivent encore être redimensionnées et lesquelles sont déjà optimisées.

Il existe deux méthodes courantes pour vérifier toute image non redimensionnée, soit en utilisant des outils, soit en effectuant un audit régulier du site. Suivez le tutoriel ci-dessous :

1. Utilisation de Google PageSpeed Insights

Il s'agit d'un outil essentiel qui propose des suggestions pour accélérer votre site web. Ces suggestions sont générées grâce à une analyse approfondie utilisant Google Lighthouse. Une suggestion courante consiste à redimensionner correctement toute image signalée comme non redimensionnée.

Pour effectuer une vérification rapide, vous pouvez suivre les instructions ci-dessous :

• Ouvrez Google PageSpeed Insight à https://pagespeed.web.dev.

• Collez le URL de votre page web dans le champ de saisie.
• Cliquez sur Analyser pour démarrer le processus.
• Attendez qu'il se termine. PSI vous fournira alors un rapport de performance.
• Faites défiler vers le bas pour trouver une entrée intitulée Dimensionner correctement les images.
• Si présent, vous verrez une liste d'images non redimensionnées trouvées sur votre site.

Si l'une de vos images est signalée comme non redimensionnée, Google PageSpeed Insights peut proposer plusieurs suggestions, notamment :

• Fournir des images dans des formats de nouvelle génération, tels que WebP, AVIF, JPEG XR, ou JPEG2000.
• Redimensionner correctement les images pour répondre à différentes exigences de taille, comme redimensionner à 1000 x 1000 px pour une page de détail produit, ou 400 x 400 px pour une page de liste de produits.
• Utiliser lazy loading, afin que seules les images visibles sur l'écran de l'utilisateur soient chargées immédiatement.

2. Réalisation d'un audit régulier du site

Réaliser des audits réguliers du site vous fournit des informations approfondies sur la santé et les performances de votre site.

Lors de l’audit, essayez de donner la priorité à la révision de l’architecture de votre site et de l’expérience utilisateur afin de découvrir d’éventuels problèmes.

Ce processus peut également révéler des opportunités d'optimisation d'images. Assurez-vous de tester votre site sur différents appareils, tels que mobile, tablette et ordinateur de bureau, afin de garantir une expérience cohérente.

De plus, faites attention à ce que les images soient correctement redimensionnées. Si elles ne le sont pas, n'oubliez pas de suivre le tutoriel ci‑dessus.

Conclusion

Utiliser des images redimensionnées est essentiel pour optimiser les performances du site, surtout sur les appareils mobiles. Cela aide vos pages à se charger plus rapidement et réduit le taux de rebond.

However, scaling a large number of images can be time-consuming. Consider using a plugin like WP Media Folder, which lets you automatically resize, organize, and replace images while ensuring they remain optimized for performance.