Images et médiathèque d'Éclair
- 1. Découvrir Éclair CMS
- 2. Préparer son installation
- 3. Installer Éclair pas à pas
- 4. Prendre en main l'administration d'Éclair
- 5. Écrire et publier son premier article
- 6. Pages, menus et page d'accueil
- 7. Images et médiathèque d'Éclair
- 8. Formulaire de contact et messages
- 9. Les réglages essentiels avant le lancement
Sommaire
- Envoyer tes images dans la médiathèque d'Éclair
- Quels formats et quelles tailles sont acceptés ?
- Ce qu'Éclair fait de chaque image
- Rédiger un bon texte alternatif
- Placer une image dans une page
- Image à la une, image de partage, logo et icône
- Supprimer une image sans casser une page
- À retenir
- Pour aller plus loin
- Questions fréquentes
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.
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
- Clique sur Médias dans le menu latéral.
- 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.
- Chaque image affiche sa progression en pourcentage, puis « Envoi terminé » suivi de son nom.
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.
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é).
- 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
- Dans l'éditeur, tape / et choisis Image.
- Clique sur Ajouter une image pour choisir dans la médiathèque, ou glisse un fichier dans le bloc.
- Complète Légende (facultatif), Texte alternatif et, si besoin, Lien (facultatif).
- Choisis la Taille : Normale (la largeur du texte), Large (plus large que la colonne de lecture) ou Petite (réduite et centrée).
- Plus tard, Changer l'image remplace la photo sans recréer le bloc.
En 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 : Décrire avec l'IA et image à la une créée par l'IA.
- Thèmes et apparence : logo, icône, couleur et polices de ton site.
- Performance : garder 100 sur 100 : images, polices et poids des pages.
- Sources externes : les bonnes pratiques de Google pour les images et le tutoriel du W3C sur les textes alternatifs.
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.