Tailles d’image WordPress par défaut et Comment ajouter des tailles personnalisées

Lorsque vous téléchargez une image, WordPress fait beaucoup de travail en coulisses pour que vous puissiez servir l’image à vos visiteurs. Vous pouvez piggyback sur ce processus et ajouter des tailles d’image personnalisées pour éviter d’avoir à redimensionner les images manuellement.

Dans cet article, je vais vous expliquer comment et pourquoi WordPress crée différentes tailles d’image. Ensuite, je vais vous apprendre à ajouter vos propres tailles d’image en modifiant les fonctions.fichier php, régénérez les vignettes et ajoutez vos nouvelles tailles d’image au bloc d’images Gutenberg et / ou à la boucle WordPress.

Tailles d’image WordPress Expliquées

Chaque fois que vous téléchargez une image dans la médiathèque WordPress, voici les options de taille d’image supplémentaires créées par WordPress par défaut:

• Thumbnail
• Medium
• Medium Large
• Large

Si votre thème spécifie des tailles d’image supplémentaires, WordPress les crée également.

WordPress conserve également la taille d’origine que vous téléchargez et la nomme pleine comme en taille réelle.

Vous pouvez voir tous ces éléments (à l’exception de Medium_Large) dans le menu déroulant Taille de l’image du bloc d’image de Gutenberg lors de l’insertion d’une image dans une page ou un article.

Pourquoi WordPress crée-t-il autant d’images?

Les images sont comme des pantalons. Vous voulez vous assurer d’obtenir la bonne taille. Les pantalons et les images trop petits ont l’air idiots et il est douloureusement évident pour vous et pour tout le monde qu’ils ne vont pas bien. Des images trop petites sur votre site auront l’air étirées ou pixélisées.

En revanche, s’ils sont trop grands, c’est super inutile. Tu ne mettrais pas un pantalon fait pour un homme sur un bébé, n’est-ce pas? C’est tellement de tissu supplémentaire qui n’est même pas nécessaire. Ce bébé va se perdre dans une jambe de pantalon 😉

Les images sont les mêmes. Si votre image est trop grande pour le conteneur, vous perdez de la bande passante et du temps à la télécharger pour la servir sur votre page. Et pour quoi ? Pour rien.

Idéalement, les images en taille réelle que vous téléchargez doivent être suffisamment grandes pour s’adapter au plus grand conteneur d’images de votre site, mais pas plus grandes. Ensuite, lorsque vous utilisez des images sur votre site, vous devez utiliser l’image de taille exacte dont vous avez besoin.

Étant donné que la mise à l’échelle des images pour créer la bonne taille dans Photoshop ou un autre éditeur d’images prend un temps précieux, WordPress s’acquitte de cette tâche et le fait pour vous. Merci, WordPress!

Tout ce que vous devez faire est de choisir la taille appropriée lors de l’insertion d’une image dans votre site pour obtenir les avantages de performance de l’utilisation d’une image qui est juste.

Si les tailles d’image par défaut de WordPress ne sont pas parfaitement dimensionnées pour votre thème, vous pouvez ajuster les valeurs par défaut dans la section Paramètres des médias > ou ajouter des tailles personnalisées pour que vous ayez plus d’options à choisir.

Les tailles d’image par défaut sont les suivantes:

• 150px carré pour les vignettes
• 300px largeur pour les images moyennes
• 768px largeur maximale pour les images moyennes
• 1024px largeur maximale pour les grandes images.

Medium_large a été ajouté pour profiter de la prise en charge des images réactives, c’est pourquoi il n’est pas inclus dans la page des paramètres. En parlant d’images réactives

Images réactives

Toutes ces images de différentes tailles servent un autre but, vous ne devez donc pas définir les valeurs par défaut à zéro pour empêcher WordPress de les créer, comme le suggèrent certains tutoriels.

WordPress a ajouté des images réactives à core dans la version 4.4. Au lieu de remplir les attributs image src avec l’URL d’une seule image, WordPress a également ajouté srcset (ensemble de sources) qui est une liste d’URL d’images de différentes tailles.

Devinez quelles images il utilise pour créer cette liste? Oui, WordPress utilise les mêmes images à différentes tailles qu’il crée lorsque vous téléchargez une image.

Il offre cette liste au navigateur afin qu’il puisse sélectionner une image adaptée à l’appareil du visiteur. Si le visiteur utilise un appareil mobile, il recevra une image plus petite dans le srcset. S’ils visitent votre site sur un appareil Retina de bureau, ils recevront le fichier image Retina en taille réelle que vous avez téléchargé. Encore une fois, c’est pourquoi vous devez télécharger une image suffisamment grande pour répondre à ce besoin.

Lorsque vous ajoutez une taille d’image personnalisée, WordPress l’ajoute au srcset tant qu’elle a le même rapport d’aspect. Si la taille d’image personnalisée recadre l’image dans une forme différente, elle sera omise de l’ensemble.

« Optimisation Web » Des images plus grandes Dans WordPress

WordPress 5.3 a introduit une nouvelle façon de gérer les fichiers image volumineux en détectant et en générant une « taille maximale optimisée pour le Web ».

Comment ça marche ?

Lorsqu’une nouvelle image est téléchargée, WordPress détecte s’il s’agit d’une « grande » image en fonction de sa hauteur ou de sa largeur au-dessus de la big_image threshold.

La valeur de seuil par défaut est 2560px (cela peut être modifié à l’aide du nouveau filtre big_image_size_threshold).

Si la hauteur ou la largeur d’une image est supérieure à ce seuil, elle sera réduite – le seuil étant utilisé comme valeur max-height et max-width.

L’image réduite sera utilisée comme la plus grande taille disponible.

Vous voulez désactiver la mise à l’échelle ?

La mise à l’échelle est contrôlée par le filtre big_image_size_threshold.

Renvoyer false à partir du rappel du filtre le désactivera (comme ci-dessous):

add_filter( 'big_image_size_threshold', '__return_false' );

Vignettes WordPress et Taille de l’image en vedette

Nous avons maintenant atteint la partie de notre tutoriel où nous allons démêler tout le désordre des vignettes / images en vedette. Fondamentalement, le problème se résume à cela; parce que WordPress maintient la rétrocompatibilité à mesure qu’il évolue, les noms des choses changent, mais les fonctions se réfèrent toujours aux choses par leurs anciens noms.

La taille de l’image des vignettes WordPress a été introduite dans la version 2.9 mais a rapidement été changée en Images en vedette dans la version 3.0, mais hélas, le nom est resté. Ainsi, vous entendrez souvent des images en vedette appelées vignettes dans les tutoriels et même dans les noms de fonctions.

Voici quelques exemples:

• Si votre thème n’a pas d’images en vedette et que vous souhaitez activer cette fonctionnalité, vous ajouterez add_theme_support( 'post-thumbnails' ); à votre fichier de fonctions.
• Pour afficher la taille de l’image sélectionnée WordPress dans un thème, vous utiliserez la fonction the_post_thumbnail().

Les vignettes et les images en vedette partagent une taille par défaut de 150 pixels par 150 pixels. Si vous utilisez la fonction the_post_thumbnail() sans argument pour spécifier la taille, elle utilisera la taille carrée par défaut de 150 pixels.

Pour rendre cela moins déroutant pour vous-même afin que vous puissiez réellement utiliser la bonne taille, je suggère de créer une taille d’image personnalisée et de la nommer en vedette – grande ou quelque chose de similaire. Ensuite, lorsque vous souhaitez utiliser cette image dans you’re the loop, vous utiliserez the_post_thumbnail('featured-large').

Avant de commencer à Créer des tailles d’image personnalisées dans WordPress

Lorsque vous commencez à créer des tailles d’image personnalisées, évitez d’aller trop loin et de créer des images pour tous les objectifs imaginables. Sinon, vous brûlerez de l’espace sur votre hébergement et si vous utilisez un service d’optimisation d’image qui vous facture par image, vous passerez votre allocation d’image beaucoup plus rapidement.

Si votre plan vous permet d’optimiser 100 images mais que chaque téléchargement génère 9 tailles supplémentaires qui doivent également être optimisées, vous atteindrez votre limite une fois que vous aurez téléchargé 10 images. Gardez cela à l’esprit lorsque vous ajoutez des tailles personnalisées et choisissez des plans d’optimisation d’image.

Smush Pro n’a pas de limites d’optimisation d’image et est livré avec un CDN pour que vous puissiez garder l’espace de stockage de votre serveur libre. Vous pourrez ajouter plus de tailles d’image personnalisées que vous ne le feriez normalement. Pensez-y comme l’équivalent de mettre un pantalon MC Hammer fluide au lieu de petits jeans skinny sur ces bébés parce que le tissu est bon marché 🙂

Essayez Smush Pro gratuitement pendant 7 jours.

Comment ajouter des tailles d’image personnalisées dans WordPress

Voici le code que nous allons ajouter à notre fichier de fonctions pour ajouter des tailles d’image:

add_image_size( 'the-name-for-custom-image-size', 600, 400, true );

Cette fonction accepte 4 paramètres dans cet ordre:

1. Le nom que vous donnez à votre taille d’image personnalisée
2. La largeur de l’image en pixels
3. La hauteur de l’image en pixels
4. Si l’image est recadrée pour correspondre à la largeur et à la hauteur que vous avez spécifiées ci-dessus

Recadrage

Le paramètre de recadrage est un booléen, vous utiliserez donc true ou false. Si vous le laissez de côté entièrement, il sera par défaut false.

Si vous définissez le paramètre de recadrage sur true, WordPress recadrera votre image pour qu’elle corresponde aux dimensions que vous spécifiez lors de la création de l’image personnalisée.

Par exemple, si la taille de votre image personnalisée est un carré de 600 pixels par 600 pixels et que vous définissez le recadrage sur true, alors si vous téléchargez une image rectangulaire de 600 pixels par 800 pixels, 200 pixels seront coupés pour rendre l’image carrée.

add_image_size( 'custom-image-square', 600, 600, true );

Définir le paramètre de recadrage sur true est utile pour les tailles d’image qui doivent être exactes, comme les images en vedette ou les images d’archive post qui doivent parfaitement s’adapter à une certaine dimension.

Pour les images qui peuvent avoir plus de marge de manœuvre, telles que la taille de l’image de publication WordPress et les images sur des pages qui ont tendance à avoir des hauteurs et des largeurs variables, vous pouvez définir le recadrage sur false. Cela redimensionnera les images, mais cela ne changera pas la forme de l’image ni ne coupera les pixels.

Jetez un œil à notre guide de référencement d’images si vous essayez de générer du trafic vers vos sites avec vos images.

Régénération des vignettes

Une des étapes les plus importantes lorsque soit:

1. la modification des tailles d’image par défaut de WordPress
2. l’ajout de tailles d’image personnalisées ou
3. le passage à un nouveau thème ayant différentes tailles personnalisées

régénère les vignettes.

Dans ce contexte, les vignettes font référence à toutes les images supplémentaires créées par WordPress, y compris les tailles d’image personnalisées incluses dans votre thème et celles que vous créez via votre fichier de fonctions.

Lorsque vous modifiez la façon dont WordPress crée des images supplémentaires, cela n’affectera que les images que vous téléchargez à l’avenir. Il ne met pas à jour les images qui se trouvent déjà dans votre bibliothèque multimédia.

Pour modifier les images que vous avez déjà téléchargées, vous devrez utiliser le populaire plugin Régénérer les vignettes.

Après l’avoir installé, vous le trouverez dans la section Outils.

Lorsque vous régénérez vos vignettes dans vos nouvelles tailles, vous avez la possibilité de supprimer les anciennes tailles d’image inutilisées pour libérer de l’espace sur le serveur.

Comment ajouter des tailles d’image personnalisées à la liste déroulante du bloc d’images Gutenberg

Il vous suffit d’ajouter le code ci-dessous à votre fichier de fonctions si vous souhaitez que vos tailles d’image personnalisées apparaissent dans la liste déroulante du bloc d’images Gutenberg. Si vous avez créé une taille d’image personnalisée à utiliser en coulisses pour votre thème, vous pouvez ignorer cette étape.

Nous allons nous accrocher au filtre image_size_names_choose.

Dans le tableau, j’ajouterai le nom de la taille personnalisée que j’ai spécifiée dans la fonction add_image_size et le nom que je veux apparaître dans la liste déroulante entre parenthèses.

Comme je l’ai appris en faisant ce tutoriel, vous devrez régénérer les vignettes avant que l’image n’apparaisse dans la liste déroulante.

WordPress Ajouter un extrait de code complet de taille d’image

Ensuite, nous combinerons tout ce que nous avons appris en un seul bloc de code avec un exemple du monde réel.

Disons que vous souhaitez ajouter des tailles d’image personnalisées à votre blog.

Voici les tailles d’image que vous souhaitez ajouter:

• Une image en vedette de 1600px par 400px
• Une taille de 800px qui couvre la largeur de la section de contenu de votre blog

Étant donné que notre thème ne prend actuellement pas en charge les images en vedette, nous allons commencer par cela.

Vous verrez alors mes tailles personnalisées. Notez que je n’ai pas recadré les images qui vont couvrir la largeur du contenu du blog. Je recadrerai durement mes images en vedette car je veux qu’elles s’alignent parfaitement.

La seule image que je souhaite ajouter à la liste déroulante Gutenberg est l’image du blog car j’utiliserai la taille de l’image sélectionnée WordPress dans mon thème.

Après avoir ajouté ce code à mon fichier functions.php, l’étape suivante consiste à régénérer les vignettes.

Pour utiliser mon image personnalisée pour mes messages dans la boucle, j’ajouterai ce qui suit à single.php ou index.php

Voir comment j’ai ajouté 'featured-large' dans la fonction the_post_thumbnail()? Cela affichera mon image en vedette sous les titres de mes articles de blog, au-dessus de mon contenu.

Tailles d’image personnalisées Meilleures pratiques

Voici quelques conseils supplémentaires pour ne pas rencontrer de problèmes pour créer des images personnalisées dans WordPress.

1. Téléchargez toujours le fichier le plus volumineux possible. Si la taille de votre image est trop petite, WordPress ne sera pas en mesure de créer toutes les tailles dont il a besoin pour servir correctement vos images sur une variété d’appareils.
2. Si vous devez redimensionner la taille par défaut medium_large, utilisez la fonction update_option(). Vous pouvez utiliser cette même fonction pour mettre à jour toute autre taille d’image par défaut de WordPress.
3. Si vous êtes en dehors de la boucle WordPress, vous pouvez utiliser la fonction get_the_post_thumbnail() pour utiliser l’une de vos images personnalisées.
4. En savoir plus sur le recadrage doux et le recadrage dur lors de la création de tailles d’images personnalisées en cas de problème.

C’est tout ce qu’il y a à ajouter des tailles d’image personnalisées

Une fois que vous comprenez comment fonctionnent les tailles d’image personnalisées dans WordPress, vous pouvez les modifier pour répondre à vos besoins et gagner beaucoup de temps. Obtenir la bonne taille de vos images vous aide également à améliorer les performances de votre site et les classements des moteurs de recherche, il est donc important de bien faire.

Si vous voulez vraiment amener votre optimisation d’image à un autre niveau, consultez Smush. Nous avons ajouté un CDN incroyable à Smush Pro doté d’un redimensionnement automatique de l’image, ce qui vous aidera à éviter de modifier votre fichier de fonctions pour ajouter des tailles d’image personnalisées.

Il existe également d’autres fonctionnalités d’optimisation d’image intégrées, telles que le chargement paresseux et la conversion d’images aux formats de nouvelle génération. Essayez Smush Pro gratuitement pendant 7 jours et découvrez comment les fonctionnalités d’optimisation d’image peuvent améliorer votre site.

Étiquettes :

• code
• images