La taille des images dans WordPress est plus complexe que vous ne le pensez. Il est essentiel de comprendre comment les tailles d’image fonctionnent dans WordPress, quelles sont les tailles d’image par défaut, et comment définir des tailles d’image personnalisées pour gérer efficacement votre site web.

Ces connaissances vous permettront de disposer du type d’images approprié, dans des tailles adéquates et aux bons endroits, afin de tirer le meilleur parti de votre stratégie de contenu visuel.

Ces tactiques amélioreront également la valeur de partage de vos articles, ce qui se traduira par une visibilité et un trafic accrus. Les statistiques révèlent que les lecteurs ne se souviennent que de 10 % du contenu textuel qu’ils ont lu après trois jours, mais ce chiffre grimpe à 65 % si vous ajoutez des images visuellement attrayantes à votre contenu.

Dans ce guide complet, vous apprendrez tout ce que vous devez savoir sur les tailles d’images de WordPress.

Excité ? C’est parti !

Comment WordPress gère les images que vous téléversez

Le téléversement d’images sur WordPress est assez simple, mais il y a beaucoup de choses qui se passent dans l’administration de WordPress lorsqu’elle les traite.

La première chose que fait WordPress lorsque vous téléversez une image est de créer trois tailles différentes de votre image. Cela signifie que vous vous retrouvez avec quatre images pour chaque image que vous téléversez :

WordPress crée toutes ces tailles différentes pour servir vos images dans la taille la plus appropriée pour chaque visiteur. Votre site web affichera toujours les bonnes images à vos lecteurs en fonction de l’appareil qu’ils utilisent, ce qui accélère et améliore leur expérience.

Vous pouvez toujours modifier vos images manuellement pour obtenir ces tailles supplémentaires, mais le faire avec précision dans un outil comme Photoshop n’est pas une mince affaire. Cela implique une bonne dose de travail fastidieux, c’est pourquoi WordPress vous épargne cette peine.

Comprendre la taille des images sur WordPress peut sembler simple, mais si vous ne disposez pas des bonnes connaissances, vous risquez de passer à côté de visiteurs et d'opportunités de partage de contenu.Click to Tweet

Taille des images WordPress : Choses essentielles à garder à l’esprit

Avant d’aborder les aspects plus techniques de la taille des images WordPress, vous devez connaître quelques points essentiels.

Nous avons discuté de la façon dont WordPress crée pour vous trois tailles d’images par défaut, mais que faire si vous avez besoin d’une taille différente des valeurs par défaut de WordPress ? Et si vous voulez plus de tailles en général ?

Bonne nouvelle ! Vous pouvez le faire facilement. WordPress vous permet de modifier les tailles d’image par défaut et d’ajouter autant de tailles supplémentaires que vous le souhaitez. Nous allons vous expliquer cela plus en détail dans un instant.

Mais avant d’en arriver là, sachez qu’il existe des conditions spécifiques pour que cela fonctionne comme vous le souhaitez.

L’une d’elles est que vous devriez essayer de téléverser vos images dans la plus grande taille dont vous aurez besoin. WordPress les réduira pour les petits appareils, mais il utilisera la taille originale lorsque l’image doit être la plus grande possible.

Supposons que vous téléversez une image qui est plus petite que la plus grande taille que vous avez définie dans WordPress. Dans ce cas, WordPress n’affichera pas correctement cette image particulière dans sa plus grande taille. De plus, il y aura une perte de qualité notable.

Cela dit, vous devez également vous assurer que vous ne téléversez pas d’images dont la taille est supérieure à la taille maximale nécessaire. WordPress n’utilisera jamais de telles images, car elles sont trop grandes et occupent inutilement de l’espace sur votre serveur.

Vous devez donc vérifier la taille de l’image que vous téléversez et vous assurer qu’elle a la taille maximale nécessaire avant de la téléverser sur WordPress, mais pas plus grande que cela.

Où et comment WordPress stocke-t-il vos images ?

En ce qui concerne votre panneau d’administration, WordPress stocke vos images téléversées dans la médiathèque. Vous pouvez voir toutes vos images téléversées en passant votre souris sur l’option Média et en cliquant sur Médiathèque.

La médiathèque de WordPress.
La médiathèque de WordPress.

Vous pouvez les trier par type de média (image, vidéo, audio, etc.) et par date. Notez toutefois que vous ne pourrez trier les images par date que si vous n’avez pas désactivé cette fonction dans les Réglages.

Il y a également un champ de recherche sur la droite pour vous aider à retrouver votre image téléversée. Il suffit de saisir un mot que vous avez utilisé dans le titre, la légende ou la description de votre image pour la retrouver.

Vos images sont stockées dans les répertoires de téléversement de votre site (wp-content/uploads/). Pour accéder à ce répertoire, vous devez utiliser un client FTP / SFTP. Il y aura plusieurs sous-répertoires dans le répertoire des téléversements de votre site contenant vos images par date de téléversement (en supposant que vous ayez laissé activée l’option de tri par date dans vos Réglages).

Vous pouvez également créer des répertoires personnalisés pour vos fichiers multimédias, mais nous vous recommandons de ne le faire que si vous vous considérez comme un utilisateur avancé.

Quelles sont les tailles d’image par défaut de WordPress ?

Lorsqu’il s’agit de WordPress et de la taille des images, il y a toujours quatre tailles différentes, avec votre fichier image original et les trois tailles différentes que WordPress crée par défaut :

Encore une fois, comme nous l’avons mentionné précédemment, vous voudrez téléverser vos images en 1024 px si vous prévoyez d’utiliser uniquement ces tailles d’image par défaut. Cela permettra à vos images d’être servies correctement, même à la taille la plus grande, ce qui peut ne pas être possible si votre image est d’une taille plus petite que la taille la plus grande utilisée par WordPress (qui est de 1024 px par défaut).

Modifier les tailles d’image par défaut (et quand il faut le faire)

Si les tailles d’image par défaut de WordPress conviennent à la plupart des utilisateurs, certains d’entre eux peuvent avoir des exigences différentes. Vous pouvez préférer une taille légèrement supérieure pour vos miniatures ou une taille inférieure pour les grandes images.

Il serait judicieux de modifier les tailles par défaut de WordPress lorsque vous modifiez la plupart des images que vous téléversez parce que les tailles par défaut de WordPress ne sont pas adaptées à votre cas d’utilisation.

Avant d’ajouter de nouvelles tailles d’images personnalisées en plus des tailles d’images par défaut, sachez que vous allez stocker beaucoup plus de fichiers d’images que nécessaire dans la base de données de votre site. Cela peut entraîner des problèmes de performance pour votre site et consommer plus d’espace qu’il n’en faut.

Il en va de même pour les sites basés sur des images qui doivent respecter des tailles d’image spécifiques. Les photographes, les concepteurs et les autres personnes qui diffusent des images lourdes aiment que la taille des images soit la même partout sur le site afin d’assurer l’uniformité.

De même, certaines pages d’atterrissage doivent afficher des images de taille particulière, et les tailles d’image par défaut de WordPress peuvent ne pas convenir. Et une boutique eCommerce doit généralement utiliser des miniatures plus grandes, qui révèlent plus de détails.

Il y a beaucoup d’autres raisons pour lesquelles vous pouvez vouloir modifier les tailles d’image par défaut, mais vous avez compris l’idée.

WordPress le comprend aussi, c’est pourquoi il vous permet de modifier ces valeurs par défaut.

Étapes à suivre pour modifier les tailles d’image par défaut

Voici la procédure à suivre, étape par étape, pour modifier la taille des images par défaut de WordPress.

Étape 1 : Passez votre souris sur Réglages et cliquez sur l’option Média qui apparaît :

Réglages Média de WordPress pour modifier la taille des images par défaut.
Réglages Média de WordPress pour modifier la taille des images par défaut.

Étape 2 : Changez les tailles en fonction de vos besoins en modifiant les chiffres comme nous l’avons fait ci-dessous:

Exemples de tailles d'images mises à jour dans les réglages des médias.
Exemples de tailles d’images mises à jour dans les réglages des médias.

Étape 3 : Cliquez sur le bouton Enregistrer les modifications en bas.

Désormais, toutes les images que vous téléverserez seront dans ces nouvelles tailles par défaut.

Certains tutoriels vous suggèrent de saisir « 0 » pour les tailles d’image par défaut. Cependant, nous vous le déconseillons, même si cela peut vous aider à gagner de l’espace.

Si vous changez ces valeurs en « 0 », WordPress utilisera votre image en taille réelle (originale) à tous les emplacements et sur tous les appareils, ce qui entraînera un pic massif d’utilisation de la bande passante sur votre site. En outre, cela ralentirait presque certainement le temps de chargement des pages pour les sections qui affichent un grand nombre de ces images.

Comment ajouter des tailles d’images personnalisées à WordPress

Si vous avez besoin de modifier toutes vos anciennes images pour les adapter à ces nouvelles tailles, vous pouvez utiliser plusieurs excellentes extensions, dont nous parlerons en détail ci-dessous.

Pour les utilisateurs qui ont tendance à utiliser de nombreux types d’images différents, il peut être essentiel de disposer de plus de tailles d’images que les trois tailles par défaut proposées par WordPress.

Les tailles d’image par défaut peuvent suffire pour les types d’images standard, mais pour des éléments tels que les graphiques de fenêtres pop-up, les widgets ou les images de diaporamas, vous aurez probablement besoin de plus de tailles d’image.

Les tailles d’image personnalisées vous offrent la possibilité d’améliorer la fonctionnalité de votre site WordPress et de gagner un temps fou à redimensionner vos images une par une.

Maintenant que nous avons établi cette base, examinons de plus près le processus d’ajout de ces tailles d’images personnalisées sur votre site WordPress.

Deux options s’offrent à vous. La première est d’utiliser une extension qui gère tout pour vous en quelques clics. La seconde est la méthode manuelle qui consiste à ajouter les chaînes de code nécessaires dans les fichiers de votre site.

Commençons par la méthode de l’extension.

Ajout de tailles d’image personnalisées avec Image Regenerate & Select Crop

L’extension Image Regenerate & Select Crop va plus loin que Regenerate Thumbnails (dont nous parlons plus loin), permettant plus de personnalisation et de fonctionnalités.

En plus de vous permettre de modifier les tailles d’image par défaut, elle vous permet également de régénérer toutes les images existantes pour qu’elles correspondent à vos tailles d’image préférées, de définir des options de recadrage par défaut pour les images et de régénérer les miniatures.

Options de taille d'image personnalisées via l’extension Image Regenerate & Select Crop.
Options de taille d’image personnalisées via l’extension Image Regenerate & Select Crop.

Une fois installée et activée, vous pouvez créer autant de nouvelles tailles d’images personnalisées que vous le souhaitez via la page WordPress Réglages > Média.

Ajout manuel de tailles d’images personnalisées

Bien qu’il s’agisse d’un processus relativement simple et facile, la toute première chose à faire est de créer une sauvegarde de votre site web au cas où quelque chose se passerait mal lors de ces ajustements. Une fois le processus de sauvegarde terminé, rendez-vous dans le tableau de bord d’administration de votre site WordPress.

Une fois là, survolez l’option de menu Apparence et choisissez Éditeur (qui peut être appelé Éditeur de thème dans certains cas).

Ensuite, trouvez le fichier functions.php et vérifiez si le code suivant s’y trouve déjà (utilisez la fonction de recherche pour le localiser rapidement). S’il y est déjà, vous n’avez rien à faire.

Si elle n’est pas présente, vous devez ajouter cette chaîne au fichier :

add_theme_support( 'post-thumbnails' );
Ajout du hook pour les tailles d'images personnalisées dans functions.php.
Ajout du hook pour les tailles d’images personnalisées dans functions.php.

Après avoir ajouté ce code, cliquez sur le bouton Mettre à jour le fichier en bas de page pour activer la fonction qui vous permet de créer des tailles d’image personnalisées.

Il est maintenant temps d’ajouter le code pour les tailles d’images personnalisées que vous souhaitez. Recherchez la chaîne « add_image_size » dans votre fichier functions.php, car c’est là que vous devrez effectuer vos modifications :

add_image_size( 'my-custom-image-size', 800, 640 );

Plus précisément, vous devez mettre à jour ce qui se trouve entre les guillemets avec le nom que vous souhaitez donner à votre nouvelle taille d’image personnalisée. Nous vous suggérons de le garder simple et descriptif (par exemple, « main-post-image »).

Après avoir pris soin du nom, vous devez déclarer les tailles des images elles-mêmes. La première valeur numérique est la largeur de l’image, tandis que la seconde est la hauteur de l’image.

Voici une capture d’écran montrant notre exemple de code ajouté au fichier functions.php :

Ajout de dimensions personnalisées pour les images dans functions.php.
Ajout de dimensions personnalisées pour les images dans functions.php.

Comprendre le recadrage

Lorsqu’une image est réduite sans être recadrée, il s’agit simplement d’une version réduite de l’original. En revanche, lorsqu’elle est « recadrée » ou coupée, la partie recadrée est retirée de l’image finale.

C’est exactement comme couper physiquement une photo. Si vous prenez vos ciseaux pour faire un portrait et que vous coupez tout ce qui se trouve sous les épaules de la personne, vous avez « recadré » cette photo. Cela fonctionne de la même manière au niveau numérique.

L’objectif est de réduire la taille du fichier d’une image, car le recadrage n’est pas le bon choix. Vous supprimeriez des éléments que vous souhaiteriez peut-être conserver tout en maintenant une taille de fichier importante. Cela dit, le recadrage peut s’avérer utile pour les images qui doivent s’adapter parfaitement à une dimension spécifique, comme les images mises en avant ou les photos de profil.

Les sujets principaux peuvent être trop petits pour les images d’arrière-plan. Ils devraient néanmoins bénéficier de l’exposition nécessaire lorsqu’ils sont redimensionnés sans être recadrés. Déterminez donc ce qui fonctionne le mieux pour les différents types d’images que vous utilisez et réglez la fonction de recadrage en conséquence.

Lorsque vous ajoutez des tailles d’images personnalisées, vous pouvez faire en sorte que WordPress recadre automatiquement les images en fonction de la taille que vous avez définie et de la taille d’origine. Vous devez ajouter « true » à la fin du code.

Voici à nouveau l’exemple ci-dessus avec la fonction de recadrage activée.

add_image_size( 'name-for-your-custom-image', 800, 640, true );

Cependant, si vous ne voulez pas recadrer les images, vous pouvez soit mettre « false » au lieu de « true », soit ne rien mettre. Si vous ne mettez ni l’un ni l’autre, le code prendra automatiquement l’option « false ». De cette façon, WordPress ne recadrera pas vos images.

Ajout d’une taille d’image personnalisée à votre thème

Une fois que vous avez créé les tailles d’image personnalisées dont vous avez besoin, vous devez également mettre à jour le code de votre thème. Cette opération permettra à votre thème d’afficher ces tailles d’images personnalisées comme vous le souhaitez.

Si vous êtes un débutant complet en matière de modification du code, veuillez créer à nouveau une sauvegarde de votre site avant d’effectuer cette opération.

Maintenant, vous devez trouver votre fichier de thème dans la boucle de publication et y ajouter le code suivant :

the_post_thumbnail( 'your-specified-image-size' );

Pour trouver ce fichier, cliquez sur Éditeur de thème sous le réglage Apparence. Recherchez le fichier index.php – il s’agit du fichier de thème qui contient la boucle des articles que vous devez modifier.

Une fois que vous l’avez trouvé, ajoutez le code mentionné ci-dessus, comme indiqué dans l’image ci-dessous :

Ajout de taille personnalisée d'image dans le fichier index.php du thème.
Ajout de taille personnalisée d’image dans le fichier index.php du thème.

Là encore, il serait préférable que vous remplaciez la partie « new-homepage-feature » par le nom de la taille d’image personnalisée que vous avez créée.

Une fois que vous avez ajouté ce code et mis à jour le fichier, vous verrez la taille personnalisée d’image dans votre médiathèque. Téléversez une nouvelle image pour l’essayer.

Mise à jour des anciennes miniatures

Si la création et l’ajout de tailles d’image personnalisées sont très agréables, ils vous laissent une autre tâche à accomplir : qu’en est-il de toutes les anciennes images que vous avez déjà téléversées ?

Ne vous inquiétez pas, certaines extensions sont très pratiques pour cette tâche ! Voyons comment elles peuvent vous aider à prendre soin de vos anciennes miniatures.

Extension Regenerate Thumbnails

Regenerate Thumbnails vous permet de téléverser à nouveau et automatiquement les images dans les nouvelles tailles, y compris les tailles d’image personnalisées que vous avez ajoutées.

Pour l’installer, survolez l’option de menu Extensions et cliquez sur Ajouter. Puis saisissez « Regenerate thumbnails » dans le champ de recherche.

Installez l’extension Regenerate Thumbnails en cliquant sur son bouton Installer maintenant.

Installation de l’extension Regenerate Thumbnails.
Installation de l’extension Regenerate Thumbnails.

Une fois l’installation terminée, cliquez sur le bouton Activer pour commencer à l’utiliser.

Ensuite, survolez le menu Outils à gauche et cliquez sur Régénérer les miniatures d’images :

La page des réglages de l’extension Regenerate Thumbnails.
La page des réglages de l’extension Regenerate Thumbnails.

Vous pouvez cliquer sur Régénérer les miniatures pour toutes les [#] pièces jointes pour produire de nouvelles tailles d’image pour toutes vos anciennes images.

Comme vous pouvez le voir sur l’image ci-dessus, Regenerate Thumbnails liste également toutes les tailles d’images actuellement actives sur votre site.

Vous trouverez peut-être des tailles d’images que vous ne connaissiez pas. Souvent, celles-ci sont créées par des extensions, surtout si elles servent à améliorer l’aspect, la conception ou la fonctionnalité de votre site.

Utilisation de l’éditeur de taille d’image intégré à WordPress

Comme nous l’avons souligné précédemment, vous ne devriez créer que des tailles d’images personnalisées que vous utiliserez souvent. Pour les tailles d’image que vous prévoyez de n’utiliser qu’en de rares occasions, il est judicieux de modifier manuellement les tailles d’image en utilisant l’éditeur de taille d’image intégré à WordPress.

Nous allons vous expliquer rapidement comment utiliser l’éditeur intégré pour modifier la taille des images rapidement et facilement.

Tout d’abord, cliquez sur le menu Média pour accéder à la Médiathèque. Ensuite, cliquez sur l’image dont vous voulez ajuster la taille.

Cliquez ensuite sur le bouton Modifier l’image, juste en dessous de l’image :

Le bouton Modifier l'image.
Le bouton Modifier l’image.

Vous verrez la taille actuelle de l’image et pourrez l’ajuster ici. Il vous suffit de saisir la taille d’image souhaitée, puis de cliquer sur le bouton Redimensionner, et le tour est joué.

Modification des dimensions de l'image.
Modification des dimensions de l’image.

L’ajustement de la taille sera automatiquement sauvegardé dès que vous aurez cliqué sur Redimensionner. Si, pour une raison quelconque, la nouvelle taille de l’image ne vous convient pas, vous pouvez toujours revenir à la taille d’origine en utilisant l’option Restaurer l’image originale (juste en dessous du champ de la taille de l’image).

Modifier des images dans WordPress Gutenberg

Si vous utilisez Gutenberg, vous pouvez rapidement modifier la taille de vos images lorsque vous les ajoutez lors de la création d’un article.

Changer la taille de l'image via Gutenberg.
Changer la taille de l’image via Gutenberg.

Comme vous pouvez le voir dans l’image ci-dessus, lorsque vous téléversez une image lors de la création d’un article dans WordPress Gutenberg, vous pouvez sélectionner les tailles d’image existantes ou modifier la taille de l’image à partir de l’option de l’article.

Si vous avez ajouté vos nouvelles tailles d’image personnalisées au fichier de votre thème, vous les trouverez toutes dans le menu déroulant Taille d’image.

Vous pourrez également modifier la taille de l’image à l’aide du champ situé juste en dessous. Il vous suffit de saisir la taille souhaitée dans les champs, et l’image sera automatiquement redimensionnée selon vos nouvelles spécifications.

Optimiser vos images

Aucun guide sur les images n’est complet sans une mention de l’optimisation des images. Bien que nous ayons abordé l’optimisation des images de manière très détaillée, mentionner quelques conseils rapides ne fera certainement pas de mal.

Après tout, lorsque vous ajoutez des tailles d’image personnalisées, vous devez savoir comment optimiser vos images pour qu’elles n’affectent pas les performances de votre site et ne consomment pas plus de ressources serveur que nécessaire.

Cela dit, voici quelques conseils rapides pour vous aider à commencer à optimiser vos images.

Décider du type de fichier

Le simple fait de choisir le bon type de fichier pour vos images peut réduire considérablement leur taille. Bien qu’il existe de nombreux types de fichiers image, la grande majorité sont des fichiers JPEG ou PNG.

JPEG l’emporte haut la main lorsqu’il s’agit d’images en couleurs. De plus, vous pouvez compresser davantage les fichiers JPEG pour en réduire la taille avec une légère baisse de la qualité (si vous le faites correctement).

En revanche, le format PNG est généralement une meilleure option pour les dessins, le texte, la plupart des captures d’écran et les graphiques.

Redimensionner les images

Le redimensionnement des images est un moyen rapide et facile de réduire la taille du fichier de vos images. En règle générale, vous devez vous assurer que toutes les images de votre site sont aussi grandes que nécessaire.

Si la largeur maximale de votre site web est de 1200 px, il n’est pas judicieux d’avoir une seule image sur votre site dont la largeur est supérieure à ce maximum de 1200 px.

Nous avons également mentionné l’importance de ne pas créer de nouvelles tailles d’images personnalisées, sauf si vous en avez besoin, alors gardez également cela à l’esprit.

Tirer parti de la compression avec perte

La compression avec perte est un excellent moyen de réduire davantage la taille du fichier après avoir déjà optimisé vos images à l’aide d’autres méthodes.

Cela signifie qu’il faut se débarrasser de certaines données d’image, dont la suppression ne change pas grand-chose à la qualité de l’image, mais peut contribuer à réduire considérablement la taille du fichier.

Utiliser le chargement différé

Le chargement différé vous permet de donner la priorité au chargement des images sur les pages de votre site. Il charge les images en fonction du défilement de la page par le visiteur. Cela signifie que les images situées tout en haut de la page seront chargées immédiatement, mais que tout ce qui se trouve en dessous du pli ne sera pas chargé tant que l’utilisateur n’aura pas dépassé le pli.

Ce n’est pas tout, mais vous trouverez tout cela dans notre guide de l’optimisation des images, alors passons directement aux extensions d’optimisation des images que vous pouvez utiliser.

Extensions d’édition d’images pour WordPress

La beauté de l’utilisation de ces extensions est que vous pouvez effectuer une optimisation avancée des images en quelques clics, sans avoir à utiliser d’outils ou de codes avancés. De plus, la plupart de ces extensions sont gratuites, notamment pour optimiser un certain nombre d’images ou utiliser quelques fonctions d’optimisation de base.

Les statistiques montrent que les lecteurs s’en souviennent 55 % de plus lorsque vous ajoutez des images visuellement attrayantes à votre contenu. Apprenez à vous attaquer au problème de la taille des images sur WordPress et à rendre vos articles mémorables.Click to Tweet

Résumé

Vous savez maintenant tout ce qu’il y a à savoir sur la taille des images WordPress et comment tirer le meilleur parti des fonctionnalités et de la personnalisation que WordPress offre dans ce domaine. Vous devriez trouver l’optimisation des performances et des fonctionnalités de votre site web beaucoup plus facile maintenant que vous savez comment gérer vos images WordPress à l’intérieur et à l’extérieur.

Vous pouvez créer des tailles d’image personnalisées et les gérer soit directement dans le code de votre thème, soit à l’aide d’une extension conçue pour cette tâche spécifique. N’oubliez pas de mettre à jour vos anciennes miniatures chaque fois que vous prévoyez de mettre à jour une image – une tâche également facile, grâce aux extensions utiles que nous avons énumérées ci-dessus.

Avons-nous oublié quelque chose ? Laissez un commentaire ci-dessous si vous avez des difficultés à comprendre quoi que ce soit sur la taille des images WordPress !


Économisez du temps et de l’argent et optimisez les performances de votre site avec :

  • Aide instantanée des experts en hébergement WordPress, 24/7.
  • Intégration de Cloudflare Enterprise.
  • Une audience mondiale avec 29 centres de données dans le monde entier.
  • Optimisation avec notre surveillance intégrée de performance d’applications (APM).

Tout cela et bien plus encore, dans un seul plan sans contrat à long terme, avec des migrations assistées et une garantie de remboursement de 30 jours. Pour trouver le plan qui vous convient, Découvrez nos plans ou contactez nous.