Qu’est-ce qu’un media ?
Commençons par revoir ensemble ce qu’est un média dans WordPress, histoire de savoir de quoi on parle dans cet article.
Un site web se compose d’une multitude d’éléments qui seront affichés par votre navigateur web lors de sa visite. L’élément le plus courant est bien sûr le texte, comme celui que vous êtes en train de lire en ce moment même. Mais le texte seul ne suffit pas toujours à véhiculer un message, et dès le début du web, des médias ont fait leur apparition sur les documents html.
Un média, ça peut être plein de choses:
- une image bien sûr (photo, illustration, schéma…) qui peut venir sous de multiples formats. Les formats JPEG, PNG et WEBP sont les plus courants.
- une vidéo, qui peut à nouveau être sous différents formats.
- de l’audio : musiques, interviews, podcasts…
- des documents: PDF, textes, tableurs, fichiers compressés (.zip par exemple), etc. Ce dernier type de média est rarement affiché sur un site web mais peut être proposé au téléchargement.
Qu’est ce que la médiathèque WordPress ?
C’est plus ou moins la même chose que votre explorateur de fichiers, tout simplement.
Quand vous cliquez sur le dossier “Mes documents” de votre ordinateur, vous voyez s’afficher tout un tas de documents (logique).
Quand on téléverse (upload) un fichier dans son site WordPress, celui-ci atterrit dans le dossier /wp-content/uploads. WordPress va créer tout des sous-dossiers par années et par mois afin de s’y retrouver.
Sauf qu’en pratique, quand on gère un site web, et même quand on gère ses photos de famille, ce genre de classification n’est pas très pratique.
La médiathèque WordPress de base va donc tout afficher, par défaut par ordre chronologique inversé (donc les médias les plus récents d’abord).
La médiathèque WordPress de base permet de:
- Ajouter des fichiers depuis son ordinateur
- Afficher les médias en grille ou en liste
- Filtrer les fichiers selon leur type ou leur date
- Faire une recherche par nom (comme l’explorateur de fichiers de votre ordinateur)
Erreur n°1 : Confondre WordPress avec un espace de stockage en ligne
C’est une erreur dans laquelle on peut facilement tomber, surtout avec l’omniprésence des services cloud dans notre quotidien.
Faîtes un tri en amont
Vous devez rédiger un article pour votre site, et vous avez un paquet d’images qui pourraient vous êtes utiles à votre disposition. Plutôt que de déterminer en amont quels fichiers vous allez vraiment insérer dans votre article, vous décidez de cliquer-glisser l’ensemble du dossier de votre ordinateur dans la médiathèque, en vous disant que comme ça vous aurez tout sous la main le moment venu.
Le problème avec cette approche c’est que:
- Vous croyez gagner du temps mais vous en perdez en réalité (et faîtes aussi souvent l’erreur n°2).
- Vous surchargez pour rien le serveur de votre site web
- Vous transformez votre médiathèque en un fourre-tout impossible à gérer.
- Vous n’oserez pas faire le tri à postériori et effacer les fichiers non utilisés, car vous ne serez plus certain⋅e des médias que vous avez utilisés sur le site
Bref, prenez le temps de choisir sur votre ordinateur les fichiers que vous voulez utiliser. Et si vous réalisez après avoir inséré un média qu’en fait il ne vous sert pas, supprimez-le de la médiathèque plutôt que de le laisser prendre de la place pour rien.
Servir le fichier localement ou via un service tiers ?
Posez-vous aussi la question suivante : est-il pertinent de stocker votre média dans la médiathèque WordPress plutôt que de le servir via un service tiers ?
Ce que je veux dire par là, c’est que dans certaines situations, il est préférable de ne pas créer de doublon inutile.
Si vous souhaitez proposer une vidéo ou un podcast à la lecture sur votre site, et que ces derniers existent déjà sur Internet sur une autre plateforme (typiquement Youtube ou Spotify), il peut être plus judicieux de les intégrer sur votre page plutôt que de les servir depuis votre site web.
De plus, ces médias sont généralement assez lourds et peuvent rapidement occuper beaucoup de bande passante. Il est aussi important de générer plusieurs formats de visualisation pour s’adapter à la résolution de l’écran (comme pour les images).
Pour toutes ces raisons, on préférera en général lire une vidéo depuis un service de streaming. On pense bien sûr à Youtube ou Vimeo, mais vous pouvez également utiliser d’autres services moins invasifs (l’utilisation de Youtube ou Vimeo requiert le consentement utilisateur⋅trice). Par exemple Bunny Stream pour servir vos vidéos. C’est efficace, conforme RGPD et économique.
Dans tous les cas, si vous choisissez d’insérer un média distant, ne le faîtes que si vous en avez le droit. Insérer par exemple des images issues d’autres sites de la manière sans autorisation s’appelle du hotlinking et est une très mauvaise pratique (en plus d’être complètement illégal dans bien des cas).
Erreur n°2 : Ne pas renommer vos fichiers
Ça peut paraître tout simple comme conseil, et pourtant il est si peu appliqué.
Beaucoup de médias (les photos en particulier) ont été prises avec un appareil photo ou un smartphone, ou ont été téléchargées dans des banques d’images en ligne.
Dans tous les cas, le nom initial du fichier est incompréhensible et ressembler à quelque chose comme IMG_20240731_205636.jpg.
Vous devez prendre le temps de renommer vos fichiers.
Les avantages d’avoir des fichiers avec des noms adaptés
Un fichier avec un nom qui a du sens va:
- Vous aider à plus facilement le retrouver plus tard en faisant une recherche (vous vous souvenez l’outil de recherche de la médiathèque dont je vous ai parlé ?)
- Vous aider à voir un un instant à quoi sert ce fichier sur votre site si vous optez pour un nom en lien avec son utilisation, par exemple “produit_jardinage_brouette-acier-01.jpg”
- Faciliter la vie de vos utilisateur⋅trices si le média est amené à être téléchargé
- Donner un coup de boost à votre SEO en utilisant un nom de fichier qui aide les robots à mieux comprendre ce qu’il contient
Comment s’y prendre manuellement ?
Si vous n’avez que quelques fichiers, c’est assez simple de le faire à la main.
Utilisez le menu contextuel avec le clic droit de la souris, ou appuyez sur F2 (ou la touche Entrée sur Mac) une fois le fichier sélectionné pour le renommer.
Votre nom de fichier doit être court. Il ne s’agit pas d’une description.
Automatiser le renommage de fichiers
Imaginons à présent que vous deviez importer une vingtaine de fichiers pour une fiche produit ou pour un article sur une thématique donnée.
Idéalement vous aimeriez que vos fichiers s’appellent produit_jardinage-rateau-01.jpg, produit_jardinage-rateau-02.jpg, produit_jardinage-rateau-03.jpg, …, produit_jardinage-rateau-20.jpg.
Vous n’êtes pas obligé⋅e de perdre 10 minutes de votre vie à renommer vos fichiers. Utilisez un logiciel de traitement par lot pour faire le travail en moins d’une minute pour vous.
Je vous recommande par exemple XnviewMP qui est gratuit pour une utilisation personnelle et est disponible sur Linux, Mac et Windows.
Vous pouvez le télécharger sur le site officiel de Xnview.
Erreur n°3 : ne pas préparer vos médias avant import
C’est l’erreur à laquelle on pense en premier. La préparation de vos fichiers touche trois aspects importants.
La résolution ou le poids du fichier
WordPress va automatiquement redimensionner les images qui ont une résolution trop élevée. Par défaut, le CMS va limiter le plus grand côte de votre image à 2560px.
Votre image va également être recréée sous différentes tailles, ceci avant de pouvoir servir celle la plus adaptée au terminal qui affiche votre site web. Ce qui permet de choisir une variante plus légère lorsque le site est consulté depuis un smartphone.
Super, du coup rien à faire ?
Pas tout à fait.
Charger des fichiers à la bonne résolution dès le début limite la charge sur le serveur, et vous fait gagner du temps.
De plus, il est inutile de charger des images de haute résolution si elles ne sont pas destinées à être affichées en pleine largeur.
Comme mentionné précédemment, vous pouvez rapidement traiter vos images par lot avec un logiciel sur votre ordinateur (évitez les outils en ligne, le but de la manoeuvre étant justement de limiter les envois de données en ligne).
Choisir le bon format
Certains médias sont initialement générés ou téléchargés dans un format de haute qualité. Ce qui est très utile par exemple pour imprimer les images ou les agrandir, ou pour visionner des vidéos ou des audios en haute qualité.
Pour une utilisation web, il est primordial de réduire au maximum le poids du média afin de ne pas ralentir votre site.
Les classiques : JPEG et PNG
Pour les images, on va généralement préférer le format JPEG qui permet une compression avec pertes à un niveau imperceptible à l’œil nu. J’en profite pour vous rassurer, jpg et jpeg sont bien la même chose.
C’est souvent le format de base généré lorsque vous prenez des photos avec votre appareil photo.
Pour certaines photos ou illustrations, on va avoir besoin d’ajouter une couche pour gérer la transparence. C’est là que le format PNG devient intéressant. Il a l’inconvénient d’être en général plus lourd que le JPEG car de meilleure qualité.
Pour convertir vos fichiers dans le bon format, je vous recommande à nouveau d’utiliser un logiciel sur votre ordinateur plutôt que d’envoyer tous vos fichiers en ligne, pour des raisons d’impact environnemental du numérique, mais aussi d’efficacité.
Beaucoup de logiciels vous permettront de traiter en lot vos images, et en quelques clics de les convertir au bon format, avec le taux de compression souhaité, de les redimensionner et de les renommer, comme XnView MP que j’ai mentionné plus tôt.
Si vous préférez passer par des logiciels en ligne, vous pouvez vous tourner vers TinyPNG ou Squoosh qui sont assez efficaces.
Les nouveaux formats : WEBP et AVIF
Depuis quelques années, le WEBP est devenu un format de référence pour le web, car il combine l’avantage de la transparence du PNG et la légèreté du JPEG. Avec une compatibilité de 97% à l’heure où j’écris ces lignes, on le trouve maintenant partout.
Le format AVIF est aussi en plein essor, avec une compatibilité de 94%.
Ces formats permettent d’importants gains sur le poids du fichier (souvent supérieurs à 50%).
En général, on garde quand même le format d’origine (PNG ou JPEG) et la conversion en WEBP (ou AVIF) se fait sur le serveur web. L’avantage est de pouvoir servir le format d’origine pour les vieux navigateurs web. Mais c’est aussi un choix pragmatique. En effet, peu de gens convertissent leurs images dans ces nouveaux formats avant des les charger sur leur site (vous ignoriez peut-être même que ces formats existaient avant de lire cet article !).
Pour l’ensemble de mes clients, je mets en place un système automatisé de conversion et de remplacement des images via Litespeed, pour leur assurer de bonnes performances et leur simplifier la tâche.
Le cas particulier du SVG
Je termine avec le SVG, ou format vectoriel. Il est principalement utilisé pour les icones, mais aussi pour les illustrations et les logos. C’est un format très léger qui n’est pas matriciel contrairement aux autres formats mentionnés précédemment.
Plus simplement, ça veut dire que l’image peut être agrandie à l’infini sans perte, puisqu’elle est construite selon des formules mathématiques.
Ce format n’est pas adapté aux photos et aux illustrations complexes.
C’est aussi un format qui peut poser des risques de sécurité car du code malicieux peut y être introduit. D’où l’importance de procéder à une désinfection du fichier à l’import et à ne pas permettre à n’importe qui d’importer des images dans ce format.
En résumé, c’est surtout un format qui sera utilisé par les designers et les développeur⋅ses.
Recadrer et retoucher vos images
La médiathèque de WordPress vous permet de rogner et redimensionner des images déjà importées.
Mais il est préférable de procéder à ces ajustements en amont sur votre ordinateur, pour des raisons pratiques et parce que les possibilités dans WordPress sont assez limitées.
Parfois, un ajustement de la balance des couleurs s’avère aussi nécessaire.
Un bon recadrage permet de mettre en valeur un sujet sur une photo. Il est aussi parfois intéressant de choisir un cadrage différent selon la taille d’écran (par exemple proposer une photo de paysage sur ordinateur mais recentrer la photo sur le sujet pour un affichage sur mobile).
Procédez à ces opérations grâce à votre logiciel de retouche photo. Les options ne manquent pas, si vous cherchez un outil libre et gratuit, Gimp est une alternative très intéressante à Photoshop, mais qui peut s’avérer complexe pour des besoins basiques.
Erreur n°4 : ne pas renseigner les champs meta du média
C’est probablement l’étape la plus oubliée et négligée de toutes.
Peut-être parce que peu de gens savent à quoi servent tous ces champs d’information qui apparaissent une fois un média ajouté dans la médiathèque.
Le titre
Par défaut, lors de l’import de votre fichier, le titre enregistré reprendra celui de votre fichier (sans son extension).
En conséquent, si vous avez déjà en amont renommé vos fichiers correctement, le titre doit faire du sens.
Le titre a surtout de l’intérêt pour vous aider à retrouver un fichier plus tard dans votre médiathèque en procédant à une recherche par nom. Mais c’est aussi le titre principal qui sera utilisé si l’image est attachée à une page (voir description ci-après).
Le alt text
C’est peut-être l’élément le plus important à considérer.
Le alt text est un texte alternatif qui sera affiché si l’image n’est pas affichée à l’écran. Mais c’est surtout le texte qui sera lu par les liseuses d’écran et les robots d’exploration sur votre site.
Autrement dit, les personnes qui reposent sur des technologies d’assistance visuelle ont besoin d’entendre le contenu du alt text de votre image pour comprendre de quoi il s’agit.
Et les robots des moteurs de recherche qui visitent votre site afin de vous référencer vont aussi s’intéresser à vos médias. Les robots ne “voient” pas les images mais peuvent lire le alt text.
Les règles de rédaction du alt text demanderaient un article complet, mais retenez juste ceci pour l’instant: votre alt text doit être concis et descriptif. Si votre média est utilisé à simple titre décoratif et n’a pas d’autre intérêt, laissez le alt text vide pour ne pas gêner la lecture de votre site aux personnes utilisant une liseuse d’écran.
La légende
C’est le texte qui apparaît sous vos images lorsque vous les insérez.
Vous pouvez bien sûr choisir de ne pas afficher une légende, et pouvez la modifier au cas par cas si vous utilisez l’image à plusieurs endroits. La renseigner dans la médiathèque vous permet de la générer immédiatement lorsque vous insérerez votre image dans votre article.
La description
Sans doute le champ le moins compris et le moins utile.
En fait, lorsque vous insérez un média dans votre médiathèque, WordPress va potentiellement l’attacher à une page donnée. Par exemple, si vous commencez à rédiger un article de blog, et insérez vos images depuis celui-ci, WordPress comprendra que vos images sont reliées à cet article.
Il deviendra possible d’activer la visualisation de ces images en cliquant dessus comme un élément de cette page d’attachement. Auquel cas le champ description sera alors affiché.
C’est une fonctionnalité qui peut avoir du sens pour les portfolio de photographe par exemple, pour lesquels ça a du sens de mettre le focus sur les images et donc d’apporter des descriptions plus détaillées en les visualisant.
Pour une utilisation plus standard, ne vous inquiétez pas si vous ne remplissez pas ce champ.
Notez qu’il est possible d’écrire de l’html dans ce champ (ainsi que pour le champ de légende), ce qui peut s’avérer pratique pour faire des liens par exemple.
Erreur n°5 : Transformer votre médiathèque en bazar
C’est sans doute l’un des gros points faibles de la médiathèque de base de WordPress. Il est impossible de trier vos médias par dossiers et sous-dossiers comme vous pourriez le faire sur votre ordinateur.
Ce n’est pas un soucis si vous n’avez que peu de fichiers mais ça peut vite devenir un cauchemar si vous gérez un grand nombre de documents, et qu’en plus vous n’avez pas adopté une terminologie précise pour les titres.
Des extensions existent pour remédier à ce problème.
Tous les sites que je construis pour mes clients bénéficient de l’extension HappyFiles Pro avec une licence à vie.
Cette extension permet de classer bien plus que vos médias, car elle peut être utilisée pour organiser vos articles de blog, vos pages, etc.
Bref, un atout indéniable qui va transformer votre manière de gérer vos médias dans WordPress.
Ce qu’il faut retenir pour bien gérer vos médias dans WordPress
Ce guide complet vous a donné les conseils à suivre pour gagner en efficacité, en performance et en accessibilité lorsque vous ajoutez des médias à votre médiathèque.
Voici en condensé les points les plus importants à retenir:
- Demandez vous quels médias seront vraiment utiles sur votre site, et s’ils ne peuvent pas être intégrés depuis une plateforme de streaming dans le cas des vidéo et audios
- Donnez un nom logique à vos fichiers avant de les importer
- Optimisez un minimum vos images avant leur import, en choisissant la résolution et le format adaptés. Recadrez-les si nécessaire.
- Remplissez au moins le titre et le alt text de vos images. Laissez le alt text vide pour les icones et autres médias purement décoratifs.
- Organisez votre médiathèque au fur et à mesure grâce à un outil comme Happyfiles Pro
J’espère que ce guide pour aidera à y voir plus clair et à corriger certaines habitudes. Même si vous ne suivez pas ces indications à 100%, vous verrez que prendre un peu plus de temps pour les mettre en pratique vous facilitera beaucoup la vie et améliorera l’expérience de vos utilisateur⋅trices.
Si vous vous sentez dépassé⋅e ou n’avez pas le temps de suivre ces bonnes pratiques lors de la création de votre contenu, faîtes-vous accompagner. Je propose des forfaits d’infogérance + webmastering adaptés à vos besoins qui incluent la mise en ligne, la mise en forme et l’optimisation de vos articles et contenus web.
