---
title: "Élément Image : ajouter une photo ou un visuel"
description: "Affichez une image au format JPEG, PNG, GIF, WebP ou AVIF : visuel décoratif, photo de produit ou illustration, sur n'importe quelle page de votre site."
url: https://docs.vivlab.com/editor/menu/image
---

# Image

L'élément **Image** affiche une image classique au format JPEG, PNG, GIF, WebP ou AVIF. C'est le bloc utilisé pour les visuels décoratifs, les photos de produits ou les illustrations.

**Recadrer** signifie ne garder qu'une partie de la photo. Un **ratio**, comme 1:1 ou 16:9, décrit ses proportions : carrées ou larges. Le texte alternatif est une description écrite pour les personnes qui ne peuvent pas voir l'image.

## Élément image

Cliquez sur **Modifier l'image** pour remplacer le visuel. La fenêtre d'import permet de téléverser un fichier, de reprendre une image déjà envoyée (onglet **Mes images**), de chercher une photo libre de droits dans la **Bibliothèque Pexels** ou de piocher parmi les **Œuvres d'art**. Après l'import, un outil de recadrage vous laisse ajuster l'image, avec des formats prédéfinis du 2:3 au 21:9.

<DocsScreenshot name="editor-image-library" alt="Deux images de céramiques disponibles dans la bibliothèque Mes images." :width="960" :height="368" />

Une fois l'image en place, faites glisser le cadre affiché en haut du panneau pour choisir la partie qui reste visible : le cadre conserve les proportions du bloc tel qu'il est dessiné sur la canvas.

L'option **Contenir l'image** force l'image à s'afficher en entier dans le bloc, sans la couper. Désactivée, l'image **couvre** tout le bloc et déborde si nécessaire (recommandé pour les bandeaux pleine largeur).

L'option **Agrandir au clic** permet à vos visiteurs de cliquer sur l'image pour l'afficher en plein écran.

L'option **Ajouter un lien** transforme l'image en lien cliquable. Activez-la puis renseignez l'action au clic (lien externe, page interne, ancre, e-mail, téléphone, PDF, produit, catégorie…). Reportez-vous aux options de lien décrites pour le [bouton](https://docs.vivlab.com/editor/menu/button.md).

<DocsScreenshot name="editor-image-options" alt="Les options de cadrage, d’agrandissement au clic et de lien d’une image." :width="341" :height="214" />

## Texte alternatif

Le **texte alternatif** est une description courte de l'image utilisée par les moteurs de recherche et les lecteurs d'écran. Renseignez-le pour améliorer le référencement et l'accessibilité de votre site.

Le bouton **Générer le texte alternatif avec l'IA** analyse votre image et propose une description automatiquement. Si le champ est vide, la description est aussi générée à l'import d'une nouvelle image. Vous pouvez toujours la corriger après génération.

<DocsScreenshot name="editor-image-alt" alt="Une description alternative renseignée pour une photographie de céramiques." :width="341" :height="258" />

## Style de l'image

Le [panneau de style](https://docs.vivlab.com/editor/style/index.md) regroupe l'[arrière-plan](https://docs.vivlab.com/editor/style/background.md), les [bordures](https://docs.vivlab.com/editor/style/border.md), l'[arrondi des angles](https://docs.vivlab.com/editor/style/border-radius.md), l'[ombre](https://docs.vivlab.com/editor/style/box-shadow.md), les [marges intérieures](https://docs.vivlab.com/editor/style/padding.md), les [filtres](https://docs.vivlab.com/editor/style/filter.md) (opacité, flou, niveaux de gris…) et les [transitions](https://docs.vivlab.com/editor/style/transition.md). Vous pouvez aussi encadrer l'image dans une [maquette d'appareil](https://docs.vivlab.com/editor/style/mockup.md) (MacBook, iPhone…).