--- title: "Images et médiathèque d'Éclair" description: "Envoie tes photos dans la médiathèque d'Éclair. Redimensionnement, WebP responsive, texte alternatif, image à la une, logo et icône, tout est expliqué." url: "https://eclair.academy/parcours/debutant/images-mediatheque" lang: "fr" author: "Thierry Gustin" published: "2026-11-02" updated: "2026-11-02" --- # Images et médiathèque d'Éclair > **L’essentiel** — La médiathèque d'Éclair accepte les images JPG, PNG, WebP et GIF jusqu'à 20 Mo et 40 mégapixels, et refuse le SVG. Avec l'extension GD, chaque envoi est ré-encodé sans données EXIF ni GPS, ramené à 2000 px de large au plus et décliné en WebP de 480, 800, 1200 et 1600 px. Décris chaque image avec un texte alternatif. La médiathèque d'Éclair range toutes les images de ton site et les optimise dès l'envoi : redimensionnement, conversion en WebP, suppression des données de localisation. Cette leçon t'apprend à envoyer tes photos, à les décrire pour Google et l'accessibilité, puis à les placer dans tes pages, tes articles et ton en-tête. > **Avant de commencer** — Durée : 15 minutes. Prérequis : savoir insérer un bloc ([Écrire et publier son premier article](https://eclair.academy/parcours/debutant/premier-article)). Prépare trois ou quatre photos en JPG ou PNG, par exemple des pièces sorties du four de l'atelier. ## Ce que tu sauras faire ### 📷 Envoyer tes photos Glisser-déposer une ou plusieurs images, depuis Médias ou depuis l'éditeur. ### ⚡ Garder un site rapide Comprendre ce qu'Éclair fait de chaque image pour qu'elle reste légère. ### 🎯 Bien décrire tes images Écrire un texte alternatif utile, à la main ou avec l'IA. ## Envoyer tes images dans la médiathèque d'Éclair 1. Clique sur **Médias** dans le menu latéral. 2. Glisse tes fichiers dans la zone **Glisse tes images ici ou clique pour choisir**, ou clique dessus pour les sélectionner. Tu peux en envoyer plusieurs à la fois. 3. Chaque image affiche sa progression en pourcentage, puis « Envoi terminé » suivi de son nom. ![Médiathèque d'Éclair avec la zone de dépôt et la grille des images envoyées](https://eclair.academy/media/2026/11/eclair-academy-media-fr.webp) *Médias : la zone de dépôt et toutes tes images* Pas besoin de quitter l'éditeur pour autant : la fenêtre **Médiathèque**, qui s'ouvre quand tu choisis une image, a sa propre zone de dépôt, et un bloc **Image** vide accepte qu'on y glisse un fichier. Le champ **Rechercher une image…** filtre la grille par nom de fichier ou par texte alternatif. ## Quels formats et quelles tailles sont acceptés ? | Règle | Limite | Message en cas de refus | | --- | --- | --- | | Formats | JPG, PNG, WebP, GIF | « Format non pris en charge : JPG, PNG, WebP ou GIF uniquement. » | | SVG | Refusé, par sécurité | Le même message | | Poids | 20 Mo par image | « Image trop lourde (20 Mo maximum). » | | Dimensions | 40 mégapixels | « Dimensions d'image invalides ou trop grandes (40 mégapixels maximum). » | | Limite de l'hébergeur | Affichée sous la zone de dépôt | « Fichier trop lourd pour ton hébergement » | Attention au piège le plus courant : ton hébergeur fixe aussi une taille maximale par envoi, parfois inférieure à 20 Mo. Éclair l'indique sous la zone de dépôt : sur la capture ci-dessus, « max. 2M » signifie 2 Mo par envoi, et une photo de 5 Mo y serait refusée. Sur un petit hébergement, une très grande photo peut aussi dépasser la mémoire disponible : Éclair te demande alors de la réduire sous 4000 pixels de large. ## Ce qu'Éclair fait de chaque image Avec l'extension GD de PHP (l'assistant d'installation vérifie sa présence), chaque envoi passe par quatre étapes : - **Ré-encodage** : l'image est réécrite entièrement, ce qui supprime les charges cachées et les données EXIF, coordonnées GPS comprises. Une image qui contient du code est refusée. - **Redimensionnement** : 2000 px de large au maximum. - **Déclinaisons WebP** : 480, 800, 1200 et 1600 px, seulement celles plus petites que ton image, plus une version WebP en pleine taille. - **Affichage optimisé** : dimensions explicites (la page ne saute pas au chargement), chargement différé et priorité donnée à l'image principale. Exemple : Camille envoie une photo de 3000 × 2000 pixels prise au téléphone. Éclair la ramène à 2000 × 1333, efface ses coordonnées GPS et crée des versions WebP de 480, 800, 1200, 1600 et 2000 px. Chaque visiteur télécharge la version adaptée à son écran, jamais l'original de plusieurs mégaoctets. Les GIF animés sont conservés, nettoyés bloc par bloc. Sans l'extension GD, les images restent telles quelles : un bandeau te le signale dans **Médias**, et il vaut mieux les compresser avant l'envoi. ![Lighthouse à 100 dans les quatre catégories, avec le poids d'une page Éclair](https://eclair.academy/media/2026/11/eclair-academy-performance-fr.webp) *Des images légères pour garder un site rapide* ## Rédiger un bon texte alternatif Le texte alternatif décrit l'image pour les personnes malvoyantes, à qui un lecteur d'écran le lit, et pour Google Images. Dans **Médias**, clique sur une image : la fenêtre de détail affiche ses dimensions, son poids et son nombre de versions WebP. Remplis **Texte alternatif**, puis clique sur **Enregistrer**. | À éviter | Mieux | | --- | --- | | `IMG_2045` | Bol en grès émaillé bleu posé sur un tour de potier | | « photo » | Mains d'une élève centrant une motte d'argile pendant un cours | | « céramique céramique Lyon » | Vitrine d'Atelier Nova remplie de vases, vue depuis la rue | - Les images sans texte alternatif portent une pastille **ALT** orange dans la grille : tu repères les oublis d'un coup d'œil. - Si l'assistant IA est activé, le bouton **✨ Décrire avec l'IA** rédige le texte en regardant l'image ([Activer l'assistant IA intégré](https://eclair.academy/parcours/ia-mcp/assistant-ia)). - Saisi une fois dans la médiathèque d'Éclair, ce texte sert partout où l'image apparaît. Dans un bloc Image, tu peux le remplacer pour un contexte précis ; laissé vide, c'est celui de la médiathèque qui s'affiche. ## Placer une image dans une page 1. Dans l'éditeur, tape **/** et choisis **Image**. 2. Clique sur **Ajouter une image** pour choisir dans la médiathèque, ou glisse un fichier dans le bloc. 3. Complète **Légende (facultatif)**, **Texte alternatif** et, si besoin, **Lien (facultatif)**. 4. Choisis la **Taille** : **Normale** (la largeur du texte), **Large** (plus large que la colonne de lecture) ou **Petite** (réduite et centrée). 5. Plus tard, **Changer l'image** remplace la photo sans recréer le bloc. En [mode Visuel](https://eclair.academy/parcours/intermediaire/mode-visuel), un clic sur une image suffit pour en choisir une autre dans la médiathèque. ## Image à la une, image de partage, logo et icône | Image | Où la régler | Bon à savoir | | --- | --- | --- | | Image à la une | Éditeur d'un article › **Document** › **Image à la une** | Affichée en haut de l'article et sur les réseaux sociaux | | Image de partage | Automatique | Une version 1200×630 est générée une fois, à partir de l'image à la une ou de la première image du contenu (600 px de large au moins) | | Image de partage par défaut | **Réglages › SEO** | Utilisée quand un contenu n'a aucune image | | Logo | **Réglages › Apparence › Logo** | PNG ou WebP sur fond transparent, environ 400 px de large | | Icône du site (favicon) | **Réglages › Apparence** | Image carrée d'au moins 512 px ; sans icône, un éclair à ta couleur est généré | ## Supprimer une image sans casser une page Dans la médiathèque d'Éclair, ouvre l'image, clique sur **Supprimer**, puis confirme. Si l'image sert encore, Éclair affiche « Cette image est utilisée ici : » avec la liste des contenus et des réglages concernés (logo, icône, image de partage, photo de profil), puis demande « Supprimer quand même ? ». Le bon réflexe : remplace d'abord l'image là où elle sert. ## À retenir - La médiathèque d'Éclair accepte JPG, PNG, WebP et GIF, jusqu'à 20 Mo et 40 mégapixels ; le SVG est refusé. - Avec GD, chaque image est ré-encodée sans EXIF ni GPS, limitée à 2000 px de large et déclinée en WebP de 480 à 1600 px. - Un texte alternatif précis sert l'accessibilité et Google Images ; la pastille ALT signale les oublis. - L'image de partage 1200×630 est automatique ; logo et icône se règlent dans **Réglages › Apparence**. ## Pour aller plus loin - [Créer une page avec l'IA et retoucher ses textes](https://eclair.academy/parcours/ia-mcp/creer-page-ia) : Décrire avec l'IA et image à la une créée par l'IA. - [Thèmes et apparence](https://eclair.academy/parcours/intermediaire/themes-apparence) : logo, icône, couleur et polices de ton site. - [Performance : garder 100 sur 100](https://eclair.academy/parcours/expert/performance) : images, polices et poids des pages. - Sources externes : les [bonnes pratiques de Google pour les images](https://developers.google.com/search/docs/appearance/google-images) et le [tutoriel du W3C sur les textes alternatifs](https://www.w3.org/WAI/tutorials/images/). ## Questions fréquentes ### Pourquoi mon image SVG est-elle refusée ? Par sécurité, Éclair n'accepte pas le SVG, un format qui peut contenir du code. Exporte ton logo en PNG ou en WebP sur fond transparent, puis envoie-le. ### Mon image de 15 Mo est refusée alors que la limite est de 20 Mo, pourquoi ? Ton hébergeur fixe sa propre limite par envoi, indiquée sous la zone de dépôt. Réduis l'image avant de l'envoyer, ou vois avec ton hébergeur si cette limite peut être relevée. ### Faut-il convertir mes photos en WebP avant de les envoyer ? Non. Envoie-les en JPG ou en PNG : Éclair crée lui-même les versions WebP, si l'extension GD de ton hébergement prend ce format en charge. ### Les coordonnées GPS de mes photos sont-elles publiées ? Non, si l'extension GD est active : chaque image est alors ré-encodée à l'envoi, ce qui supprime les données EXIF, GPS compris. Sans GD, les fichiers restent tels quels, d'où l'intérêt de vérifier ce point.