---
url: 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen'
title: 'Añadir una imagen | DXPR'
author:
  name: Jurriaan
  url: 'https://dxpr.com/users/jurriaan'
date: '2026-10-24T00:13:24+00:00'
updated: '2026-10-24T17:19:22+00:00'
copyright: 'Copyright DXPR. All rights reserved.'
type: article
summary: 'Añade una foto o ilustración que rellena su columna y escala con la pantalla.'
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: 'Añadir una imagen'
      description: 'Añade una foto o ilustración que rellena su columna y escala con la pantalla.'
      image:
        '@type': ImageObject
        url: 'https://dxpr.com/themes/custom/dxpr_com/images/dxpr-share-card.jpg'
        width: '1200'
        height: '630'
      datePublished: '2026-10-24T00:13:24+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/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen'
      articleSection: 'Texto y multimedia'
    -
      '@type': WebPage
      '@id': 'https://dxpr.com/es/hc/documentacion/aprender-dxpr-builder/elementos/imagen'
      description: 'Añade una foto o ilustración que rellena su columna y escala con la pantalla.'
      breadcrumb:
        '@type': BreadcrumbList
        itemListElement:
          -
            '@type': ListItem
            position: 1
            name: Inicio
            item: 'https://dxpr.com/es'
      publisher:
        '@type': Organization
        '@id': 'https://dxpr.com/#organization'
        name: DXPR
      inLanguage: es
---
[Centro de ayuda](/es/hc)/[Documentación](/es/hc/documentacion) /[Aprende DXPR Builder](/es/hc/documentation/learn-dxpr-builder) /[Crear páginas](/es/hc/documentation/learn-dxpr-builder/build) /[Añadir contenido](/es/hc/documentation/learn-dxpr-builder/elements) /[Texto y multimedia](/es/hc/documentation/learn-dxpr-builder/elements/text-and-media) # Añadir una imagen.

 Aprende DXPR BuilderCrear páginasAñadir contenidoTexto y multimedia

   ## En esta guía

 Guías relacionadas

- [Cambia el aspecto de un elemento en el panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style)

Añade una foto o ilustración que rellena su columna y escala con la pantalla.

## Añade una imagen

Abre tu página con la sesión iniciada: los controles del constructor aparecen cuando pasas el cursor sobre la zona de contenido. [Crea tu primera página](/es/hc/documentacion/aprender-dxpr-builder/primeros-pasos/primera-pagina) muestra lo básico.

1. Pasa el cursor sobre la columna y haz clic en **+** en su barra de controles, o haz clic en **Add Elements** en una página vacía. Abre la pestaña **Content** y haz clic en **Image**. Queda arriba de la columna y su diálogo de ajustes se abre.
2. En **Image**, haz clic en **Select Image**. En el **Media browser**, filtra por nombre si quieres, marca una foto y haz clic en **Insert selected**.
3. Haz clic en el encabezado **SEO** para expandirlo. Reemplaza cualquier texto en **Alt attribute** con una descripción corta de la foto.
4. Haz clic en **Save** en el diálogo. Luego haz clic en **Save** en la barra de herramientas arriba de la zona de contenido para guardar la página.

  ## Lo que ves

El **Image width** predeterminado es 100%. Los lectores de pantalla anuncian tu texto alternativo. Para comprobar la escala, pon **View mode** en **Preview** y estrecha la ventana de tu navegador. Las visitas ven tus cambios cuando guardas y publicas.

## Configura tu imagen

Pasa el cursor sobre el elemento y abre **More > Settings** en su barra de controles. Opciones:

- **Image:** elige una imagen de los medios o el explorador de archivos de tu sitio, sube un archivo, o pega una URL externa.
- **Image width:** un ancho CSS como `100%` o `300px`. El valor predeterminado es 100%.
- **Image height:** un alto fijo como `400px`. Déjalo vacío para conservar la forma de la foto.
- **Image link:** vuelve la imagen clicable. Introduce una URL o elige una página.
- **Image link target:** Same window o New window. Se muestra cuando añades un enlace.
- **Alt attribute:** en la sección **SEO**, una descripción para lectores de pantalla y buscadores.
- **Title attribute:** en la sección **SEO**, información extra que se muestra como tooltip en hover.

## Carga de imágenes y velocidad de página

DXPR Builder gestiona la carga de imágenes nuevas automáticamente para mantener las páginas rápidas y evitar saltos de contenido. Las imágenes al inicio de la página y dentro de pestañas, carruseles y marquesinas quedan listas para mostrarse. Las imágenes más abajo pueden cargar mientras las visitas se desplazan.

Las imágenes pueden venir de tu biblioteca de medios, archivos subidos o URLs externas. Deja que las imágenes terminen de cargar en el editor antes de guardar para que DXPR Builder reserve el espacio justo. Reemplazar una imagen actualiza sus dimensiones sin cambiar tu tamaño de muestra elegido.

Las imágenes que ya están en tu sitio no se mejoran automáticamente. La velocidad de página también depende del tamaño de archivo de imagen y otro contenido. Comprueba tu página publicada en pantallas estrechas y anchas.

## Si no lo ves

- **Image no está en la pestaña Content.** Tu perfil de usuario lo oculta. Pide a una cuenta administradora que lo active en [User profiles](/es/hc/documentacion/aprender-dxpr-builder/administracion/perfiles-usuario-administracion).
- **Ya no está tras recargar.** La página no se guardó. Añádelo de nuevo y haz clic en **Save** en la barra de herramientas arriba de la zona de contenido.
- **El elemento de imagen está vacío.** No hay imagen en el campo **Image**. Pasa el cursor sobre el elemento y abre **More > Settings**, y haz clic en **Select Image**.
- **Aparece un icono de imagen rota.** El archivo se borró o movió en la biblioteca de medios. Pasa el cursor sobre el elemento y abre **More > Settings**, quita la selección y elige una imagen nueva.
- **La imagen está estirada o aplastada.** **Image width** e **Image height** tienen valores fijos que no coinciden con la foto. Limpia **Image height** para restaurar su forma.

## ¿Qué sigue?

[Panel Style](/es/hc/documentacion/aprender-dxpr-builder/ajustes-elemento/pestana-style) para cambiar espaciado y fondo de tu imagen.