---
url: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/image'
title: 'Ajouter une image | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T14:41:42+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Ajoutez une photo ou une illustration qui remplit sa colonne et s’adapte à l’écran.'
tags:
  - 'Text and media'
image: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
published: true
og:
  site_name: DXPR
  updated_time: '2026-10-24T17:19:22+0000'
  'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.'
schema:
  '@context': 'https://schema.org'
  '@graph':
    -
      mainEntity: {  }
    -
      '@type': TechArticle
      headline: 'Ajouter une image'
      description: 'Ajoutez une photo ou une illustration qui remplit sa colonne et s’adapte à l’écran.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T14:41:42+0000'
      dateModified: '2026-10-24T17:19:22+0000'
      author:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
        url: 'https://dxpr.com/'
        logo:
          '@type': ImageObject
          url: 'https://dxpr.com/themes/custom/dxpr_com/dxpr-logo-dark.svg'
          width: '1348'
          height: '501'
      mainEntityOfPage: 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/image'
      articleSection: 'Texte et médias'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/fr/hc/documentation/apprendre-dxpr-builder/elements/image'
      description: 'Ajoutez une photo ou une illustration qui remplit sa colonne et s’adapte à l’écran.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Accueil
            item: 'https://dxpr.com/fr'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: fr
---
[Centre d’aide](/fr/hc)/[Documentation](/fr/hc/documentation) /[Apprendre DXPR Builder](/fr/hc/documentation/learn-dxpr-builder) /[Créer des pages](/fr/hc/documentation/learn-dxpr-builder/build) /[Ajouter du contenu](/fr/hc/documentation/learn-dxpr-builder/elements) /[Texte et médias](/fr/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Ajouter une image.

 Apprendre DXPR BuilderCréer des pagesAjouter du contenuTexte et médias

   ## Dans ce guide

 Guides associés

- [Modifier l’aspect d’un élément dans le panneau Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style)

Ajoutez une photo ou une illustration qui remplit sa colonne et s’adapte à l’écran.

## Ajouter une image

Ouvrez votre page une fois la session ouverte : les commandes du constructeur apparaissent au survol de la zone de contenu. [Votre première page](/fr/hc/documentation/apprendre-dxpr-builder/demarrage/premiere-page) présente les bases.

1. Survolez la colonne et cliquez sur **+** dans sa barre de contrôle, ou cliquez sur **Ajouter des éléments** sur une page vide. Ouvrez l’onglet **Contenu** et cliquez sur **Image**. L’élément apparaît en haut de la colonne et sa boîte de dialogue de paramètres s’ouvre.
2. Sous **Image**, cliquez sur **Select Image**. Dans le **Media browser**, filtrez par nom si vous le souhaitez, cochez une photo et cliquez sur **Insert selected**.
3. Cliquez sur le titre **SEO** pour le déplier. Remplacez tout texte dans **Alt attribute** par une courte description de la photo.
4. Cliquez sur **Enregistrer** dans la boîte de dialogue, puis sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu pour stocker la page.

  ## Ce que vous voyez

La **Image width** par défaut est de 100 %. Les lecteurs d’écran annoncent votre texte alternatif. Pour vérifier l’adaptation, réglez le **View mode** sur **Preview** et rétrécissez la fenêtre du navigateur. Les visiteurs voient vos changements après enregistrement et publication.

## Configurer votre image

Survolez l’élément et ouvrez **Plus > Paramètres** dans sa barre de contrôle. Options :

- **Image :** choisissez une image dans le navigateur de médias ou de fichiers de votre site, téléversez un fichier ou collez une URL externe.
- **Image width :** une largeur CSS comme `100%` ou `300px`. La valeur par défaut est 100 %.
- **Image height :** une hauteur fixe comme `400px`. Laissez vide pour garder les proportions de la photo.
- **Image link :** rend l’image cliquable. Saisissez une URL ou choisissez une page.
- **Image link target :** Same window ou New window. N’apparaît qu’une fois le lien ajouté.
- **Alt attribute :** dans la section **SEO**, une description pour les lecteurs d’écran et les moteurs de recherche.
- **Title attribute :** dans la section **SEO**, une information complémentaire affichée en infobulle au survol.

## Chargement des images et vitesse des pages

DXPR Builder gère automatiquement le chargement des nouvelles images pour garder des pages rapides et éviter les sauts de contenu. Les images en début de page et celles dans les onglets, carrousels et défilements restent prêtes à s’afficher. Les images plus bas peuvent se charger au défilement des visiteurs.

Les images peuvent venir de votre médiathèque, de fichiers téléversés ou d’URL externes. Laissez les images finir de charger dans l’éditeur avant d’enregistrer, pour que DXPR Builder réserve le bon espace. Remplacer une image met à jour ses dimensions sans changer la taille d’affichage choisie.

Les images déjà sur votre site ne sont pas mises à niveau automatiquement. La vitesse des pages dépend aussi du poids des fichiers image et des autres contenus. Vérifiez votre page publiée sur écrans étroits et larges.

## Si rien ne s’affiche

- **L’image ne figure pas dans l’onglet Contenu.** Votre profil d’utilisateur la masque. Demandez à un administrateur de l’activer dans [Profils d’utilisateurs](/fr/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin).
- **Elle a disparu après rechargement.** La page n’a pas été enregistrée. Ajoutez-la de nouveau et cliquez sur **Enregistrer** dans la barre d’outils en haut de la zone de contenu.
- **L’élément image est vide.** Aucune image n’est définie dans le champ **Image**. Survolez l’élément et ouvrez **Plus > Paramètres**, puis cliquez sur **Select Image**.
- **Une icône d’image cassée apparaît.** Le fichier a été supprimé ou déplacé dans la médiathèque. Survolez l’élément et ouvrez **Plus > Paramètres**, retirez la sélection et choisissez une nouvelle image.
- **L’image est étirée ou écrasée.** **Image width** et **Image height** contiennent toutes deux des valeurs fixes qui ne correspondent pas à la photo. Videz la **Image height** pour restaurer ses proportions.

## Et ensuite ?

[Onglet Style](/fr/hc/documentation/apprendre-dxpr-builder/parametres-des-elements/onglet-style) pour modifier l’espacement et l’arrière-plan de votre image.