--- url: 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/image' title: 'Adding an Image | DXPR' author: name: Jurriaan url: 'https://dxpr.com/users/jurriaan' date: '2023-11-06T09:31:01+00:00' updated: '2026-10-23T14:31:17+00:00' copyright: 'Copyright DXPR. All rights reserved.' type: article summary: 'Single image' 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-23T14:31:17+0000' 'image:alt': 'DXPR, powered by Drupal: AI-powered Drupal for marketers.' schema: '@context': 'https://schema.org' '@graph': - mainEntity: { } - '@type': TechArticle headline: 'Adding an Image' description: 'Single image' image: '@type': ImageObject url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg' width: '1200' height: '630' datePublished: '2023-11-06T09:31:01+0000' dateModified: '2026-10-23T14:31:17+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/hc/documentation/learn-dxpr-builder/elements/image' articleSection: 'Text and media' - '@type': WebPage '@id': 'https://dxpr.com/hc/documentation/learn-dxpr-builder/elements/image' description: 'Single image' breadcrumb: '@type': BreadcrumbList itemListElement: - '@type': ListItem position: 1 name: Home item: 'https://dxpr.com/' publisher: '@type': Organization '@id': 'https://dxpr.com/#organization' name: DXPR inLanguage: en --- [Help Center](/hc)/[Documentation](/hc/documentation) /[Learn DXPR Builder](/hc/documentation/learn-dxpr-builder) /[Build pages](/hc/documentation/learn-dxpr-builder/build) /[Add content](/hc/documentation/learn-dxpr-builder/elements) /[Text and media](/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Adding an Image. Single image Learn DXPR BuilderBuild pagesAdd contentText and media ## In this guide Related guides - [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) Add a photo or illustration that fills its column and scales with the screen. ## Add an image Open your page while logged in: the builder controls appear when you hover the content area. [Your first page](/hc/documentation/learn-dxpr-builder/getting-started/first-page) shows the basics. 1. Hover the column and click **+** in its control bar, or click **Add Elements** on an empty page. Open the **Content** tab and click **Image**. It lands at the top of the column and its settings dialog opens. 2. Under **Image**, click **Select Image**. In the **Media browser**, filter by name if you like, tick a photo and click **Insert selected**. 3. Click the **SEO** heading to expand it. Replace any text in **Alt attribute** with a short description of the photo. 4. Click **Save** in the dialog. Then click **Save** in the toolbar at the top of the content area to store the page. ## What you see The default **Image width** is 100%. Screen readers announce your alt text. To check scaling, set **View mode** to **Preview** and narrow your browser window. Visitors see your changes after you save and publish. ## Set up your image Hover the element and open **More > Settings** in its control bar. Options: - **Image:** select an image from your site's media or file browser, upload a file, or paste an external URL. - **Image width:** a CSS width such as `100%` or `300px`. The default is 100%. - **Image height:** a fixed height such as `400px`. Leave it empty to keep the photo's shape. - **Image link:** makes the image clickable. Enter a URL or pick a page. - **Image link target:** Same window or New window. It shows once you add a link. - **Alt attribute:** in the **SEO** section, a description for screen readers and search engines. - **Title attribute:** in the **SEO** section, extra information that shows as a tooltip on hover. ## Image loading and page speed DXPR Builder manages loading for new images automatically to keep pages fast and prevent content from jumping. Images at the start of the page and inside tabs, carousels and marquees stay ready to show. Images farther down can load as visitors scroll. Images can come from your media library, uploaded files or external URLs. Let images finish loading in the editor before saving so DXPR Builder can reserve the right amount of space. Replacing an image updates its dimensions without changing your chosen display size. Images already on your site are not upgraded automatically. Page speed also depends on image file size and other content. Check your published page on narrow and wide screens. ## If you don't see it - **Image is not in the Content tab.** Your user profile hides it. Ask an administrator to enable it in [User Profiles](/hc/documentation/learn-dxpr-builder/admin/user-profiles-admin). - **It is gone after you reload.** The page was not saved. Add it again and click **Save** in the toolbar at the top of the content area. - **The image element is empty.** No picture is set in the **Image** field. Hover the element and open **More > Settings**, then click **Select Image**. - **A broken-image icon appears.** The file was deleted or moved in the media library. Hover the element and open **More > Settings**, remove the selection and pick a new image. - **The image is stretched or squashed.** **Image width** and **Image height** both hold fixed values that do not match the photo. Clear **Image height** to restore its shape. ## What's next? [Style tab](/hc/documentation/learn-dxpr-builder/element-settings/style-tab) to change spacing and background for your image.