Explication des tailles d'image WordPress

La taille des images WordPress peut parfois être un peu mystérieuse ! Avez-vous déjà vu cette page Paramètres multimédias dans votre zone d'administration et vous êtes-vous demandé de quoi il s'agissait ?

Dans cet article, nous allons passer en revue les tailles d'image 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 verrons 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 très important que les images de votre site Web soient belles, nettes et de haute qualité. Plusieurs éléments dicteront cela, notamment 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 constaterez 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

GARANTIE DE REMBOURSEMENT DE 60 JOURS

VOIR NOS FORFAITS

WordPress essaie de trouver un équilibre en proposant la taille d'image optimale en fonction de l'emplacement de l'image. Pour ce faire, il crée 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 'Taille miniature', 'Taille moyenne' et '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 "Taille réelle" qui correspond à la taille d'origine de l'image téléchargée.

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

Examiner les tailles d'image WordPress plus en détail

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 a une taille de 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 gérées par WordPress).

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

En surbrillance rouge, vous verrez nos tailles d'image par défaut. La miniature a été recadrée car elle est définie par défaut via les paramètres multimédia.

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 qui ont été générées sont le résultat de certains fichiers de base de 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 les 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 en cours de création à la suite de la taille "medium_large" qui a été ajoutée dans la version 4.4 de WordPress pour une meilleure prise en charge des images réactives et peut être vue sur divers appareils portables. Il est défini dans le dossier "wp-admin/includes" dans le fichier schema.php ligne 522

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

et demandé dans le fichier image.php à la 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' dans le fichier functions.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 frontale, nous pouvons voir comment cette taille est utilisée en cliquant avec le bouton droit sur l'image en vedette et en regardant dans l'inspecteur du navigateur.

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 publication 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 :

Il est toujours utile de s'assurer que toute image que vous téléchargez est plus large que les largeurs des images en vedette et de couverture afin qu'elles soient nettes. WordPress peut réduire efficacement la taille des images, mais il ne peut pas agrandir une petite image et lui donner une belle apparence.

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 empêcher WordPress de créer des tailles d'image dont nous n'avons pas besoin ? Continuez à lire pour le découvrir!

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 le fichier functions.php d'un thème enfant. Les modifications apportées au fichier functions.php dans un thème parent seront effacées 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 éditant le fichier functions.php du thème 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['thumbnail']); // 150x150 pixels unset( $sizes['medium']); // 300x300 pixels(maximum) unset( $sizes['large']); // 1024x1024 pixels(maximum) unset( $sizes['medium_large']); // 768px width return $sizes; }

Pour tester, téléchargeons une nouvelle image (dans notre exemple, elle 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 disant à WordPress de supprimer les 4 tailles d'image par défaut via notre fichier functions.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'image indésirables. Cela permettra d'économiser de l'espace et d'accélérer le processus de téléchargement de l'image.

Suppression des anciennes tailles d'image de la médiathèque

Vous avez peut-être remarqué que même si les 4 tailles d'images par défaut n'ont 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 de savoir si vous avez 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 encore utilisée.

Un excellent moyen de gérer ces fichiers indésirables des anciennes images consiste à utiliser le plug-in Force Regenerate Thumbnail qui les parcourra et les supprimera automatiquement. Installez et activez le plugin, puis appuyez 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. Agréable!

Un autre moyen simple d'obtenir le même résultat pour les tailles par défaut consiste à modifier la valeur de leurs dimensions sur "0" à partir de Paramètres> Média dans wp-admin. Vous verrez alors quelque chose comme ceci :

Une autre méthode consiste à modifier update_option( 'SIZE_w/h', 0 ); dans functions.php. N'oubliez pas de le faire dans un fichier functions.php de thème enfant afin 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 Qui reflétera la valeur des dimensions dans les paramètres des médias (depuis WP Admin) a maintenant été mis à jour sur 0.

Supprimer les 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. On peut maintenant passer à autre chose et s'attaquer aux images créées par le thème (en l'occurrence Twenty Twenty). 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 à votre code de thème pour empêcher WordPress de produire ces tailles à l'avenir.

Pour ce faire, nous allons utiliser le crochet init et la fonction principale remove_image_size. Copiez le code ci-dessous et collez-le dans votre fichier functions.php. Si vous n'utilisez pas le thème Twenty Twenty tel que nous le sommes ici, remplacez les noms 'post-thumbnail' 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 vérifions notre dossier de téléchargement via notre client FTP, nous verrons que toutes les tailles sont générées sauf 'post-thumbnail' 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 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 en dessous. La taille d'image souhaitée sera alors de 960px. N'oubliez pas de calculer également le rembourrage CSS s'il y en a un. Si les éléments parents ont une somme de 20px de rembourrage par exemple, alors la bonne largeur pour l'image sera de 920px. 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 intégrée add_image_size() 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 'true', alors 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 faux, les proportions de notre 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 de téléchargement car le recadrage n'est pas défini (faux). La même chose se produirait si vous insérez ce qui suit :

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

Si toutefois 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 'true', utilisez simplement des options comme 'left' ou 'top' ou les deux :

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

Le tableau spécifie l'emplacement du recadrage. Les valeurs utilisables sont :

Pour x_crop_position : 'gauche', 'centre' ou 'droite'.
Pour y_crop_position : 'top', 'center' ou 'bottom'.

La sortie dans chaque cas sera une partie différente de l'image originale. Voici quelques exemples:

Une alternative à cette opération manuelle via l'ajout de code à notre thème consiste à utiliser un plugin tel que Simple Image Sizes. 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

L'utilisation des tailles d'image correctes dans WordPress est importante - non seulement cela garantit une expérience utilisateur de haute qualité en présentant des images nettes et haute résolution au spectateur du site Web, mais cela 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 arrêtant WordPress. générer des tailles inutiles de chaque image que vous téléchargez.