Skip to Content
WordPressPartie 14 — Mini-jeux (exploration guidée)04 — Images & médias

Terrain 04 — Images & médias

⏱️ TL;DR — 25 mini-jeux ⭐→⭐⭐ sur la médiathèque : téléverser, insérer, décrire (alt), redimensionner, comprendre les tailles générées, galeries, vidéos, fichiers. À la fin, tu gères les médias proprement — et tu sais pourquoi une image « pèse » sur les perfs.

🕹️ Mini-jeu 1 — Téléverser dans la médiathèque ⭐ ✍️

But : peupler la bibliothèque. Mission : ajoute 3 images à la médiathèque. Étapes :

  1. Médias → Ajouter → glisse-dépose 3 images.
  2. Médias → Bibliothèque : elles apparaissent.

✅ Solution

La médiathèque centralise tous les fichiers du site. Un média y existe indépendamment de tout article : on peut le réutiliser partout. Les fichiers vont dans wp-content/uploads/AAAA/MM/.

🕹️ Mini-jeu 2 — Insérer une image dans un article ⭐ ✍️

But : image dans le contenu. Mission : ajoute un bloc Image à un article. Étapes :

  1. Éditeur → + → Image → « Médiathèque » → choisis.

✅ Solution

L’image dans le contenu (bloc Image) diffère de l’image à la une (vignette de l’article, terrain 03). Une même image peut jouer les deux rôles.

🕹️ Mini-jeu 3 — Le texte alternatif ⭐⭐ ✍️

But : accessibilité + SEO. Mission : renseigne l’alt d’une image. Étapes :

  1. Sélectionne le bloc Image → panneau → Texte alternatif.
  2. Décris l’image en une phrase utile.

✅ Solution

L’alt est lu par les lecteurs d’écran et les moteurs. Décrire, pas bourrer de mots-clés. Une image décorative peut avoir un alt vide. Réflexe pro et légal (accessibilité).

🕹️ Mini-jeu 4 — Légende & titre ⭐⭐ ✍️

But : distinguer les métadonnées. Mission : ajoute une légende visible et note où est le titre.

✅ Solution

La légende (caption) s’affiche sous l’image ; le titre est interne (attribut, infobulle selon thème) ; l’alt est pour l’accessibilité ; la description vit dans la médiathèque. Quatre champs, quatre usages.

🕹️ Mini-jeu 5 — Aligner et redimensionner ⭐⭐ ✍️

But : mise en page d’image. Mission : aligne une image à droite, réduis-la à 50 %. Étapes :

  1. Barre d’outils du bloc → alignement → Droite.
  2. Poignées de redimensionnement ou panneau → dimensions.

✅ Solution

Alignements : gauche/centre/droite/large/pleine largeur. « Large » et « pleine largeur » débordent du contenu si le thème le supporte (alignwide/alignfull). Le texte habille les alignements gauche/droite.

🕹️ Mini-jeu 6 — Lier une image ⭐⭐ ✍️

But : rendre l’image cliquable. Mission : lie une image vers « Fichier média » puis teste en visiteur. Étapes :

  1. Bloc Image → barre d’outils → Insérer un lien → « Fichier média ».

✅ Solution

Options de lien : Fichier média (ouvre l’image plein format), Page du fichier joint (page dédiée WordPress), ou URL personnalisée. « Fichier média » + une lightbox = zoom au clic.

🕹️ Mini-jeu 7 — Les tailles générées ⭐⭐⭐ 💻

But : comprendre la multiplication des fichiers. Mission : téléverse une grande image, puis regarde combien de fichiers WordPress a créés. Étapes :

  1. Ouvre wp-content/uploads/AAAA/MM/.
  2. Compte les variantes -150x150, -300x…, -1024x….

✅ Solution

À chaque upload, WordPress génère plusieurs tailles (thumbnail, medium, large + tailles du thème). Cela remplit uploads/ mais permet de servir la bonne taille selon l’écran (jeu 20). D’où l’intérêt de ne pas uploader du 6000px inutilement.

🕹️ Mini-jeu 8 — Régler les dimensions par défaut ⭐⭐ 🛠️

But : contrôler les tailles. Mission : change la taille « Moyenne » dans les réglages. Étapes :

  1. Réglages → Médias → dimensions Miniature/Moyenne/Grande.

✅ Solution

Réglages → Médias fixe les 3 tailles cœur. Les nouvelles valeurs s’appliquent aux futurs uploads (les anciens gardent leurs tailles → régénérer, jeu 9). La miniature peut être recadrée en carré (case dédiée).

🕹️ Mini-jeu 9 — Régénérer les miniatures ⭐⭐ 🛠️

But : recréer les tailles après changement. Mission : installe « Regenerate Thumbnails » et régénère. Étapes :

  1. Extensions → Ajouter → « Regenerate Thumbnails » → Installer/Activer.
  2. Outils → Regenerate Thumbnails → lance.

✅ Solution

Changer les dimensions n’affecte pas le passé : cette extension recrée les variantes des médias existants. Étape classique après un changement de thème (nouvelles tailles). En CLI : wp media regenerate (terrain 11).

🕹️ Mini-jeu 10 — Une galerie ⭐⭐ ✍️

But : grille d’images. Mission : crée un bloc Galerie de 4 images en 2 colonnes. Étapes :

  1. + → Galerie → sélectionne 4 images.
  2. Panneau → Colonnes = 2 ; option « Recadrer les images ».

✅ Solution

Le bloc Galerie dispose plusieurs images en grille responsive (colonnes réglables). Depuis WordPress 5.9+, c’est un conteneur de blocs Image (chaque image reste éditable). Idéal portfolio/produits.

🕹️ Mini-jeu 11 — Une image de couverture avec titre ⭐⭐ ✍️

But : bannière avec texte superposé. Mission : crée un bloc Couverture avec un titre par-dessus. Étapes :

  1. + → Couverture → choisis une image → tape un titre dessus.
  2. Panneau → règle l’opacité de la surimpression.

✅ Solution

Le bloc Couverture (Cover) superpose du texte/blocs sur une image ou couleur, avec overlay réglable — le hero de page classique. Il accepte une image ou une vidéo de fond.

🕹️ Mini-jeu 12 — Remplacer un fichier média ⭐⭐ ✍️

But : mettre à jour une image partout. Mission : remplace une image du bloc par une autre. Étapes :

  1. Bloc Image → barre d’outils → Remplacer.

✅ Solution

« Remplacer » change l’image de ce bloc. Pour remplacer le fichier partout où il est utilisé (même URL), il faut une extension « Enable Media Replace ». Nuance importante : bloc vs fichier source.

🕹️ Mini-jeu 13 — Détails d’un média ⭐ 🛠️

But : lire les infos d’un fichier. Mission : ouvre un média et lis son URL, ses dimensions, sa date. Étapes :

  1. Médias → clique un média → volet de détails.
  2. Copie l’URL du fichier.

✅ Solution

Chaque média a une fiche : URL directe, dimensions, taille, date, et les champs alt/légende/description. L’URL sert pour un usage manuel (CSS, e-mail). L’ID du média (dans l’URL item=NN) est utile en code.

🕹️ Mini-jeu 14 — Vue grille vs liste ⭐ 🛠️

But : deux façons de gérer. Mission : bascule la médiathèque en vue Liste. Étapes :

  1. Médias → Bibliothèque → icônes grille/liste en haut à gauche.

✅ Solution

La vue liste offre colonnes, actions groupées et tri (utile pour du ménage) ; la grille est visuelle. Choisis selon la tâche (parcourir vs administrer).

🕹️ Mini-jeu 15 — Filtrer et chercher un média ⭐ 🛠️

But : retrouver vite. Mission : filtre par type « Images » et cherche par nom.

✅ Solution

Filtres par type (image/audio/vidéo/document) et par date, plus recherche par nom/texte. Sur un gros site média, ces filtres sont vitaux. Des extensions ajoutent des dossiers de médias.

🕹️ Mini-jeu 16 — Supprimer un média utilisé ⭐⭐ ✍️

But : mesurer l’impact. Mission : insère une image dans un article, supprime le média, observe l’article.

✅ Solution

WordPress ne vérifie pas où un média est utilisé : le supprimer casse l’affichage là où il servait (image cassée). Toujours vérifier avant. Des extensions détectent les médias « non utilisés ».

🕹️ Mini-jeu 17 — Les images responsives ⭐⭐⭐ 💻

But : voir le srcset automatique. Mission : inspecte le HTML d’une image en front (outils dev navigateur). Étapes :

  1. Page publique avec image → clic droit → Inspecter.
  2. Repère srcset et sizes sur la balise <img>.

✅ Solution

WordPress ajoute automatiquement srcset/sizes : le navigateur choisit la taille adaptée à l’écran. C’est pour ça que les tailles générées (jeu 7) existent. Perf « responsive images » gratuite, sans code.

🕹️ Mini-jeu 18 — Alléger une image avant upload ⭐⭐ ✍️

But : performance. Mission : compare le poids d’une photo brute (5 Mo) et redimensionnée à 1600px.

✅ Solution

Uploader du 6000px/5 Mo alourdit le site et uploads/. Bonne pratique : redimensionner à la largeur d’affichage max (~1600–2000px) et compresser. Des extensions (Smush, ShortPixel) automatisent la compression.

🕹️ Mini-jeu 19 — Le WebP ⭐⭐⭐ 💻

But : formats modernes. Mission : téléverse une image .webp et vérifie qu’elle s’affiche.

✅ Solution

WordPress accepte le WebP (plus léger que JPEG/PNG à qualité égale) depuis 5.8. Des extensions convertissent automatiquement en WebP/AVIF et servent le bon format. Levier perf important pour un site image-lourd.

🕹️ Mini-jeu 20 — Une vidéo ⭐⭐ ✍️

But : média vidéo. Mission : ajoute une vidéo, d’abord par embed YouTube, puis par bloc Vidéo hébergé. Étapes :

  1. + → YouTube → colle une URL.
  2. Puis + → Vidéo → téléverse un petit .mp4.

✅ Solution

Embed = la vidéo reste chez YouTube (léger pour ton serveur, recommandé). Bloc Vidéo hébergé = fichier sur ton serveur (contrôle total, mais lourd et sans streaming adaptatif). Pour du volume, préfère l’embed ou un hébergeur vidéo.

🕹️ Mini-jeu 21 — Audio et podcast ⭐⭐ ✍️

But : média audio. Mission : ajoute un bloc Audio avec un .mp3.

✅ Solution

Le bloc Audio intègre un lecteur natif. Base d’un podcast simple. Comme la vidéo, un audio lourd auto-hébergé pèse sur la bande passante ; envisage un hébergeur dédié pour du volume.

🕹️ Mini-jeu 22 — Un PDF téléchargeable ⭐⭐ ✍️

But : proposer un document. Mission : ajoute un bloc Fichier pointant un PDF. Étapes :

  1. + → Fichier → téléverse un PDF.
  2. Option « Afficher le bouton de téléchargement ».

✅ Solution

Le bloc Fichier insère un lien + bouton de téléchargement (et un aperçu intégré pour les PDF). Idéal fiches, brochures, ressources. Le fichier vit dans la médiathèque comme les images.

🕹️ Mini-jeu 23 — Le dossier uploads ⭐⭐⭐ 💻

But : vue développeur du stockage. Mission : explore wp-content/uploads/ dans le système de fichiers.

✅ Solution

Les médias sont rangés par année/mois (uploads/2026/07/). C’est un simple dossier : sauvegardable, synchronisable, déplaçable (avec précaution). Comprendre que WordPress = base de données + ce dossier fichiers est clé pour migrer/sauvegarder.

🕹️ Mini-jeu 24 — Organiser sans dossiers ⭐⭐ 🛠️

But : ranger une grosse médiathèque. Mission : réfléchis à une convention de nommage des fichiers avant upload.

✅ Solution

Nativement, pas de dossiers dans la médiathèque : d’où l’importance de noms de fichiers clairs (produit-rouge-face.jpg) et de l’usage des filtres/recherche. Sinon, une extension « Media Library Folders » ajoute une arborescence.

🕹️ Mini-jeu 25 — Récap médias ⭐⭐ ✍️ 💻

But : consolider. Mission : monte un article avec image à la une + galerie + vidéo embed + PDF, chaque image ayant un alt.

✅ Solution

Tu couvres tout le spectre média : vignette, contenu, galerie, embed, fichier, accessibilité. Tu sais aussi pourquoi (tailles, responsive, poids). Place à l’éditeur de blocs en profondeur (terrain 05).

Terrain suivant : 05 — Éditeur de blocs (Gutenberg).

03 — Articles & pages05 — Éditeur de blocs (Gutenberg)