Formation « Développer un thème WordPress sur mesure »

Les images mises en avant, les tailles d’images et le srcset

Lecture : 6 minutes • Pratique : 15 minutes • 6

WordPress propose par défaut 3 tailles d’images, configurables depuis l’interface d’administration. En tant que développeur de thèmes, on va pouvoir en définir de nouvelles qui seront optimisées en fonction du design de celui-ci.

Les images mises en avant

Les images mises en avant permettent d’ajouter un visuel à votre publication. Sur Capitaine WP chaque cours ou article commence par une image mise en avant, en haut, que j’ai piochée sur Unsplash.

Activer les images mises en avant via functions.php

Dans le cours sur la préparation des bases du thème, on avait déjà vu comment activer la fonctionnalité grâce à la fonction add_theme_support(). Il suffit de coller ce code dans le fichier functions.php :

PHP
functions.php

Cela a pour but de rajouter la metabox Image mise en avant dans l’interface de l’éditeur :

L'interface pour ajouter une Image mise en avant dans votre publication
D’ici vous pouvez configurer l’image mise en avant

Afficher l’image mise en avant dans votre template

Et pour afficher cette image dans votre thème, il suffit d’appeler la fonction the_post_thumbnail() dans archive.php ou single.php par exemple, à l’intérieur de la boucle WordPress :

PHP
archive.php ou single.php

Pas besoin de créer la balise <img> car la fonction la crée pour nous. Contrairement à ce que l’on pourrait croire, elle ne renvoie pas juste l’URL de l’image.

Voici le résultat dans mon HTML :

HTML

Eh bien, c’est plutôt chargé, mais c’est parce que WordPress va automatiquement écrire les srcset et sizes, afin de proposer plusieurs formats au navigateur, pour qu’il sélectionne la taille la plus adaptée à l’écran. On en reparle juste après.

Information

Auparavant, on disait Image à la Une mais l’équipe de traduction francophone a changé le terme pour Image mise en avant. Mais c’est bel et bien la même chose.

Configurer les tailles d’images

Dans WordPress, lorsque vous importez une image dans la bibliothèque de médias, elles sont automatiquement traitées et créées en tailles intermédiaires que vous pourrez utiliser pour les images mises en avant, mais aussi dans vos articles ou vos templates.

Vous pouvez personnaliser ces tailles dans l’administration : Réglages > Médias.

L'interface permettant de configurer les différentes tailles d'images.
WordPress ne propose que 3 tailles par défaut : Miniature, moyenne et grande

On constate que l’on peut modifier 3 tailles, et 3 tailles seulement :

  • Le format miniature est carré par défaut, et sert à l’affichage des miniatures dans la bibliothèque de média. Je vous conseille donc de ne pas toucher à ce réglage ;
  • La taille moyenne est configurée sur 300px maximum ;
  • La taille grande est configurée sur 1024px maximum.

Je vous conseille de régler la taille moyenne en 1200px, et la grande taille en 1920px.

Attention

Lorsque vous changez ces tailles, les images précédemment importées ne seront pas redimensionnées !

Du coup, si vous voulez redimensionner les images déjà présentes dans votre bibliothèque de média, il faudra utiliser une extension comme Regenerate Thumbnails :

Regenerate Thumbnails

Regenerate Thumbnails

Recrée les miniatures pour une ou plusieurs de vos images téléversées. Utile si vous changez de tailles d’images ou de thème.

Par Alex Mills (Viper007Bond)

Elle est très simple d’utilisation et permet de redimensionner en masse les images. Il propose en plus de supprimer les anciennes tailles devenues caduques.

Pour rappel, les images sont accessibles depuis la bibliothèque de médias (menu Médias dans WordPress) mais elles sont physiquement stockées dans le dossier wp-content/uploads/<année>/<mois>/ :

Le dossier upload contenant tous les médias importés
Toutes mes images et leurs tailles intermédiaires se trouvent ici !

On voit pour chaque image son équivalent en 1024px, 300px et 150px. WordPress a ajouté un suffixe à la fin des noms de fichiers ce qui donne : <nom>-<largeur>x<hauteur>.jpg.

D’ailleurs, ça ne prend pas trop de place de créer tous ces formats intermédiaires ? Bien entendu, ça prend plus de place que si on n’avait gardé qu’une image. De plus, certaines images ne serviront jamais dans certains formats.

Mais aujourd’hui, avec des hébergements dont la capacité est quasiment illimitée, vous n’avez plus à vous soucier de cela !

C’est quoi le srcset des images ?

Comme on a pu le voir, la balise <img> fournit les attributs srcset et sizes en plus du classique src.

C’est en fait une norme HTML5 pour améliorer l’affichage des images dans l’ère du web responsive et des périphériques aux multiples résolutions d’écran.

Son but est de permettre d’indiquer plusieurs tailles d’images au navigateur afin qu’il choisisse la plus adaptée en fonction de la taille de l’écran : Inutile de charger une image de 2000px de large sur un mobile qui n’a que 768px. Cela fait moins d’octets à charger, pour un affichage plus rapide, surtout sur des connexions mobiles lentes.

WordPress tire parti de cette technique lorsqu’il affiche une image dans une publication ou une image mise en avant. Il va récupérer toutes les tailles définies sur le site afin de les proposer au navigateur. Celui-ci optera pour la plus adaptée :

HTML

Le fonctionnement de cette technologique est assez simple :

  • Dans l’attribut scrset, WordPress liste toutes les tailles d’images, et indique leur largeur (300w, 1024w…) ;
  • Dans l’attribut sizes, WordPress indique la plus grande taille de l’image.

Les tailles cachées pour le responsive

Et du coup cette taille à 768px, elle vient d’où ? C’est WordPress qui la crée automatiquement depuis la version 4.4 afin d’être sûr d’avoir un format adapté aux smartphones et tablettes.

Depuis, on a même d’autres tailles créées automatiquement :

  • Medium Large : 768px ;
  • 2x Medium Large : 1536px ;
  • 2x Large : 2048px ;
  • Scaled: 2560px.

Attention

Avec toutes ces tailles d’images à notre disposition, il devient de moins en moins nécessaire de créer ses propres tailles d’images. Préférez opter pour la taille existante la plus proche.

Quelle compatibilité avec les navigateurs ?

Au niveau de la compatibilité, on monte à 90% de compatibilité auprès des navigateurs d’après CanIUse, ce qui est pas mal, mais Internet Explorer et Edge jusqu’à la version 15 ne prendront pas cet attribut en compte.

Au pire, si le navigateur ne comprend pas les srcset, il aura toujours l’attribut classique src. L’image n’aura pas une taille optimisée mais au moins, elle s’affichera.

Conseil

Can I Use est un très bon site pour connaitre la compatibilité des technologies HTML, CSS, JS dans les différents navigateurs. Gardez bien ce site de côté !

Déclarer de nouvelles tailles d’images

Bon, et si les 3 tailles d’images proposées par défaut ne suffisent pas ? Et bien vous allez pouvoir en créer d’autres grâce au functions.php !

PHP
functions.php

La fonction set_post_thumbnail_size() permet de définir la taille des images mises en avant. Cette taille sera donc utilisée par défaut par the_post_thumbnail().

Le premier paramètre est la taille en largeur que doit avoir l’image, le second la hauteur maximale (passez ce paramètre à 0 pour ne pas limiter) et le dernier paramètre, s’il est passé à true permet de découper l’image pour se conformer à ces dimensions exactes.

Pour votre propre utilisation dans le thème, ou via les articles, vous pouvez ajouter autant de tailles que souhaitez grâce à add_image_size(). Le premier paramètre est le nom à donner à votre taille d’image. (Évitez large, medium, medium-large, et thumbnails car ils sont déjà utilisés par WordPress).

Essayez de téléverser une image sur votre site, et jetez un oeil à votre dossier uploads :

L'image, une fois traité par WordPress, est proposé en plusieurs formats
L’image est déclinée en 8 tailles différentes

Mon image est désormais déclinée en 8 formats : l’originale, les 3 de WordPress par défaut, la version responsive en 768, le format pour les images mises en avant et mes deux tailles sur mesure.

Utiliser les tailles dans vos templates

Pour appeler une taille d’image spécifique, c’est tout simple. Il suffit d’indiquer le nom de l’image que vous souhaitez afficher en paramètre :

PHP
single-portfolio.php

Et le tour est joué !

Pour donner un peu de contexte, on va voir plus tard que l’on peut créer des Custom Post Types, ou types de publications personnalisées, lorsque les articles ou les pages ne suffisent plus.

On créera par exemple un Portfolio. Et on voudra que les images mises en avant dans ce portfolio soient carrées, alors que pour les articles du blog, elles auront le format défini parset_post_thumbnail_size().

Vous pourrez aussi utiliser ces tailles d’images lorsque l’on fera des champs image avec ACF (Advanced Custom Fields). Mais ça, c’est pour plus tard !

Utiliser les tailles dans vos articles ?

Lorsque vous utilisez le bloc image dans l’éditeur visuel, vous pouvez afficher la taille d’image à afficher par défaut :

Le choix de la taille d'une image
Mais vos tailles personnalisées n’apparaissent pas !

Ça alors ! Mes tailles d’images n’apparaissent pas ! C’est voulu par WordPress. Mais en fait, on n’a pas à s’en soucier. Comme on l’a vu précédemment, le srcset va permettre de sélectionner l’image la plus adaptée, donc le rédacteur n’a pas besoin de se soucier de ce réglage !

À la limite, vous pouvez régler sur Grande pour ne jamais proposer le format original (qui peut être très lourd selon la photo importée).

Pour conclure, les tailles d’images personnalisées ne servent qu’au développeur dans le template.


Mine de rien, il y avait beaucoup à dire sur les images ! Et encore, on n’a pas parlé de l’optimisation des images. On abordera cet aspect très important un peu plus tard dans la formation, dans une partie dédiée aux performances d’un site. On verra que l’optimisation des images permet de faire économiser jusqu’à 80% du poids d’une page web.

Le prochain cours abordera les menus et le moteur de recherche du CMS.

6

Questions, réponses et commentaires

  1. Cyrielle

    Le 3 décembre 2022

    Cette partie du cours ne fonctionne pas de mon côté et je ne suis pas sûre de la raison.

    Lorsque je veux téléverser une image dans le wordpress, on m’affiche une erreur : “Une erreur est survenue lors du téléversement. Veuillez réessayer plus tard.”

    Je n’arrive pas à savoir si c’est un problème d’accès à la base de données (les images que j’ai téléversées apparaissent bien dans le fichier uploads, mais pas dans la bibliothèque de médias) ; ou si j’ai simplement mis le code à la mauvaise place dans les fichiers archive.php et single.php.

    Serait-il possible d’avoir plus de précision d’à quoi devrait ressembler les fichiers archive et single à ce stade du cours ?

    Merci beaucoup !

    1. Maxime BJ

      Le 3 décembre 2022

      Dans un premier temps, essaie de te déconnecter du site et te reconnecter. Si tu es en local, ferme le serveur local et relance le.
      Si ça ne corrige pas le souci. Retire tous les codes PHP que tu aurais ajouté dans ton thème.
      Et désactive les extensions.
      Ça ressemble à un problème de droits. Mais en général les hébergeurs classiques ne posent pas de souci à ce niveau-là pourtant !

  2. Don mati

    Le 16 décembre 2022

    Super, grace à la doc WordPress j’ai pu compléter ton code et avec the_post_thumbnail( ‘thumbnail’ ); avoir des images qui s’affichent dans des tailles raisonnables. Avec le nouveau Gutenberg c’est un peu compliqué de gérer la fameuse “image mise en avant” dans les articles, àa devient un bloc, tu vas devoir faire des mises à jour de ton super cours.

    1. Maxime BJ

      Le 16 décembre 2022

      Il faudra en effet que j’ajoute une partie dédié au Full Site Editing !

  3. Jean-Gabriel

    Le 22 novembre 2023

    Merci pour cet article très clair.
    Je rencontre un soucis différent mais peut-être lié.
    Dans mon theme Twenty Twenty Three, lorsque je sélectionne une image mise en avant pour un article, celle-ci s’affiche parfaitement dans la liste de mes articles, avec le texte lire la suite etc… En revanche elle est trop grande dans mon article.
    J’ai donc modifié la taille de la zone d’image dans le thème de la page article, j’ai également enlevé le voile noir transparent par défaut sur l’image, mais mes pages d’articles restent inchangées. Avez-vous une idée pour résoudre ce problème?

    Merci de votre aide

    1. Maxime BJ

      Le 22 novembre 2023

      Sur ce site, le but est que tu créés ton propre thème sur mesure, pas utiliser le thème de démo fourni par WordPress (qui n’est pas très adapté d’ailleurs comme base de travail pour faire ton thème). En créant ton thème sur mesure, tu t’évites les surcharges et tu te simplifies la tâche !

Laisser un commentaire