Création de site > Centre d'aide > insérer des images sur votre site
Insérer des images sur votre site internet
Temps estimé : 2 minutes
Étape 1 : Insérer un module image
Pour commencer, vous devez intégrer un module Image.
Notez que, si vous souhaitez intégrer plusieurs images, vous pouvez opter pour deux autres modules :
- Le module carrousel : Ce module fait défiler plusieurs images.
- Le module portfolio : Toutes vos images apparaissent en icônes. Lorsque l’utilisateur clique sur une image, celle-ci s’affiche en pleine page.
Dans notre exemple, nous partons sur un module Image. Mais le principe reste le même pour les autres modules disponibles.
Étape 2 : Importer l'image dont vous avez besoin
Trois options s’offrent à vous pour importer vos images sur votre site :
- Vous pouvez télécharger des images directement Depuis votre ordinateur en cliquant sur “Nouvelle image”.
- Vous pouvez piocher dans votre galerie d’images Orson.io déjà importées en cliquant sur “Mes images”.
- Vous pouvez utiliser la galerie d’images gratuites à votre disposition en cliquant sur “Images libres de droit”.
La galerie des images libres de droit est alimentée chaque semaine avec de nouvelles images.
Étape 3 : Modifier le format de l’image
Après avoir sélectionné votre image, cliquez sur l’éditeur situé dans le menu de droite.
Vous voyez apparaître une première fenêtre. Cet écran vous permet de travailler le format de l’image.
Vous trouverez ces types de formats :
- Le format libre : Vous choisissez vous-même le format adapté.
- Le 16/9.
- Le 4/3
- Le carré
- Le format fixe : Vous définissez le nombre de pixel de haut et de large.
Vous n’avez plus qu’à ajuster le cadre afin de centrer correctement votre image. Une fois que vous êtes satisfaits du résultat, cliquez sur “Appliquer”.
👍 Les images importées votre site sont automatiquement compressées : cela réduit leur poids jusqu’à 80%. Ainsi, elles n’affectent pas la vitesse de chargement de votre site et ne perdent pas en qualité. En effet, la vitesse de chargement est primordiale pour votre référencement, et pour l’efficacité de votre responsive design.
Étape 4 : Ajouter des effets à l’image
Dans un deuxième écran, vous pouvez appliquer différents effets sur l'image.
N’oubliez pas de cliquer sur “Enregistrer” une fois que l’image vous convient.
Vous pouvez ajouter différents types de liens :
👉 Un lien simple : L’utilisateur est redirigé vers une page en cliquant une fois.
👉 Un menu déroulant : Vous pouvez afficher un sous-menu comportant plusieurs catégories.
👉 Un menu “image”.
Étape 5 : Optimiser son image
Pour optimiser votre image, vous devez la nommer en utilisant une expression précise avec des mots-clés pertinents. La description de votre image est un élément qui fait partie de votre référencement.
Vous pouvez également effectuer des zooms sur votre image à l’aide de la barre horizontale.
Lorsque tous les changements sont effectués, vous n’avez plus qu’à cliquer sur “Ok”. Votre image apparaît instantanément sur votre site, et vous pouvez revenir la modifier à tout moment !