Les images et les vidéos rendent vos pages plus attractives et facilitent la compréhension de vos contenus. Ce guide vous explique comment préparer vos images, les insérer dans une page et y ajouter une vidéo.
| Bon à savoir : une image peut être insérée seule, avec le bloc Image/Vidéo, ou associée à un texte, dans l'onglet Image/Vidéo d'un bloc Texte. Dans les deux cas, l'import, les informations de l'image et les retouches fonctionnent de la même manière. Pour choisir la position d'une image par rapport à un texte, consultez le guide Ajouter un bloc texte.
Sommaire
Préparer votre image
Quelques précautions avant l'import vous garantissent des images nettes et une page qui s'affiche rapidement.
- Le format : vous pouvez importer vos images aux formats courants, comme le PNG ou le JPG (sont acceptés les formats .jpg, .jpeg, .gif, .png et .bmp). Votre site les convertit automatiquement au format WebP, plus léger, sans perte de qualité visible. Vous n'avez donc aucune conversion à faire vous-même.
- La taille : privilégiez des images adaptées à l'affichage sur un écran. Une photo prise avec un appareil récent est souvent bien plus grande que nécessaire : pensez à la réduire avant de l'importer.
- Le nom du fichier : donnez à votre image un nom clair qui décrit son contenu (par exemple « boulangerie-rennes-vitrine » plutôt que « IMG_2045 »). C'est un plus pour votre référencement.
| Bon à savoir : des images légères réduisent l'impact environnemental de votre page. Vous pouvez suivre cet impact grâce à l'indicateur de consommation CO2, en haut de l'écran.
Ajouter un bloc Image/Vidéo
- Ouvrez la page concernée, puis ajoutez un bloc Image/Vidéo. Consultez au besoin le guide Ajouter et modifier un bloc.
- Dans le bloc, cliquez sur Importer une image ou une vidéo.
- Cliquez sur Parcourir, sélectionnez le fichier sur votre ordinateur, puis cliquez sur Ouvrir.
- Cliquez sur Valider.
L'aperçu de votre image s'affiche dans le bloc.
Renseigner les informations de l'image
A droite de l'aperçu, complétez les champs suivants :
- Description : un court texte qui décrit l'image. Il s'affiche au survol de la souris et aide les moteurs de recherche à comprendre son contenu.
- Nom de l'image : le nom du fichier. Vous pouvez le modifier pour le rendre plus explicite
Rendre l'image cliquable
Cochez Image cliquable, puis choisissez dans le champ Destination l'action déclenchée au clic :
- ouvrir une page de votre site : sélectionnez la page dans la liste ;
- ouvrir un autre site : saisissez son adresse ;
- ouvrir un autre média : importez l'image à afficher, par exemple une version agrandie.
Cliquez ensuite sur Enregistrer, puis visualisez le résultat sur votre site.
Retoucher une image
Vous pouvez recadrer, redimensionner ou faire pivoter une image directement depuis votre espace Administration, sans logiciel de retouche.
- Survolez la vignette de l'image avec la souris : ses dimensions et son poids s'affichent, ainsi que deux icônes.
- Cliquez sur l'icône en forme de crayon. L'outil de retouche s'ouvre.
Les principales retouches
- Redimensionner l'image : dans la partie Image, saisissez la nouvelle largeur (l) et la nouvelle hauteur (h), en pixels.
- Faire pivoter ou retourner l'image : dans la partie Transformations, utilisez les boutons de rotation et de symétrie. Le champ Angle permet de saisir un angle précis.
- Recentrer l'image : cliquez sur Centrer sur la zone visible.
- Recadrer l'image : cliquez sur "Masque de découpe" et faites glisser les poignées situées aux coins et sur les bords du cadre pour ne garder que la partie souhaitée.
En bas de la fenêtre, les loupes permettent de zoomer ou dézoomer pour travailler plus confortablement.
Valider ou annuler vos retouches
- Cliquez sur Sauvegarder pour appliquer vos modifications.
- Les flèches en haut à gauche permettent d'annuler ou de rétablir la dernière action.
- Le bouton Réinitialiser permet de revenir à l'image d'origine.
| Conseil : la retouche intégrée est idéale pour des ajustements simples. Pour des retouches plus poussées (luminosité, couleurs…), utilisez un logiciel dédié avant d'importer votre image.
Insérer une vidéo
Deux méthodes vous permettent d'ajouter une vidéo à votre page.
Méthode 1 : importer un fichier vidéo
La vidéo s'importe comme une image, dans un bloc Image/Vidéo ou dans l'onglet Image/Vidéo d'un bloc texte. Les formats acceptés sont .avi, .mov, .mpg, .mp4, .3gp et .wmv.
| Attention : les fichiers vidéo sont très lourds et peuvent ralentir l'affichage de votre page. Réservez cette méthode aux vidéos très courtes et préférez une plateforme vidéo pour les autres (méthode 2).
Méthode 2 : intégrer une vidéo hébergée en ligne (recommandée)
Votre vidéo est hébergée sur une plateforme vidéo en ligne (YouTube, Vimeo, Dailymotion…) et simplement affichée sur votre page. Votre site reste ainsi léger et rapide.
Étape 1 : ajouter un bloc Code HTML
- Dans votre espace Administration, ouvrez la page concernée.
- Cliquez sur l'icône ronde avec une flèche, en haut à gauche de l'écran, puis sur Autres blocs.
- Sélectionnez le bloc Code HTML.
Étape 2 : récupérer le code d'intégration de la vidéo
- Sur la plateforme vidéo, ouvrez votre vidéo. Elle doit être en visibilité publique pour s'afficher sur votre site.
- Cliquez sur Partager, puis sur Intégrer (l'intitulé peut varier d'une plateforme à l'autre).
- Copiez le code affiché.
Étape 3 : coller le code dans le bloc
- Revenez dans votre espace Administration et collez le code dans le bloc Code HTML (Ctrl + V).
- Cliquez sur Enregistrer, puis visualisez le résultat sur votre site.
| Important : n'utilisez le bloc Code HTML qu'avec un code provenant d'une source fiable, et collez-le tel quel, sans le modifier.
Remplacer ou supprimer un média
- Remplacer une image
Survolez la vignette de l'image, cliquez sur l'icône de la corbeille pour retirer l'image actuelle, puis importez le nouveau fichier. Pensez à mettre à jour la description et le nom de l'image, puis cliquez sur Enregistrer.
- Remplacer une vidéo intégrée
Dans le bloc Code HTML, supprimez l'ancien code, puis collez le code d'intégration de la nouvelle vidéo. Cliquez sur Enregistrer.
- Supprimer un média
Cliquez sur l'icône de la corbeille, en haut à droite du bloc, puis confirmez en cliquant sur Valider. Pour retirer temporairement le média sans le supprimer, vous pouvez aussi masquer le bloc : consultez le guide Ajouter et modifier un bloc.