# Images, vidéos et animations : des médias qui vendent sans alourdir la page

> Une bonne photo dit en une seconde ce qu’une section entière explique. Dans la vitrine, vous envoyez vos images telles quelles et nous les réduisons pour qu’elles s’ouvrent vite sur téléphone ; vous choisissez leur partie la plus importante, qui ne sera jamais coupée ; vous ajoutez une vidéo YouTube ou Vimeo, ou un court clip muet qui s’anime quand le visiteur l’atteint. Notre exemple : Amine, formateur en photo au smartphone, prépare la page de son cours.

- Durée: Environ 5 minutes
- Qui peut le faire: Toute personne ayant « Modifier les vitrines ».
- Mis à jour: 2026-10-08
- URL: https://www.dirassaplus.com/fr/guide/showcase-media

## En bref
1. Choisissez une section puis « Contenu », et touchez « Choisir une image » ou déposez-la : nous la réduisons pour le téléphone.
2. Touchez la partie la plus importante de la photo, regardez les recadrages « Téléphone » et « Ordinateur », ou donnez au téléphone son propre point focal.
3. Écrivez la « Description de l’image » dans chaque langue de la page : entendue par qui ne voit pas, lue par les moteurs de recherche.
4. Collez un lien YouTube ou Vimeo, et choisissez l’« Orientation de la vidéo » si elle est proposée.
5. Ajoutez un GIF ou une vidéo MP4 muette jusqu’à 30 s et 12 Mo : elle s’anime quand le visiteur l’atteint, avec un bouton d’arrêt.
6. Dans « Résultats en vidéo », aucun clip ne s’affiche avant « L’élève a donné son accord ».

## Avant de commencer
- Une vitrine ouverte dans l’éditeur, et une section avec image ou vidéo : « Ouverture », « L'auteur », « La méthode », « Programme » ou « Résultats en vidéo » par exemple.
- Vos images en JPG, PNG ou WebP, chacune sous 15 Mo. Inutile de les réduire vous-même.
- La vidéo de présentation publiée sur YouTube ou Vimeo. Les vidéos de vos leçons sur la plateforme sont protégées et ne s’affichent pas sur une page publique.
- Pour les animations : un enregistrement d’écran ou un plan court sans son, jusqu’à 30 s et 12 Mo.

## Les étapes

### 1. Envoyer l’image : nous la réduisons
Choisissez la section sur la page, puis l’onglet « Contenu » des « Propriétés » sur ordinateur, ou « Modifier » dans la barre du bas sur téléphone. Dans le champ image, touchez « Choisir une image » ou déposez-la (« Ou déposez-la ici. Nous la réduisons pour qu’elle s’ouvre vite sur téléphone. »). Une image jusqu’à 15 Mo est acceptée ; le navigateur la réduit avant l’envoi à 1 600 px sur le grand côté et environ 350 Ko, si bien qu’une photo de 4 Mo arrive légère. La progression s’affiche (« Envoi… N % »), puis l’image prend sa place. Ensuite « Remplacer l’image » ou « Supprimer l’image » si le champ n’est pas obligatoire. Chaque envoi est un nouveau fichier : « Annuler » ramène l’image précédente, et la page en ligne garde la sienne jusqu’à la prochaine publication.
À l’écran: «Contenu»، «Propriétés»، «Modifier»، «Choisir une image»، «Ou déposez-la ici. Nous la réduisons pour qu’elle s’ouvre vite sur téléphone.»، «Remplacer l’image»، «Supprimer l’image»
Astuce: Dans l’« Ouverture » sans image, la couverture du cours est utilisée, et le bouton n’est jamais posé sur la photo : sa lisibilité ne dépend pas de l’image.
Attention: « Ce fichier n’est pas une image. Choisissez un JPG, PNG ou WebP. » signifie un autre format (HEIC d’iPhone par exemple) : ouvrez-le, exportez-le en JPG, puis envoyez-le.

### 2. Le point focal : l’essentiel n’est jamais coupé
Une même photo est recadrée différemment : en hauteur sur téléphone, en largeur sur ordinateur. « Touchez la partie la plus importante de la photo. Elle reste visible quel que soit le recadrage. » : un visage, une main qui tient l’appareil, une assiette dans la lumière. Un point apparaît où vous touchez ; faites-le glisser ou déplacez-le aux flèches (pas de 5 %, de 1 % avec Maj). Deux aperçus se mettent à jour aussitôt : « Téléphone » et « Ordinateur ». Pour la première image de la section, une option de plus, « Point focal pour » : « Tous les écrans » ou « Téléphone seulement », pour un point propre au téléphone ; s’affiche alors « Différent sur téléphone · » avec « Rétablir » pour l’annuler. Le texte ne change jamais d’un appareil à l’autre, seule l’image.
À l’écran: «Touchez la partie la plus importante de la photo. Elle reste visible quel que soit le recadrage.»، «Téléphone»، «Ordinateur»، «Point focal pour»، «Tous les écrans»، «Téléphone seulement»، «Différent sur téléphone ·»، «Rétablir»
Astuce: Dans les sections qui posent l’image à côté du texte, l’onglet « Disposition » (« Mise en page » sur téléphone) propose « Sur téléphone : l’image après le texte », pour que le titre se lise d’abord sur petit écran.

### 3. La « Description de l’image », dans chaque langue
Sous l’image, le champ « Description de l’image » (« Entendue par les personnes qui ne voient pas l’image, et lue par les moteurs de recherche. »). Décrivez ce que montre l’image en une phrase, pas ce que vous vendez : « Une élève photographie une assiette de pâtisseries près de la fenêtre avec son téléphone ». La description s’écrit pour la langue que vous modifiez : si la page est en arabe et en français, changez la « Langue du contenu » en haut et écrivez-la aussi en français. Un compteur apparaît : environ 125 caractères suffisent, 200 au maximum. En cas d’oubli, « Prête ? » affiche « Images sans description dans la section « … » (N). » avec « Ajouter la description » : une suggestion, qui n’empêche pas de publier.
À l’écran: «Description de l’image»، «Entendue par les personnes qui ne voient pas l’image, et lue par les moteurs de recherche.»، «Langue du contenu»، «Prête ?»، «Ajouter la description»
Astuce: Une image purement décorative n’a pas besoin de description. Décrivez celles qui portent un sens : votre visage, un travail d’élève, le produit.

### 4. Une vidéo YouTube ou Vimeo
Dans le champ vidéo (comme « Vidéo de présentation » de l’« Ouverture »), « Collez un lien YouTube ou Vimeo » : lien de lecture, lien court de partage, Shorts, direct, ou page Vimeo. Le lien est pris dès qu’il est collé, avec son image et le nom de la plateforme. Un lien Shorts est lu en portrait automatiquement ; là où le champ accepte les deux formats, « Orientation de la vidéo » propose « Paysage » ou « Portrait », et une vidéo verticale s’affiche en entier dans « Partagé ». Ajoutez un « Titre de la vidéo » (120 caractères au plus). Sur la page, « La vidéo s’affiche comme une image jusqu’au clic du visiteur : la page reste rapide. » Pour la changer, « Changer la vidéo », ou supprimez-la avec la corbeille (« Supprimer la vidéo »).
À l’écran: «Vidéo de présentation»، «Collez un lien YouTube ou Vimeo»، «Orientation de la vidéo»، «Paysage»، «Portrait»، «Titre de la vidéo»، «Changer la vidéo»، «Supprimer la vidéo»
Astuce: La vidéo de présentation n’est pas une leçon : une à deux minutes, votre visage, un aperçu de ce que l’acheteur va apprendre. Mettez-la sur votre chaîne, même « non répertoriée ».
Attention: Le lien d’une vidéo de vos leçons sur la plateforme est refusé au collage : ces vidéos sont protégées pour vos élèves et ne fonctionneraient pas pour les visiteurs. S’il reste une ancienne vidéo de ce type sur la page, « Prête ? » la compte parmi les corrections avant publication. Mettez un lien YouTube ou Vimeo à la place.

### 5. Le mouvement : un GIF ou une courte vidéo muette
Certaines sections acceptent un écran animé au lieu d’une image : « Écran animé (GIF ou courte vidéo) » pour chaque étape de « La méthode » (disposition « Phases »), « Enregistrement animé (GIF ou courte vidéo) » pour chaque chapitre du « Programme » (disposition « Visite »), et les clips de « Résultats en vidéo ». Touchez « Choisir un GIF ou une courte vidéo » : une vidéo MP4 ou WebM muette jusqu’à 30 s, ou un GIF, jusqu’à 12 Mo. Le fichier est envoyé tel quel, après une première image tirée de lui ; vous le voyez tourner dans le champ avec « Boucle vidéo · N s ». Écrivez une « Courte description ». Sur la page, la première image s’affiche, puis l’animation démarre quand le visiteur l’atteint et s’arrête quand il la dépasse ; chaque clip a son bouton « Arrêter l’animation » / « Lancer l’animation ». Sur les téléphones qui réduisent les animations ou économisent les données, il reste une image fixe jusqu’à ce que la personne le lance elle-même.
À l’écran: «Écran animé (GIF ou courte vidéo)»، «Enregistrement animé (GIF ou courte vidéo)»، «Choisir un GIF ou une courte vidéo»، «Vidéo MP4 muette jusqu’à 30 s (la plus légère) ou GIF, jusqu’à 12 Mo.»، «Courte description»، «S’anime quand le visiteur l’atteint ; reste une image fixe si le téléphone réduit les animations ou économise les données.»، «Remplacer»، «Supprimer»
Astuce: À durée égale, un MP4 est bien plus léger qu’un GIF. Enregistrez 15 secondes d’écran pendant une retouche, exportez sans son : cela passe même sur un réseau lent.
Attention: « Plus de 30 secondes. Raccourcissez-le pour une boucle légère. » ou « Fichier de plus de 12 Mo. Raccourcissez-le ou exportez-le en qualité inférieure. » signifient que rien n’a été envoyé : coupez le clip dans votre logiciel et réessayez.

### 6. « Résultats en vidéo » : seulement avec leur accord
La section « Résultats en vidéo » montre de courts clips verticaux et muets de ce que vos élèves ont réalisé. Dans « Les clips » (12 au plus), chacun a « Le clip », « Prénom », « Ce qu’il a fait » et l’interrupteur « L’élève a donné son accord ». Le clip reste invisible aux visiteurs tant que cet interrupteur est éteint, et toute la section reste masquée tant qu’aucun clip n’a d’accord ; « Prête ? » le rappelle : « Des clips restent masqués tant que l’accord de leurs auteurs n’est pas confirmé. » avec « Confirmer l’accord ». L’onglet « Disposition » propose six formes : « Défilement » (qui s’arrête sous le pointeur ou au focus, avec « Vitesse » « Lente » ou « Normale »), « Rail », « Grille », « Vedette », « Téléphones » et « Stories » (des bulles rondes au-dessus d’un seul grand lecteur ; toucher une bulle change le clip, sans aucun script). « Légendes » affiche ou masque les noms.
À l’écran: «Résultats en vidéo»، «Les clips»، «Le clip»، «Prénom»، «Ce qu’il a fait»، «L’élève a donné son accord»، «Confirmer l’accord»، «Vitesse»، «Légendes»
Astuce: La bande défilante rend mieux avec quatre clips ou plus. Avec deux ou trois, choisissez « Téléphones » ou « Vedette ».
Attention: Demandez l’accord avant de publier, par écrit dans une discussion par exemple, et n’indiquez que le prénom. Pour un mineur, l’accord vient d’un parent.

## Après les médias
- Vérifier sur téléphone: « Téléphone » en haut ou « Aperçu » : assurez-vous que le recadrage garde les visages.
- L’image de partage: Une image affichée avec le lien sur WhatsApp, ou une carte automatique.
- Choisir un thème: Les thèmes sombres font ressortir photos et vidéos.
- Mesurer l’effet: Où les visiteurs s’arrêtent, dans les résultats.

## Questions fréquentes

**Mes photos perdent-elles en qualité une fois réduites ?**
Le visiteur ne voit pas de différence : l’image garde jusqu’à 1 600 px sur le grand côté, plus que ce qu’affiche un écran de téléphone. La réduction la fait s’ouvrir vite sur réseau mobile, ce qui décide si le visiteur reste.

**Pourquoi ne puis-je pas mettre une vidéo de mes leçons ?**
Parce que les vidéos de leçons sont protégées : leurs liens sont signés pour vos élèves, expirent en quelques heures et ne fonctionnent pas sur une page publique. Mettez votre extrait sur YouTube ou Vimeo et collez son lien.

**La vidéo ralentit-elle la page ?**
Non. Une vidéo YouTube ou Vimeo s’affiche comme une image jusqu’au clic du visiteur et ne se charge pas avant. Les animations commencent en image et ne se chargent que lorsque le visiteur les atteint.

**Puis-je mettre une vidéo avec un son qui démarre seul ?**
Non. Les animations sont toujours muettes, et une vidéo YouTube ou Vimeo ne démarre qu’au clic du visiteur. Personne n’est surpris par un son dans un lieu public.

**Quelle différence entre GIF et MP4 ?**
Les deux tournent en boucle sans son. Un MP4 ou WebM est bien plus léger à durée égale : c’est le format conseillé. Le GIF convient aux mouvements très courts. La limite est de 12 Mo dans les deux cas, et de 30 s pour la vidéo.

**Faut-il écrire la description dans toutes les langues ?**
Oui, la description s’écrit pour la langue modifiée. Changez la « Langue du contenu » en haut de l’éditeur et écrivez-la pour chaque langue active de la page.

**Qui voit le clip d’un élève dont je n’ai pas confirmé l’accord ?**
Aucun visiteur. Il reste dans le brouillon et l’éditeur seulement, et toute la section est masquée tant qu’aucun clip n’a d’accord.