Dernières nouvelles de SeedProd

Tutoriels, astuces et ressources WordPress pour vous aider à développer votre entreprise

Comment redimensionner et modifier des images dans WordPress (la bonne méthode)

Comment redimensionner les images dans WordPress (étape par étape) 

Écrit par : avatar de l'auteur Stacey Corrin
avatar de l'auteur Stacey Corrin
Stacey Corrin est une spécialiste certifiée en marketing de contenu et en référencement, avec plus de 15 ans d'expérience dans la rédaction sur WordPress, le SEO et le marketing numérique. Elle gère le contenu pour SeedProd et RafflePress, couvrant les outils et stratégies qu'elle utilise et teste elle-même.
    
Revu par : avatar de l'évaluateur John Turner
avatar de l'évaluateur John Turner
John Turner est le fondateur de SeedProd. C'est un entrepreneur, développeur web, marketeur, administrateur système, DBA, technicien de support et il sait même cuisiner.

EN BREF : Comment redimensionner les images dans WordPress (étape par étape)

WordPress dispose d'un éditeur d'images intégré qui vous permet de redimensionner, recadrer, faire pivoter, retourner et restaurer des images sans aucun plugin supplémentaire. Voici comment le processus fonctionne.

  1. Ouvrez la médiathèque — Allez dans Média » Bibliothèque dans votre tableau de bord WordPress.
  2. Cliquez sur Modifier l'image — Sélectionnez votre image, puis cliquez sur le bouton Modifier l'image.
  3. Mettre à l'échelle pour redimensionner — Entrez votre largeur cible sous Mettre à l'échelle l'image et cliquez sur Mettre à l'échelle.
  4. Recadrer, faire pivoter ou retourner — Utilisez les boutons de la barre d'outils pour effectuer des modifications supplémentaires visuellement.
  5. Enregistrez vos modifications — Cliquez sur Enregistrer pour appliquer les modifications et mettre à jour le fichier stocké.
  6. Restaurer si nécessaire — Utilisez Restaurer l'image d'origine pour annuler toutes les modifications en une seule fois.

Vous essayez de comprendre comment redimensionner une image dans WordPress sans casser votre mise en page ou ralentir votre site ?

J'ai rencontré ce problème plus de fois que je ne peux le compter. Que j'ajoute des images de blog, des photos de produits ou des logos, les images trop grandes ralentissaient toujours la page et avaient l'air mal. C'est à ce moment-là que j'ai commencé à utiliser l'éditeur d'images intégré à WordPress, qui est plus rapide que la plupart des plugins et fait bien le travail.

Dans ce guide, je vais vous montrer exactement comment redimensionner, recadrer, retourner et faire pivoter des images dans WordPress. Vous apprendrez également à annuler ces modifications si nécessaire. Vous n'aurez besoin d'aucun outil ou code supplémentaire. Juste quelques clics dans votre tableau de bord.

Pourquoi devrais-je redimensionner les images dans WordPress ?

Redimensionner les images que vous ajoutez à WordPress est important pour deux raisons : cela évite que votre site ne ralentisse sous le poids de gros fichiers image, et cela économise de l'espace sur votre serveur d'hébergement.

Si vous utilisez des photos d'archives de haute qualité ou des images de votre appareil photo, il y a de fortes chances que la taille de votre fichier image soit beaucoup plus grande que ce dont votre site a besoin. Des dimensions d'image plus petites signifient des temps de chargement plus rapides, ce qui évite aux visiteurs de rebondir.

Je vais vous montrer comment trouver votre largeur idéale dans la section suivante.

Quelle est la meilleure taille d'image pour WordPress ?

Les bonnes dimensions d'image dépendent de l'endroit où l'image apparaît et du thème que vous utilisez. Cela dit, il existe des points de départ largement utilisés qui fonctionnent sur la plupart des thèmes WordPress.

Type d'imageLargeur recommandéeRemarques
Image mise en avant1200px de largeUtilisé pour le partage sur les réseaux sociaux et les listes de blog ; 1200x628px est la norme
Image du corps de l'article de blog800px de largeS'adapte confortablement à la plupart des colonnes de contenu
Miniature150x150pxPar défaut dans WordPress ; utilisé dans les widgets et les archives
Bannière / en-tête1920px de largeArrière-plans pleine largeur ; compresser fortement pour réduire la taille du fichier

La plupart des colonnes de contenu dans les thèmes WordPress populaires ont une largeur comprise entre 650px et 800px. Le moyen le plus rapide de vérifier la vôtre est de faire un clic droit n'importe où sur votre site et de sélectionner Inspecter dans Chrome.

Survolez votre zone de contenu et recherchez la colonne mise en surbrillance en bleu. L'info-bulle affiche la largeur en pixels. Ce nombre est votre largeur d'image maximale pour les images de corps.

Une fois que vous connaissez votre largeur cible, vous êtes prêt à redimensionner.

Comment redimensionner une image dans WordPress ?

Utiliser WordPress pour redimensionner les images est simple. Accédez à Médiathèque » Bibliothèque depuis votre panneau d'administration WordPress.

Allez dans Médias puis Bibliothèque depuis la zone d'administration de WordPress

Téléchargez ou cliquez sur l'image que vous souhaitez redimensionner dans WordPress.

Ajoutez l'image que vous souhaitez redimensionner dans WordPress

À partir d'ici, cliquez sur Modifier l'image.

Cliquez sur le bouton Modifier l'image pour ouvrir l'éditeur d'images WordPress

Sous le titre Redimensionner l'image, vous pouvez réduire la taille de l'image en entrant de nouvelles dimensions. Cet outil réduit l'image sans rien rogner, et WordPress conserve automatiquement le bon rapport hauteur/largeur.

Si vous entrez seulement une largeur, la hauteur sera automatiquement calculée en fonction du rapport de l'image ou vice versa.

Dans la première case, entrez la largeur de votre zone de contenu. Si vous n'êtes pas sûr de ce que c'est, utilisez l'outil Inspecter de Chrome : faites un clic droit sur votre site, sélectionnez Inspecter, puis survolez votre colonne de contenu. L'info-bulle affiche la largeur en pixels. Aucun code nécessaire.

Lorsque vous avez terminé, cliquez sur Redimensionner pour redimensionner l'image.

Cliquez sur mettre à l'échelle pour redimensionner les dimensions de l'image dans WordPress

Pour utiliser l'image redimensionnée, retournez à la page des détails de l'image et copiez l'URL comme indiqué dans la capture d'écran ci-dessous.

Copiez l'URL de l'image redimensionnée depuis la médiathèque WordPress

Et voilà ! Vous avez maintenant utilisé WordPress pour redimensionner une image, et vous pouvez l'utiliser où vous voulez.

Pour vous donner une idée de l'impact du redimensionnement sur la vitesse de votre page, voici les résultats de tests comparant l'image d'origine et l'image redimensionnée chargées sur un article de blog standard.

Nous avons utilisé l'outil de test de vitesse de site Web de Blog Tyrant pour cet exemple.

Voici le résultat du test de la taille d'image d'origine lorsqu'elle est ajoutée à un article de blog standard.

temps de chargement de la page avant de redimensionner une image dans WordPress

Et voici les résultats pour l'image redimensionnée.

Temps de chargement de la page après le redimensionnement de l'image dans WordPress

Même de petites différences dans la taille des images s'accumulent rapidement. Notre image d'origine pesait 2,5 Mo ; après redimensionnement, elle est tombée à 280 Ko. C'est une réduction de 90 % de la taille du fichier.

Sur un site avec des dizaines d'images, ces économies permettent à vos pages de se charger plus rapidement et évitent aux visiteurs de repartir.

WordPress vous permet également de recadrer, faire pivoter et retourner les images. Continuez à lire pour savoir comment.

Comment recadrer une image dans WordPress ?

Pour recadrer une image dans WordPress, nous suivrons les mêmes premières étapes que pour le redimensionnement. Accédez à Médiathèque » Bibliothèque, cliquez sur l'image que vous souhaitez recadrer, puis cliquez sur Modifier l'image.

Ensuite, cliquez et faites glisser votre souris sur l'image pour commencer le recadrage. Le recadrage consiste à couper les bords indésirables pour se concentrer sur une partie spécifique de l'image.

Cliquez et faites glisser pour recadrer votre image dans WordPress

Vous pouvez cliquer sur l'un des petits carrés pour ajuster la zone recadrée ou déplacer la zone autour de l'image. Une fois que vous êtes satisfait, cliquez sur l'icône Recadrer comme indiqué ci-dessous.

Cliquez sur le bouton Recadrer pour recadrer votre image dans WordPress

Cliquez maintenant sur Enregistrer. Vous avez recadré votre image.

Sélectionnez l'URL sur la page des détails de l'image pour utiliser l'image recadrée.

Copiez l'URL de l'image recadrée dans WordPress

Comment faire pivoter et retourner les images dans WordPress

La rotation et le retournement des images se trouvent dans le même éditeur d'images. D'abord, allez à Médiathèque » Bibliothèque, choisissez votre image et cliquez sur Modifier l'image.

Faire pivoter une image

Cliquez sur les boutons Pivoter à gauche ou Pivoter à droite pour faire pivoter votre image de 90 degrés à la fois.

Utilisez WordPress pour faire pivoter une image en cliquant sur faire pivoter à gauche ou faire pivoter à droite.

Si vous faites une erreur, ne paniquez pas. Cliquer sur le bouton Annuler réinitialisera l'image à la dernière étape.

Cliquez sur Annuler pour inverser la rotation de l'image dans l'éditeur WordPress

Cliquez sur Enregistrer lorsque vous êtes satisfait.

Retourner une image

Retourner une image fonctionne de la même manière. Dans l'éditeur d'images, cliquez sur le bouton Retourner verticalement ou Retourner horizontalement. Retourner met l'image en miroir : verticalement signifie à l'envers, horizontalement signifie de gauche à droite.

Pour retourner une image dans WordPress, cliquez sur retourner verticalement ou retourner horizontalement

Cliquez sur Enregistrer lorsque vous avez terminé.

Puis-je annuler les modifications d'images dans WordPress ?

Nous faisons tous des erreurs. Si vous avez recadré la mauvaise zone ou redimensionné l'image trop petit, il existe un moyen en un clic de revenir à l'original.

Regardez sur le côté droit de l’écran de modification d’image. Vous verrez un titre intitulé Restaurer l’image d’origine.

Apprenez à restaurer l'image d'origine dans WordPress

Cliquer dessus révèle un bouton qui vous permet de restaurer l'image à sa taille d'origine.

Cliquez sur le bouton Restaurer l'image pour ramener l'image aux paramètres d'origine.

Cliquez sur Restaurer l’image pour réinitialiser toutes vos modifications. Cela ramène l’image exactement comme elle était lorsque vous l’avez téléchargée pour la première fois, en supprimant tous les recadrages, retournements, rotations ou modifications de taille que vous avez effectués.

Qu'en est-il de la compression d'images et du WebP ?

Redimensionner une image modifie ses dimensions. La compression réduit sa taille de fichier sans modifier les dimensions. Les deux sont importants pour la vitesse du site, et ils fonctionnent mieux ensemble.

Après avoir redimensionné une image dans WordPress, la taille du fichier diminue. Mais la compression peut la réduire davantage, souvent de 50 à 80 % sans perte de qualité visible. J’ai testé cela sur mon propre site et la différence de temps de chargement est perceptible, en particulier sur les pages riches en images.

La manière la plus fiable de compresser des images dans WordPress est d’utiliser un plugin dédié. Deux options à essayer sont Imagify et Smush. Les deux compressent les images automatiquement lors du téléchargement, vous n’avez donc rien de plus à faire après la configuration initiale.

Encore une chose à savoir : WordPress prend en charge les téléchargements d’images WebP depuis la version 5.8. Les fichiers WebP sont généralement 25 à 35 % plus petits que les JPEG à qualité égale. Si votre thème et votre pile d’hébergement le prennent en charge, le téléchargement d’images au format WebP est l’un des moyens les plus simples d’optimiser les images pour WordPress sans toucher aux paramètres.

Questions fréquemment posées

WordPress redimensionne-t-il automatiquement les images lors de leur téléchargement ?

Oui. WordPress crée automatiquement plusieurs tailles d’image à chaque fois que vous téléchargez une image. Par défaut, il génère les versions miniature (150x150 px), moyenne (300 px de large), grande (1024 px de large) et pleine taille. Votre thème utilise ces tailles générées automatiquement dans différents endroits, comme les miniatures dans les listes de blog ou les images d’en-tête pleine largeur. L’outil Échelle d’image dans l’éditeur d’images ne modifie que le fichier d’origine stocké, pas ces tailles générées automatiquement.

Quelle est la meilleure taille d’image pour WordPress ?

Cela dépend de l’endroit où l’image apparaît. Un bon point de départ général : images mises en avant à 1200x628 px, images du corps des articles de blog à 800 px de large et miniatures à 150x150 px. La manière la plus fiable de trouver la largeur de contenu exacte de votre thème est d’utiliser l’outil Inspecter de Chrome, de faire un clic droit sur votre zone de contenu et de lire la largeur en pixels dans l’info-bulle.

Quelle est la différence entre redimensionner et compresser une image dans WordPress ?

Redimensionner modifie les dimensions de l’image (largeur et hauteur en pixels). La compression réduit la taille du fichier sans modifier les dimensions, en supprimant des données que l’œil ne peut pas détecter facilement. Les deux affectent la vitesse de la page, mais de différentes manières. Le redimensionnement avec l’éditeur intégré gère les dimensions. Un plugin de compression comme Imagify ou Smush gère la taille du fichier. Pour de meilleurs résultats, faites les deux.

Puis-je redimensionner plusieurs images à la fois dans WordPress ?

L'éditeur d'images intégré à WordPress ne redimensionne qu'une seule image à la fois. Pour un redimensionnement en masse, vous avez besoin d'un plugin. Le plugin Regenerate Thumbnails vous permet de régénérer toutes les tailles d'images en une seule fois après avoir modifié vos paramètres de médias. Pour un redimensionnement en masse à une dimension spécifique, des plugins comme Imsanity redimensionnent automatiquement les images lors du téléversement en fonction d'une largeur maximale que vous définissez.

Contrôlez vos images avec SeedProd

Redimensionner les images dans la médiathèque vous donne des fichiers propres et optimisés. Mais si vous voulez un contrôle total sur la façon dont ces images apparaissent sur vos pages, c'est un problème différent.

Le constructeur de sites Web par glisser-déposer de SeedProd vous permet de placer et de dimensionner les images exactement là où vous en avez besoin. Vous pouvez ajuster la largeur, définir l'alignement, ajouter de l'espacement et voir chaque modification en direct avant de publier. Pas de devinettes, pas de rafraîchissements pour vérifier à quoi cela ressemble.

Si vous reconstruisez une page ou en créez une à partir de zéro, cela vaut la peine d'essayer.

Si vous cherchez plus d'aide avec les images et les médias dans WordPress, consultez les guides suivants :

Merci de votre lecture ! Nous serions ravis d'entendre vos réflexions, alors n'hésitez pas à rejoindre la conversation sur YouTubeX et Facebook pour plus de conseils et de contenu utiles pour développer votre entreprise.

avatar de l'auteur
Stacey Corrin Spécialiste en marketing de contenu
Stacey Corrin est une spécialiste certifiée en marketing de contenu et en référencement, avec plus de 15 ans d'expérience dans la rédaction sur WordPress, le SEO et le marketing numérique. Elle gère le contenu pour SeedProd et RafflePress, couvrant les outils et stratégies qu'elle utilise et teste elle-même.

Avis de non-responsabilité : Notre contenu est soutenu par nos lecteurs. Cela signifie que si vous cliquez sur certains de nos liens, nous pouvons gagner une commission. Nous ne recommandons que les produits que nous pensons apporter de la valeur à nos lecteurs.

Commentaires

  1. Bonjour, j’essaie de redimensionner une image et j’ai essayé d’utiliser l’option Modifier l’image comme vous le montrez ci-dessus. Malheureusement, WordPress dit « Impossible de créer une nouvelle image ». Pourriez-vous m’aider avec ça ?

    1. Bonjour,

      La raison la plus probable est que mod-gd n’est pas installé.
      Si vous travaillez en ligne avec une société d’hébergement et que vous avez Cpanel comme plateforme d’hébergement, vous pouvez activer ce module dans Cpanel via
      PHP Selector—> extensions—> gd.

      Faites-moi savoir si vous avez d’autres questions.

      Cordialement,

  2. Le redimensionnement n’a rien fait. À moins que j’aie manqué une étape, j’ai suivi vos instructions et l’image est restée de la même taille qu’avant.

    Ouais, j’ai réessayé. Cela ne change pas la taille pour moi.

    1. Bonjour Travis,

      Pour que nous puissions vous aider davantage, pourriez-vous nous dire si vous recevez une erreur lors de la modification/enregistrement d’une image ?

      Merci,

  3. Cela ne fonctionne plus sur wp.com. Lorsque je clique sur l’image, « modifier l’image » est en haut. Lorsque je clique dessus, cela me permet seulement de faire pivoter, recadrer ou retourner. J’utilise wp depuis des années et j’ai toujours trouvé un moyen de contourner cela. Maintenant, il semble que la seule méthode consiste à la modifier hors ligne avant de la télécharger.

    Est-ce que je manque quelque chose ?

    1. Salut Scott,

      Tout d’abord, puis-je confirmer si vous utilisez la version gratuite de WordPress.com ou la version auto-hébergée de WordPress.org ? Ce guide s’adresse aux versions auto-hébergées de WordPress. Il est également conseillé de vérifier que votre installation WordPress est à jour pour tout problème.

  4. Bonjour, j’essaie d’ajouter des images via un widget en bas de ma page Web, mais sur la page Web, elles apparaissent plus grandes que l’image d’origine importée, ce qui rend l’image moins nette. J’ai redimensionné les images approximativement à 190/50 et 90/90 (pour les logos ronds) avant de les ajouter à ma médiathèque. Comment puis-je ajuster l’image sur la page Web pour qu’elle apparaisse comme la taille de l’image d’origine importée ? Dois-je ajuster cela dans le thème de la page Web ? Qu’est-ce qui me manque ici ?

    1. Bonjour Dann,

      Si vous téléchargez une image, vous pouvez la modifier ici : https://a.supportally.com/oCDtrF

      L’option de téléchargement d’une image en utilisant des tailles comme miniature/moyenne/grande, etc. n’est plus présente avec les blocs Gutenberg. Vous pouvez installer l’éditeur classique pour que cette option apparaisse : https://a.supportally.com/OZ9Pyz

      Cordialement,

  5. Bonjour. J’utilise la version gratuite de WordPress depuis plus de 10 ans et vous pouvez deviner que j’ai été très mécontent de leur nouvelle interface dernièrement. Donc, une question rapide : ont-ils supprimé l’option de définir les tailles d’image comme Grande, Moyenne, Petite et Miniature ??? Je vous jure que je ne la trouve plus nulle part dans le menu habituel ni en manipulant les « blocs » d’images/galeries.

    1. Bonjour Emerson,

      Si je comprends bien votre question. Les blocs auxquels vous faites référence sont les blocs d'image/galerie de Gutenberg pour WordPress et non le plugin SeedProd, n'est-ce pas ? Si oui, l'option n'est pas disponible avec les blocs Gutenberg. Vous pouvez redimensionner l'image en utilisant le lien Modifier. Voir ici : https://a.supportally.com/oCDtrF

      Ou vous pouvez installer le plugin Classic Editor. L'option de téléverser des images de différentes tailles est toujours disponible.

      Cordialement,

  6. J'ai essayé de redimensionner un jpg qui fait actuellement 850 x 369. Quand j'essaie de réduire l'échelle, il est indiqué que le fichier est limité à une largeur de 800. L'image apparaît beaucoup trop grande à 850 et 800. Que puis-je faire ?

    1. Salut Brenna, vous pourriez essayer de modifier l'image dans un éditeur d'images en ligne ou un logiciel de retouche d'images pour réduire la taille du fichier, puis la téléverser à nouveau sur votre site web.

  7. Je sais que j'aurais dû commencer mon blog avec des images plus petites, mais maintenant la page se charge si petite. Y a-t-il un moyen de téléverser de nouvelles images (plus petites) sans avoir à reformater chaque article ?

  8. 8 mai 2023

    Il n'y a pas de "mettre à l'échelle l'image" dans la fonction d'édition d'image, ni rien qui puisse être ajusté concernant la taille de l'image. Je ne parviens pas non plus à modifier la taille de l'image dans un éditeur d'article en utilisant le HTML. Il semble qu'il n'y ait tout simplement aucun moyen visible de le faire... MAIS je sais qu'il doit y avoir un moyen, sinon beaucoup abandonneraient WP. Pouvez-vous m'aider à comprendre cela ? Votre article est peut-être obsolète car WP ne veut pas permettre aux utilisateurs de redimensionner ou de mettre à l'échelle les images. Mais en quoi est-ce un bon plan d'affaires ? Frustrée dans le Massachusetts

    1. Salut Michael, les paramètres que vous voyez dans l'éditeur d'images peuvent sembler différents si vous utilisez WordPress.com, la version hébergée, par rapport à WordPress.org, la version auto-hébergée. Vous pouvez en savoir plus sur la différence entre les deux ici. Si vous rencontrez toujours des problèmes, nous vous suggérons de contacter les forums de support de la plateforme WordPress concernée.

      1. Cela tombe juste... exactement ce dont j'avais besoin et je vais passer à .org en utilisant vos formidables conseils. Merci !

        1. Je suis tellement contente que cela vous ait aidé ! Si vous avez besoin d'autre chose, n'hésitez pas à demander.

  9. Salut Stacey, y a-t-il une étape après avoir mis à l'échelle et "copié" le lien. Je suis ces étapes mais mes images ne sont pas mises à l'échelle dans mon article.

    Cordialement

    1. Salut Laura,

      Assurez-vous qu'après avoir mis votre image à l'échelle, vous quittez l'article sur lequel vous travaillez, actualisez votre page, puis modifiez à nouveau l'article et ajoutez votre image. Parfois, il faut un petit rafraîchissement pour afficher la nouvelle version mise à l'échelle. J'espère que cela vous aidera !

Les commentaires sont fermés.

[weglot_switcher]
Gérez ce site WordPress en discutant avec ChatGPT ou Claude. Plugin gratuit. Essayer gratuitement