Explications des tailles d’image WordPress

Les tailles d’image WordPress peuvent parfois être un peu mystérieuses! Avez-vous déjà vu cette page de paramètres multimédias dans votre zone d’administration et vous êtes-vous demandé de quoi il s’agissait?

 paramètres des médias

Dans cet article, nous allons parcourir les tailles d’images WordPress, ce qu’elles sont et comment cela peut affecter des choses comme les temps de téléchargement. De plus, nous verrons également comment WordPress utilise ces différentes tailles d’image dans les mises en page de sites Web. Et enfin, nous examinerons comment vous pouvez supprimer les tailles d’image inutiles ou ajouter votre propre taille personnalisée.

Quel est le Rôle des Tailles d’image dans WordPress?

Il est vraiment important que les images de votre site Web soient belles, nettes et de haute qualité. Il y a plusieurs éléments qui vont dicter cela, y compris la taille physique de l’image (à la fois les dimensions et la taille du fichier) et la résolution de l’image. Si votre image est trop grande (par exemple 10 000 pixels de large) et que la taille du fichier est trop grande (c’est-à-dire supérieure à 1 Mo environ), vous commencerez à ralentir la vitesse de chargement de votre site Web. Inversement, si la taille de l’image est trop petite, vous verrez probablement une dégradation de la qualité de l’image – en d’autres termes, elle pourrait commencer à paraître floue ou granuleuse.

Hébergez votre site web avec Pressidium

60- GARANTIE DE REMBOURSEMENT D’UNE JOURNÉE

VOIR NOS PLANS

WordPress tente de trouver un équilibre en offrant la taille d’image optimale en fonction de l’emplacement de l’image. Il le fait en créant 3 tailles d’image différentes chaque fois que vous téléchargez une image dans la médiathèque WordPress. Il s’agit de la « Taille de la vignette », de la « Taille moyenne » et de la « Grande taille » avec des dimensions de 150 ×150 pixels, 300×300 pixels (maximum) et 1024×1024 pixels (maximum) respectivement. Enfin, il stockera également une image « pleine grandeur » qui correspond à la taille d’origine de l’image téléchargée.

Ces tailles ainsi que des tailles supplémentaires que nous examinerons plus tard sont utilisées par WordPress dans différentes positions de la mise en page frontend. Ceci est fait pour que l’image utilisée à la fois a) soit belle et b) se charge rapidement.

Examiner plus en détail la taille des images WordPress

Passons en revue un exemple afin que vous puissiez voir exactement ce qui se passe « dans les coulisses » lorsque vous téléchargez une image sur WordPress. Pour les besoins de cet exemple, nous allons télécharger une image avec le nom ‘post1-feature-image’. Il mesure 294 Ko et mesure 2089 × 1175 pixels et nous allons le faire avec le thème WordPress Twenty Twenty actif par défaut (d’autres thèmes peuvent modifier la façon dont les images sont traitées par WordPress).

Après avoir téléchargé cette image via la médiathèque WordPress, nous pouvons nous connecter à notre site à l’aide d’un client FTP et, si nous nous dirigeons vers le dossier de téléchargement, nous verrons que plusieurs versions de nos images ont été créées.

Surligné en rouge, vous verrez nos tailles d’image par défaut. La vignette a été recadrée car elle est définie par défaut via les paramètres du support.

La « taille moyenne » et la « Grande taille » ont été redimensionnées de manière à éviter de modifier les proportions réelles de l’image. C’est pourquoi, par exemple, la « taille moyenne » est de 300×169 au lieu de 300×300. Le reste des images générées sont le résultat de certains fichiers de base WordPress et du code du thème Twenty Twenty.

Devenir technique!

Si vous êtes intéressé par le code derrière ce qui se passe lorsque les tailles d’image supplémentaires sont créées, cette section de l’article est pour vous. Sinon, n’hésitez pas à passer au chapitre suivant!

WordPress extrait des instructions d’un fichier appelé media.php qui se trouve dans le dossier wp-includes/. Dirigez-vous vers cette ligne 4861 et vous verrez ce qui suit:

/*** Add additional default image sub-sizes.** These sizes are meant to enhance the way WordPress displays images on the front-end on larger,* high-density devices. They make it possible to generate more suitable `srcset` and `sizes` attributes* when the users upload large images.** The sizes can be changed or removed by themes and plugins but that is not recommended.* The size "names" reflect the image dimensions, so changing the sizes would be quite misleading.** @since 5.3.0* @access private*/function _wp_add_additional_image_sizes() { // 2x medium_large size. add_image_size( '1536x1536', 1536, 1536 ); // 2x large size. add_image_size( '2048x2048', 2048, 2048 );}

post1-feature-image-768x432.jpg est créé à la suite de la taille ‘medium_large’ qui a été ajoutée dans la version 4.4 de WordPress pour un meilleur support d’image réactif et peut être vu sur divers appareils portables. Il est défini dans le dossier « wp-admin/includes » dans le schéma de fichiers.ligne php 522

// 4.4.0'medium_large_size_w' => 768,'medium_large_size_h' => 0,

et demandé dans l’image.fichier php en ligne 86:

} elseif ( 'medium_large' === $size ) {$max_width = intval( get_option( 'medium_large_size_w' ) );$max_height = intval( get_option( 'medium_large_size_h' ) );

post1-feature-image-1200x675.jpg et post1-feature-image-1980x1114.jpg sont générés à partir du thème ‘Twenty Twenty’ à l’intérieur des fonctions.fichier php à la ligne 53:

/** Enable support for Post Thumbnails on posts and pages.** @link https://developer.wordpress.org/themes/functionality/featured-images-post-thumbnails/*/add_theme_support( 'post-thumbnails' );// Set post thumbnail size.set_post_thumbnail_size( 1200, 9999 );// Add custom image size used in Cover Template.add_image_size( 'twentytwenty-fullscreen', 1980, 9999 );

Ceci est fait parce que le thème Twenty Twenty utilise 1200px comme taille d’image pour les images en vedette. Si nous créons une publication de test et ajoutons une image en vedette, puis dans la page de publication unique frontend, nous pouvons voir comment cette taille est utilisée en cliquant avec le bouton droit de la souris sur l’image en vedette et en regardant dans l’inspecteur du navigateur.

inspector

Enfin, l’image 1980px est la taille utilisée pour l’image en vedette des autres modèles de publication. Vous pouvez le voir en changeant le modèle de poste de test en « Modèle de couverture ». Ensuite, dans l’inspecteur CSS de l’élément HTML de l’image de couverture, nous pouvons voir comment cette taille est utilisée:

inspector

Il vaut toujours la peine de s’assurer que toute image que vous téléchargez est plus large que les largeurs d’image en vedette et de couverture afin qu’elle soit nette. WordPress peut réduire efficacement la taille des images, mais il ne peut pas mettre à l’échelle une petite image et la rendre belle.

Supprimer les tailles d’image WordPress inutiles

Comme nous l’avons vu, WordPress est occupé à produire une gamme de tailles d’image chaque fois que nous téléchargeons une image dans notre médiathèque. Mais avons-nous vraiment besoin de toutes ces images? En réalité, non, nous ne le faisons pas. Non seulement cela ralentit la vitesse à laquelle les images sont téléchargées car WordPress doit travailler en arrière-plan pour créer ces différentes tailles d’images, mais cela prend également du stockage que nous n’avons pas besoin d’utiliser sur notre serveur. Alors, comment pouvons-nous empêcher WordPress de créer des tailles d’image dont nous n’avons pas besoin? Lisez la suite pour le savoir!

Remarque: À moins que vous ne suiviez ces instructions sur un site Web de démonstration, nous vous recommandons d’implémenter les modifications décrites ci-dessous dans les fonctions.fichier php d’un thème enfant. Modifications apportées aux fonctions.le fichier php d’un thème parent sera effacé lors de la prochaine mise à jour du thème.

Supprimer les tailles d’image par défaut de WordPress

Cela peut être facilement accompli en modifiant les fonctions du thème.php et en ajoutant le code suivant:

add_filter( 'intermediate_image_sizes_advanced', 'prefix_remove_default_images' );// Remove default image sizes here.function prefix_remove_default_images( $sizes ) { unset( $sizes); // 150x150 pixels unset( $sizes); // 300x300 pixels(maximum) unset( $sizes); // 1024x1024 pixels(maximum) unset( $sizes); // 768px width return $sizes;}

Pour tester, téléchargeons une nouvelle image (dans notre exemple, cela s’appelle post2-featured-image) dans la médiathèque et actualisons notre vue FTP du dossier de téléchargement.

Comme vous pouvez le voir, en demandant à WordPress de supprimer les 4 tailles d’image par défaut via nos fonctions.fichier php nous avons arrêté WordPress pour les créer dans notre dossier multimédia. À l’avenir, cette simple mise à jour de notre code de thème signifie que nous n’obstruerons pas notre serveur avec des tailles d’images indésirables. Cela permettra d’économiser de l’espace et d’accélérer le processus de téléchargement d’images.

Suppression des anciennes tailles d’image de la Médiathèque

Vous avez peut-être remarqué que, bien que les 4 tailles d’images par défaut n’aient pas été créées pour notre nouvelle image que nous avons téléchargée, l’image précédemment téléchargée a toujours les 8 variantes enregistrées dans la médiathèque. Selon toute vraisemblance, à moins qu’il ne s’agisse d’un tout nouveau site Web, vous aurez téléchargé des dizaines, voire des centaines d’images et dans tous les cas, ces tailles « supplémentaires » auront été créées. Alors, que faire?

La première chose à vérifier est avez-vous besoin de ces images? Avant de procéder à la suppression des images générées par WordPress, vous devrez confirmer que ces tailles ne sont plus utilisées. Vérifiez les articles de votre blog, les images en vedette et toute autre partie de votre site Web pour vous assurer qu’aucune des anciennes tailles n’est toujours utilisée.

Un excellent moyen de traiter ces fichiers indésirables des anciennes images est d’utiliser le plugin de vignettes Force Regenerate qui les parcourra et les supprimera automatiquement. Installez et activez le plugin, puis cliquez sur le bouton « Régénérer toutes les vignettes » dans le menu du plugin (Outils – > Forcer la régénération des vignettes).

Actualisez la vue de votre dossier multimédia FTP et vous verrez que les images WordPress par défaut ont disparu. Sympa !

Un autre moyen facile d’obtenir le même résultat pour les tailles par défaut est de changer leur valeur de dimensions en « 0 » à partir du support Settings > dans le wp-admin. Vous verrez alors quelque chose comme ceci:

Une autre méthode consiste à modifier les fonctions update_option(‘SIZE_w/h’, 0); inside.php. N’oubliez pas de le faire pour les fonctions d’un thème enfant.fichier php pour que vos modifications ne soient pas perdues lorsque vous mettez à jour le thème ultérieurement.

update_option( 'thumbnail_size_h', 0 );update_option( 'thumbnail_size_w', 0 );update_option( 'medium_size_h', 0 );update_option( 'medium_size_w', 0 );update_option( 'large_size_h', 0 );update_option( 'large_size_w', 0 );

Lorsque cette mise à jour est effectuée, vous verrez que la valeur des dimensions dans les paramètres du support (depuis WP Admin) a maintenant été mise à jour à 0.

Supprimer des tailles d’image de thème supplémentaires

Nous avons maintenant traité avec succès les images par défaut produites par le noyau WordPress. Nous pouvons maintenant passer à autre chose et aborder les images créées par le thème (en l’occurrence Vingt Vingt). Si, comme nos tailles d’image par défaut, vous avez conclu que celles-ci ne sont pas nécessaires, vous pouvez apporter quelques modifications au code de votre thème pour empêcher WordPress de produire ces tailles à l’avenir.

Pour ce faire, nous allons utiliser le hook init et la fonction de base remove_image_size. Copiez le code ci-dessous et collez-le dans vos fonctions.fichier php. Si vous n’utilisez pas le thème Twenty Twenty comme nous sommes ici, remplacez les noms « post-vignette » et « twentytwenty-fullscreen » par le nom de votre thème actif.

function remove_extra_image_sizes() { foreach ( get_intermediate_image_sizes() as $size ) { if ( in_array( $size, array( 'post-thumbnail', 'twentytwenty-fullscreen' ) ) ) { remove_image_size( $size ); } }}add_action('init', 'remove_extra_image_sizes');

Si nous téléchargeons une nouvelle image maintenant et que nous vérifions notre dossier de téléchargement via notre client FTP, nous verrons que toutes les tailles sont générées à l’exception de ‘post-vignette’ et ‘twentytwenty-fullscreen’.

Ajoutez votre propre Taille d’image personnalisée

Maintenant que nous avons appris à supprimer les tailles d’image redondantes dans WordPress, voyons comment nous pouvons ajouter nos propres tailles d’image personnalisées en fonction des besoins de notre modèle.

Comment décidons-nous des tailles d’image dont nous avons besoin?

Supposons que vous ayez un site Web avec une colonne principale d’une largeur de 960 pixels où l’image de la fonctionnalité est en haut et le contenu de la publication ci-dessous. La taille d’image souhaitée sera alors de 960 pixels. N’oubliez pas de calculer également le remplissage CSS le cas échéant. Si les éléments parents ont une somme de remplissage de 20 pixels par exemple, la bonne largeur pour l’image sera de 920 pixels. C’est 960px moins 20px pour le rembourrage gauche moins 20px pour le rembourrage droit.

Enregistrer de nouvelles tailles d’images

Un moyen simple d’enregistrer de nouvelles tailles consiste à utiliser la fonction add_image_size() intégrée fournie par WordPress. La structure de la fonction est:

add_image_size( name, width, height, crop )

La plupart de ces options sont explicites. La dernière option (recadrage) dicte si WordPress respecte les proportions de notre image lors du redimensionnement ou s’il recadre notre image. Si l’option de recadrage est définie sur « vrai », l’image sera recadrée et les proportions ne seront pas respectées. Si l’option de recadrage est ignorée ou définie sur false, les proportions de l’image seront respectées.

Essayons cela en action et surveillons le résultat à l’aide d’une image de test de 2089 × 1175 pixels.

Ajoutons d’abord ce code:

add_image_size( 'new-post-thumb', 220, 180 );

Cela générera un post2-feature-image-220x124.jpg au lieu de 220× 180 dans notre dossier uploads car le recadrage n’est pas défini (false). La même chose se produirait si vous insérez les éléments suivants:

add_image_size( 'new-post-thumb', 220, 180, false );

Si cependant vous définissez le recadrage sur true comme ceci, une image post2-feature-image-220x180.jpg sera enregistrée.

add_image_size( 'new-post-thumb', 220, 180, true );

Enfin, vous pouvez dicter la façon dont le recadrage sera positionné. Au lieu de « vrai », utilisez simplement des options comme « gauche » ou « haut » ou les deux:

add_image_size( 'custom-size', 220, 220, array( 'left', 'top' ) );

Le tableau spécifie l’emplacement du recadrage. Les valeurs qui peuvent être utilisées sont :

Pour x_crop_position : ‘left’, ‘center’ ou ‘right’.
Pour y_crop_position : ‘haut’, ‘centre’ ou ‘bas’.

La sortie dans chaque cas sera une partie différente de l’image d’origine. Voici quelques exemples:

Une alternative à cela manuellement en ajoutant du code à notre thème consiste à utiliser un plugin tel que des tailles d’image simples. Néanmoins, il est utile de comprendre ce qui se passe dans les coulisses, même si vous utilisez un plugin comme celui-ci.

Conclusion

Il est important d’utiliser les tailles d’image correctes dans WordPress – non seulement cela garantit une expérience utilisateur de haute qualité en présentant des images nettes et en haute résolution au visionneur de site Web, mais a également un impact significatif sur les temps de chargement et l’utilisation du serveur. J’espère que cet article vous a aidé à comprendre l’importance des tailles d’image dans WordPress et les façons dont vous pouvez remplacer, supprimer ou étendre les tailles d’image pour répondre aux besoins de votre site Web, ainsi que la façon dont vous pouvez potentiellement économiser une tonne d’espace serveur en empêchant WordPress de générer des tailles inutiles de chaque image que vous téléchargez.

Hébergez votre site WordPress avec Pressidium !

Voir nos plans de prix

Laisser un commentaire

Votre adresse e-mail ne sera pas publiée.