1.3Médias : images, galeries & optimisation
L'essentiel en 30 secondes
- La bibliothèque de médias centralise images, PDF et vidéos ; on les réutilise sans les envoyer deux fois.
- Redimensionner avant d'envoyer et compresser : une photo brute de plusieurs Mo est le premier facteur de lenteur.
- Toujours renseigner le texte alternatif (alt) : accessibilité pour les lecteurs d'écran et référencement.
Mini-cas filé — les photos de Hassan
Hassan envoie des photos de vases prises au smartphone, parfois 6 Mo chacune. Samir doit les publier dans une galerie sans rendre le site lent. Il montre à Hassan comment redimensionner, compresser et décrire les images. Il en profite pour expliquer le texte alternatif : utile aux personnes malvoyantes et à Google Images.
Suite du cas 1.2 — la page existe, il faut l'illustrer proprement.
1. Gérer les médias
La bibliothèque de médias (Médias → Bibliothèque) stocke tous les fichiers du site : images, PDF, vidéos. Lorsqu'on insère une image dans un article ou une page, on peut la téléverser ou la choisir dans la bibliothèque — réutiliser évite les doublons et allège le stockage. Le bloc Image gère l'image seule, le bloc Galerie assemble plusieurs visuels avec un nombre de colonnes réglable.
Pour chaque image, le texte alternatif décrit ce qu'elle montre. C'est lu par les lecteurs d'écran et pris en compte par les moteurs de recherche. « Vase en grès émaillé bleu » est utile ; « image1.jpg » ne l'est pas. Samir en fait une règle pour toutes les photos de l'atelier.
2. Optimiser le poids
Une photo de smartphone peut peser 5 à 8 Mo alors que l'affichage n'en demande qu'une fraction. Le premier réflexe est de redimensionner à une largeur utile (souvent 1600 à 2000 px maximum) avant l'envoi, puis de compresser l'image. Le format WebP réduit encore le poids à qualité comparable ; des extensions comme ShortPixel ou Imagify automatisent compression et conversion.
WordPress active nativement le lazy loading : les images hors écran ne se chargent qu'à l'approche du regard, ce qui accélère l'affichage initial. Samir vérifie le poids avant/après et garde des noms de fichiers clairs, utiles pour l'organisation et le référencement.
🔎 Exemple concret — Préparer les photos de l'atelier (cas Samir)
Photo brute : 4032 px, 6,2 Mo.
1. Redimensionner à 1600 px de large.
2. Compresser (qualité 80) → 240 Ko.
3. Téléverser dans Médias.
4. Alt : « Vase en grès émaillé bleu, collection Atlas ».
→ Galerie de 4 photos, chargement rapide.Résultat : un visuel net pour un poids divisé par vingt.
Leçon : la qualité perçue ne dépend pas du poids du fichier.
Vocabulaire de la section
- Bibliothèque de médias
- Stockage centralisé des fichiers du site, réutilisables dans tous les contenus.
Exemple simple : Samir réutilise une photo déjà envoyée pour deux pages.
Ce que ce n'est pas : téléverser dix fois la même image.
Réflexe : un fichier, plusieurs usages.
- Texte alternatif (alt)
- Description d'une image, lue par les lecteurs d'écran et exploitée par les moteurs de recherche.
Exemple simple : « Bol en céramique tourné à la main ».
Ce que ce n'est pas : laisser « image1.jpg » comme description.
Réflexe : pas d'image sans alt utile.
- Optimisation d'image
- Réduire le poids sans perte visible : redimensionner et compresser avant l'envoi.
Exemple simple : 6 Mo ramenés à 240 Ko.
Ce que ce n'est pas : envoyer la photo brute du smartphone.
Réflexe : léger = rapide = mieux référencé.
- WebP
- Format moderne plus léger que JPEG/PNG à qualité égale.
Exemple simple : les photos de l'atelier converties en WebP.
Ce que ce n'est pas : conserver des PNG lourds pour des photos.
Réflexe : photos → WebP si possible.
- Lazy loading
- Chargement différé des images hors écran, natif dans WordPress.
Exemple simple : les photos du bas de galerie ne se chargent qu'au défilement.
Ce que ce n'est pas : désactiver le lazy loading sans raison.
Réflexe : gain de vitesse gratuit.
En pratique — Insérer des images sans plomber le site
- Redimensionnez une photo à 1600 px de large sur votre ordinateur.
- Téléversez-la dans Médias et insérez-la avec le bloc Image en renseignant un alt descriptif.
- Créez une galerie de 3 ou 4 images et réglez le nombre de colonnes.
- Installez une extension de compression, lancez l'optimisation et comparez le poids avant/après.
Script prêt à dire — expliquer l'optimisation (25 s)
« Je prépare vos photos avant de les mettre en ligne : elles restent nettes mais pèsent beaucoup moins, donc le site s'affiche vite, même sur un téléphone. Je décris aussi chaque image pour les personnes malvoyantes et pour Google. »
Parler de vitesse ressentie par le client, pas de kilooctets.
Modèle copier-coller — fiche image
FICHIER : _______________
LARGEUR APRÈS REDIMENSIONNEMENT : _______________
POIDS AVANT / APRÈS : _______________ / _______________
FORMAT : WebP / JPEG / PNG
TEXTE ALTERNATIF : _______________
PAGE D'INSERTION : _______________Galerie produit
Images carrées, WebP, alt précis avec le nom de la pièce.
Photo d'ambiance
Grande image d'en-tête compressée et chargée en priorité.
Logo
PNG ou SVG léger, alt avec le nom de l'atelier.
Documents PDF
Compresser aussi les PDF ; les nommer clairement avant téléversement.
✓ Bonnes pratiques
- Redimensionner et compresser avant tout envoi.
- Écrire un alt descriptif pour chaque image.
- Réutiliser les médias existants au lieu de dupliquer.
✗ Pièges fréquents
- Envoyer des photos brutes de smartphone.
- Laisser le texte alternatif vide.
- Téléverser plusieurs fois la même image.
Points clés à retenir
- La bibliothèque centralise et réutilise les fichiers.
- Redimensionner + compresser = site rapide.
- Le texte alternatif sert l'accessibilité et le SEO.
- WebP et lazy loading allègent encore le chargement.
Défi 48h — appliquez demain
Prenez trois photos : redimensionnez-les, compressez-les et écrivez leur texte alternatif. Insérez-les dans une galerie et comparez le poids total avant/après. 20 minutes.
- Je gère la bibliothèque de médias.
- J'optimise une image avant de l'envoyer.
- Je renseigne un texte alternatif utile.
Questions fréquentes
Quelle taille et quel format pour mes images ?
Une largeur adaptée à l'affichage (rarement plus de 1600-2000 px), en WebP si possible, sinon JPEG pour les photos et PNG pour les logos avec transparence. Une extension de compression automatise conversion et redimensionnement.
Puis-je réutiliser une image déjà envoyée ?
Oui : la bibliothèque conserve tout. À l'insertion, choisissez « Bibliothèque de médias » plutôt que « Téléverser » pour éviter les doublons qui alourdissent le stockage.
Le texte alternatif est-il obligatoire ?
Techniquement non, mais fortement recommandé : il rend le site accessible aux lecteurs d'écran et aide les moteurs à comprendre l'image. Pour une boutique, il peut aussi capter du trafic sur Google Images.
Hassan envoie une photo de vase de 6 Mo prise au smartphone. Que fait Samir avant de l'envoyer ?