Médias : images et texte alternatif

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

Objectif : À la fin de cette leçon, vous saurez bien préparer, téléverser et décrire vos images, afin qu'elles se chargent vite, s'affichent nettement et soient utilisables par tous.

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

Ce qui se passe lorsque 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 en fait alors plus que vous ne le pensez :

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

Une seule photo devient ainsi facilement huit fichiers ou plus. C'est pourquoi le dossier uploads grossit si 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 toutes ces tailles. Le navigateur choisit lui-même la plus petite taille suffisamment nette pour l'écran. Un téléphone charge alors la taille de 768 pixels, un grand écran celle de 1536. Cela ne fonctionne bien que si ces tailles existent, donc si vous téléversez via la médiathèque et non par FTP.

Réduire et compresser à l'avance

Même avec ces tailles automatiques, il vaut la peine de réduire vos photos à l'avance :

• Dimensions : une photo qui n'est jamais affichée sur votre site à plus de 1 600 pixels de large n'a pas besoin de faire 4 000 pixels. Réduisez-la au préalable à environ 2 000 pixels sur le grand côté. Vous économisez ainsi de l'espace de stockage, de la taille de sauvegarde et du temps de téléversement.
• Compression : un JPEG en qualité 75 à 85 paraît presque identique à l'œil nu à un JPEG en qualité 100, mais il est souvent deux fois plus léger.
• Métadonnées : les photos prises avec un téléphone contiennent souvent la position GPS de l'endroit où elles ont été prises. Si vous ne voulez pas que tout le monde sache où vous habitez, supprimez-la avant de téléverser. WordPress retire beaucoup de métadonnées des tailles réduites, mais l'original peut encore les contenir.

Il existe des extensions qui compressent les images lors du téléversement ou les convertissent dans un format plus moderne. C'est pratique, mais vérifiez si elles le font sur votre propre serveur ou si elles envoient les photos à un service externe (leçon 9.3), et demandez-vous si vous avez vraiment besoin d'une extension alors que vous pouvez le faire à l'avance.

Quel format

Si votre serveur ne peut pas traiter un format, WordPress affiche une erreur lors du téléversement ou ne crée pas de tailles plus petites. Dans Outils > Santé du site, vous voyez dans l'onglet Infos, sous Gestion des médias, quels formats votre serveur prend en charge.

Chargement différé (lazy loading)

Depuis WordPress 5.5, les images reçoivent automatiquement loading="lazy" : le navigateur ne charge une image que lorsque vous faites défiler la page jusqu'à elle. Une longue page contenant beaucoup de photos devient ainsi bien plus rapide. WordPress laisse volontairement 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 être visible le plus vite possible. Nous y reviendrons dans la leçon 6.3.

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

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

Le texte alternatif (alt) décrit ce que montre une image. Les lecteurs d'écran le lisent aux visiteurs aveugles et malvoyants, et il s'affiche lorsque 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 pas cher vélo (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 filet, un motif d'arrière-plan), laissez le texte alternatif vide. Un lecteur d'écran l'ignorera alors. Vide n'est pas la même chose qu'absent : face à une image sans alt, un lecteur d'écran lit souvent le nom du fichier. Une image qui sert de lien (par exemple un logo qui mène à la page d'accueil) décrit la destination du lien : Vers la page d'accueil du magasin de vélos Le Rayon.

Dans la médiathèque, vous saisissez le texte alternatif sur l'image elle-même, et dans l'éditeur de blocs, dans le bloc Image. Attention : un texte alternatif saisi dans la médiathèque ne change pas automatiquement pour les images déjà placées sur des pages.

Noms de fichiers et droit d'auteur

• Nom de fichier : velo-electrique-reglage-freins.jpg en dit plus que IMG_4032.jpg et figure dans l'adresse de l'image. Utilisez des minuscules, des tirets et aucun espace.
• 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 sous 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 dans la médiathèque et dans uploads, avec toutes ses tailles. Sur un site qui contient des années de contenu, cela s'accumule. Faites le ménage de temps en temps, mais prudemment : une image peut être utilisée à un endroit que la médiathèque ne voit pas (dans un réglage du thème, un widget ou un e-mail). Faites d'abord une sauvegarde.

Résumé

• WordPress crée plusieurs tailles à partir de chaque téléversement et réduit les grandes photos à 2 560 pixels ; le navigateur choisit la taille adaptée via srcset.
• Réduisez et compressez vos photos à l'avance et supprimez les données de localisation.
• Utilisez JPEG ou WebP pour les photos, PNG pour les logos et les captures d'écran ; SVG uniquement avec une extension qui nettoie le fichier.
• Le chargement différé est automatique, sauf pour la première grande image ; la largeur et la hauteur évitent les décalages de mise en page.
• 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. Saisissez l'adresse de votre site. Le programme lit la page d'accueil et examine les 20 premières images : ont-elles un attribut alt (vide est autorisé, absent ne l'est pas), ont-elles une largeur et une hauteur, et quel est le poids de chaque fichier (via une requête HEAD) ? Les images de plus de 300 ko sont signalées. Corrigez ce qui apparaît en rouge dans votre médiathèque ou sur la page, puis relancez la vérification.

Pour aller plus loin

Ces articles décrivent les étapes dans les panneaux de WebOké ; dans d'autres panneaux, elles fonctionnent de manière 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
• 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/