Médias : images et texte alternatif

Module 4: Créer du contenu · Temps de lecture : 9 minutes

Objectif pédagogique : après cette leçon, vous saurez préparer, téléverser et décrire correctement vos images, afin qu'elles se chargent rapidement, qu'elles soient nettes et qu'elles soient utilisables par tous.

Notions clés : médiathèque, formats d'images, big image threshold (2560 pixels), JPEG, PNG, WebP, AVIF, compression, srcset, chargement différé, texte alternatif, nom de fichier, droit d'auteur

Ce qui se passe quand vous téléversez une photo

Vous téléversez une photo prise avec votre téléphone : 4 000 sur 3 000 pixels, 5 Mo. WordPress fait alors plus de choses que vous ne le pensez :

1. Si la photo est plus large ou plus haute que 2 560 pixels, WordPress crée une version réduite (avec -scaled dans le nom) et l'utilise comme « original ». Le véritable original reste également conservé. C'est ce qu'on appelle le big image threshold, qui existe depuis WordPress 5.3.
2. WordPress crée en plus une série de formats plus petits : miniature (par défaut 150 x 150 pixels, recadrée), moyen (300), grand (1024), et des formats supplémentaires de 768, 1536 et 2048 pixels de large. Votre thème et vos extensions y ajoutent souvent leurs propres formats.
3. Toutes les versions se retrouvent dans wp-content/uploads/2026/11/ (année et mois du téléversement).

Une seule photo peut ainsi rapidement devenir huit fichiers, voire plus. C'est pourquoi le dossier uploads grossit aussi vite (leçon 1.3), et c'est pourquoi ce que vous téléversez a de l'importance.

Sur la page, WordPress ajoute à une image un attribut srcset : une liste de tous ces formats. Le navigateur choisit lui-même le format le plus petit qui reste suffisamment net pour l'écran. Un téléphone chargera alors le format de 768 pixels, un grand écran celui de 1536. Cela ne fonctionne correctement que si ces formats existent, donc si vous téléversez via la médiathèque et non par FTP.

Réduire et compresser au préalable

Même avec ces formats automatiques, il est utile de réduire vos photos au préalable :

• Dimensions : une photo qui ne sera jamais affichée plus large que 1 600 pixels sur votre site n'a pas besoin de faire 4 000 pixels de large. Réduisez-la au préalable à environ 2 000 pixels sur le côté le plus long. Cela réduit l'espace de stockage, la taille des sauvegardes et le temps de téléversement.
• Compression : un JPEG avec une qualité de 75 à 85 semble presque identique à l'œil qu'une qualité de 100, mais est souvent deux fois plus léger.
• Métadonnées : les photos prises avec un téléphone contiennent souvent la position GPS du lieu où elles ont été prises. Si vous ne voulez pas que tout le monde sache où vous habitez, retirez ces informations avant de téléverser. WordPress supprime une grande partie des métadonnées dans les formats réduits, mais l'original peut encore les contenir.

Certaines extensions compressent les images au moment du téléversement ou les convertissent vers un format plus moderne. C'est pratique, mais vérifiez si elles le font directement sur votre propre serveur ou si elles envoient les photos vers un service externe (leçon 9.3), et si une extension est vraiment nécessaire si vous pouvez aussi le faire vous-même au préalable.

Quel format choisir

Si votre serveur ne peut pas traiter un format, WordPress affiche une erreur lors du téléversement ou ne crée pas de formats plus petits. Dans Outils > Santé du site (onglet Informations, sous Gestion des médias), vous pouvez voir quels formats votre serveur prend en charge.

Chargement différé

Depuis WordPress 5.5, les images reçoivent automatiquement l'attribut loading="lazy" : le navigateur ne charge une image que lorsque vous faites défiler jusqu'à elle. Cela rend une longue page contenant beaucoup de photos bien plus rapide. WordPress laisse délibérément la première grande image en haut de la page sans chargement différé et lui donne souvent la priorité avec fetchpriority="high", car elle doit s'afficher le plus vite possible. Vous reviendrez sur ce point dans la leçon 6.3.

Indiquez aussi toujours la largeur et la hauteur d'une image (WordPress le fait automatiquement pour les images provenant de la médiathèque). Le navigateur réserve alors l'espace à l'avance et le texte ne bouge pas lorsque la photo apparaît.

Texte alternatif : pour ceux qui ne voient pas l'image

Le texte alternatif (texte de remplacement) décrit ce que représente une image. Les lecteurs d'écran le lisent à voix haute aux visiteurs aveugles et malvoyants, et il s'affiche si l'image ne se charge pas. Les moteurs de recherche l'utilisent pour comprendre l'image.

Un bon texte alternatif décrit ce que l'image exprime dans ce contexte précis :

• Mauvais : IMG_4032.jpg ou photo.
• Mauvais : magasin de vélos vélo vélo électrique acheter vélo pas cher (empiler des mots clés n'aide personne).
• Bon : Un mécanicien règle les freins d'un vélo électrique bleu dans l'atelier.

Si une image est purement décorative (un trait, un motif d'arrière-plan), laissez le texte alternatif vide. Un lecteur d'écran l'ignorera alors. Vide est différent d'absent : une image sans attribut alt fait souvent lire le nom du fichier à voix haute par un lecteur d'écran. Une image qui constitue un lien (par exemple un logo qui renvoie vers la page d'accueil) décrit vers où mène ce lien : Vers la page d'accueil de Fietsenwinkel De Spaak.

Dans la médiathèque, vous renseignez le texte alternatif directement sur l'image, et dans l'éditeur de blocs, au niveau du bloc image. Attention : un texte alternatif que vous saisissez dans la médiathèque ne se répercute pas automatiquement sur les images déjà présentes sur des pages.

Noms de fichiers et droit d'auteur

• Nom de fichier : e-bike-remmen-afstellen.jpg en dit plus que IMG_4032.jpg et apparaît dans l'adresse de l'image. Minuscules, tirets, pas d'espaces.
• Droit d'auteur : une image trouvée sur Google Images n'est pas libre d'utilisation. Les photographes et les banques d'images envoient régulièrement des factures pour une utilisation sans licence. Utilisez vos propres photos, des photos avec une licence claire ou une banque d'images dont vous connaissez les conditions, et conservez la preuve de votre licence.

Stockage et nettoyage

La médiathèque ne se nettoie pas toute seule. Une image que vous retirez d'une page reste présente dans la médiathèque et dans le dossier uploads, avec tous ses formats. Sur un site contenant du contenu accumulé pendant des années, cela finit par s'accumuler. Faites le tri de temps en temps, mais avec prudence : une image peut être utilisée à un endroit que la médiathèque ne voit pas (dans un réglage de thème, un widget ou un e-mail). Faites d'abord une sauvegarde.

Résumé

• WordPress crée plusieurs formats à partir de chaque téléversement et réduit les grandes photos à 2 560 pixels ; le navigateur choisit le format adapté via srcset.
• Réduisez et compressez vos photos au préalable, et retirez les données de localisation.
• Utilisez le JPEG ou le WebP pour les photos, le PNG pour les logos et les captures d'écran ; le SVG uniquement avec une extension qui le nettoie.
• Le chargement différé fonctionne automatiquement, sauf pour la première grande image ; la largeur et la hauteur évitent les décalages visuels.
• Un texte alternatif décrit ce que l'image exprime dans son contexte ; une image purement décorative reçoit un texte alternatif vide.

Quiz

Exercice

Exercice A4.4 : Images sur votre page d'accueil. Indiquez l'adresse de votre site. Le programme lit la page d'accueil et examine les 20 premières images : possèdent-elles un attribut alt (vide autorisé, mais pas absent), ont-elles une largeur et une hauteur définies, et quelle est la taille de chaque fichier (via une requête HEAD) ? Les images dépassant 300 Ko sont signalées. Corrigez ce qui est signalé en rouge dans votre médiathèque ou sur la page, puis vérifiez à nouveau.

Pour aller plus loin

Ces articles décrivent les étapes dans les panneaux de WebOké ; dans les autres panneaux, le fonctionnement est similaire.

• Guide DirectAdmin 18.5: Téléversement trop volumineux (erreur 413) ou délai d'attente dépassé
• Le téléchargement a échoué : veuillez augmenter upload_max_filesize et max_execution_time
• Écran de la médiathèque (wordpress.org, en anglais) : https://wordpress.org/documentation/article/media-library-screen/
• Rédiger des textes alternatifs (W3C, en anglais) : https://www.w3.org/WAI/tutorials/images/decision-tree/