Un tutoriel rapide aujourd'hui pour apprendre à redimensionner une image sur WordPress ! WordPress offre beaucoup d'options pour gérer les tailles d'images, créer des miniatures (vignettes) ou encore compresser chaque fichier.
Mais parfois, on a besoin d'une solution simple, pratique, efficace... et dans cet article, je vais vous montrer comment modifier la taille d'une image très facilement !
Quel est l'intérêt de redimensionner une image ?
On modifie avant tout la taille d'une image dans un souci d'optimisation de la performance web. En effet, plus une image est grande, en haute résolution, plus elle a tendance à peser lourd. Et si l'image pèse lourd, alors la page web mettra plus de temps à se charger, ce qui peut faire fuir les visiteurs, en particulier ceux qui sont sur mobile avec une connexion plus limitée.
Si l'expérience utilisateur est mauvaise, cela rejaillit sur d'autres aspects : les gens restent moins sur le site, donc sont moins susceptibles de lire vos articles, de les partager, de s'inscrire à votre newsletter ou de s'intéresser à ce que vous proposez (produits, services, contenu). Par ailleurs, un moteur de recherche comme Google aura plus de mal à explorer vos pages, ce qui peut avoir un effet négatif sur votre référencement naturel si le site est vraiment trop lent.
Pour cette raison, optimiser les images fait partie des bonnes pratiques SEO à mettre en place : cela passe par leur nom, leur description, le choix du format (jpg, png, formats performants comme le WebP ou l'AVIF), la compression (en gardant un certain niveau de qualité), le chargement (à travers le "lazy loading" par exemple), etc.
Bien choisir les dimensions de ses photos s'inscrit dans cette même logique d'optimisation.
WordPress redimensionne déjà vos images !
Depuis la version 5.3 de WordPress, le CMS va déjà effectuer un premier travail de redimensionnement si vous mettez en ligne dans un post une image trop grande, par exemple une photo sortant tout droit de votre appareil photo.
WordPress détecte tout simplement la largeur et la hauteur de l'image en pixels... et si l'une de ces valeurs dépasse 2560px, il va estimer que l'image est trop grande pour un usage sur le web et va alors la redimensionner, de telle sorte que sa plus grande dimension soit inférieure à ce seuil de 2560px.
Ici par exemple, si je mets en ligne une image de 6240*4160 pixels et 10,5 Mo sortant tout droit de mon appareil photo, vous voyez que WordPress la convertit automatiquement au format 2560*1707 pixels, avec un poids de 1 Mo.
Il renomme l'image en ajoutant "-scaled" à la fin pour indiquer la mise à l'échelle (zone surlignée sur la capture ci-dessous) et vous affiche malgré tout la version originale si nécessaire (indiquée par la flèche sur la capture).
Notez que vous pouvez désactiver cette fonction de redimensionnement automatique en entrant ce bout de code dans le fichier functions.php de votre thème WordPress ou thème enfant :
add_filter( 'big_image_size_threshold', '__return_false' );Vous voyez bien que malgré ce redimensionnement géré par WordPress, la taille de l'image et son poids restent élevés et susceptibles d'impacter le temps de chargement de votre site ou blog.
Redimensionner une image sur WordPress soi-même
Le plus simple est souvent de redimensionner les photos en amont de leur mise en ligne, avec un logiciel de photo. Mais tout le monde n'en prend pas le temps et l'habitude, je vais donc vous montrer une méthode pour modifier la taille a posteriori.
Pour aller plus loin, vous pouvez tout simplement ouvrir l'image dans la bibliothèque de médias, depuis le menu Médias > Médiathèque de WordPress, et cliquer sur le bouton "Modifier l'image".
Ensuite, entrez simplement vos dimensions personnalisées dans le bloc "Redimensionnement de l’image" qui s'affiche et cliquez sur "Redimensionner".
Lorsque c'est fait, WordPress vous le confirme par l'affichage d'un bandeau comportant le message "Image enregistrée".
Vous pouvez ensuite sauvegarder en cliquant sur "Mettre à jour" dans la colonne de droite. Lorsque c'est fait, WordPress va recharger la page et afficher la nouvelle taille de l'image ainsi que son nouveau poids, 1200*800 pixels et 370 Ko dans mon exemple.
Ca fait partie des outils tout simples dont on ignore parfois l'existence et qui se révèlent bien pratique pour gérer ses fichiers !
Vous allez me dire : comment savoir quelle taille en pixels choisir si on n'est pas à l'aise avec le code ?
Vous pouvez installer la petite extension "Web Developer" sur Google Chrome. Ensuite, cliquez sur l'onglet "Images" puis sur "Display Image Dimensions".
Cette option va faire apparaître les dimensions directement sur les images de la page, vous pouvez ainsi savoir très facilement quelle taille vous souhaitez "reproduire" pour avoir le même rendu visuel.
Comment redimensionner plusieurs images en même temps ?
Si vous avez tendance à oublier systématiquement de redimensionner les images sur WordPress, il existe des plugins qui peuvent le faire pour vous.
La plupart des extensions d'optimisation des images proposent ce type de fonctionnalité, comme Smush ou EWWW Image Optimizer. Il existe aussi des extensions spécialisées dans le redimensionnement, comme Imsanity. Ce plugin permet de redimensionner des images en lots et de définir une taille d'image maximale à ne pas dépasser. Si vous uploadez un visuel supérieur à ces dimensions personnalisées, il sera redimensionné automatiquement.
L'extension "Resize Image After Upload" le fait aussi mais fonctionne seulement sur une image mise en ligne après l'installation du plugin.
Notez qu'il est possible que votre thème WordPress propose aussi des options dédiées à la mise à l'échelle des photos, n'hésitez pas à jeter un oeil à la documentation du thème pour regarder si c'est le cas ! Cela peut vous éviter d'installer une extension inutile.
