mintlify__docs/es/create/image-embeds.mdx

---
title: "Imágenes e inserciones"
description: "Añade imágenes, inserta videos de YouTube e incluye iframes en tus páginas MDX para mejorar la documentación con contenido visual e interactivo."
keywords: ["imágenes", "videos", "iframes", "medios", "svg"]
---

Agrega imágenes, inserta videos e incluye contenido interactivo con iframes en tu documentación.

<Frame>
  <img className="rounded-xl" src="https://mintlify-assets.b-cdn.net/bigbend.jpg" alt="Fotografía de un paisaje con flores moradas en primer plano, montañas al fondo y un cielo azul con nubes dispersas." />
</Frame>

<div id="images">
  ## Imágenes
</div>

Agrega imágenes para aportar contexto visual, ejemplos o elementos decorativos a tu documentación.

<div id="basic-image-syntax">
  ### Sintaxis básica de imágenes
</div>

Utiliza la [sintaxis de Markdown](https://www.markdownguide.org/basic-syntax/#images) para añadir imágenes a tu documentación:

```mdx
![Texto alternativo que describe la imagen](/images/screenshot.png)
```

Las rutas de las imágenes son relativas a la raíz de tu repositorio de documentación. Por ejemplo, si tu imagen está en `images/screenshot.png` en tu repositorio, la ruta es `/images/screenshot.png`. Las rutas relativas (por ejemplo, `./screenshot.png`) no son compatibles.

<Tip>
  Incluye siempre texto alternativo descriptivo para mejorar la accesibilidad y el SEO. El texto alternativo debe describir claramente lo que muestra la imagen.
</Tip>

Los archivos de imagen deben pesar menos de 20 MB. Para archivos más grandes, alójalos en un servicio CDN como [Amazon S3](https://aws.amazon.com/s3) o [Cloudinary](https://cloudinary.com).

<div id="html-image-embeds">
  ### Inserciones de imágenes HTML
</div>

Para tener más control sobre la visualización de las imágenes, utiliza etiquetas HTML `<img>`:

```jsx
<img 
  src="/images/dashboard.png" 
  alt="Interfaz principal del dashboard"
  style={{height: "300px", width: "400px"}}
  className="rounded-lg"
/>
```

<div id="resize-images-with-inline-styles">
  #### Cambiar el tamaño de imágenes con estilos en línea
</div>

Usa estilos en línea de JSX con el atributo `style` para cambiar el tamaño de las imágenes:

```jsx
<img
  src="/images/architecture.png"
  style={{width: "450px", height: "auto"}}
  alt="Diagrama que muestra la arquitectura del sistema"
/>
```

<div id="disable-image-zoom">
  #### Desactivar el zoom de las imágenes
</div>

Para desactivar el zoom predeterminado al hacer clic en las imágenes, agrega la propiedad `noZoom`:

```html highlight="4"
<img 
  src="/images/screenshot.png" 
  alt="Texto alternativo descriptivo"
  noZoom
/>
```


<div id="link-images">
  #### Enlazar imágenes
</div>

Para convertir una imagen en un enlace clicable, envuelve la imagen en una etiqueta de enlace y agrega la propiedad `noZoom`:

```html
<a href="https://mintlify.com" target="_blank">
  <img 
    src="/images/logo.png" 
    alt="Logotipo de Mintlify"
    noZoom
  />
</a>
```

<Note>
  Las imágenes dentro de etiquetas de enlace muestran automáticamente un cursor de puntero para indicar que se pueden hacer clic.
</Note>

<div id="light-and-dark-mode-images">
  #### Imágenes para los modos claro y oscuro
</div>

Para mostrar imágenes distintas en los temas claro y oscuro, usa clases de Tailwind CSS:

```html
<!-- Imagen en modo claro -->
<img 
  className="block dark:hidden" 
  src="/images/light-mode.png" 
  alt="Interfaz en modo claro"
/>

<!-- Imagen en modo oscuro -->
<img 
  className="hidden dark:block" 
  src="/images/dark-mode.png" 
  alt="Interfaz en modo oscuro"
/>
```

<div id="svg-images">
  ### Imágenes SVG
</div>

Los archivos SVG que usan elementos `foreignObject` se renderizan de forma diferente en producción que en el entorno de desarrollo local. La CDN de imágenes de Mintlify elimina `foreignObject` de los SVG como medida de seguridad, lo que puede truncar u ocultar texto y otros contenidos HTML incrustados.

Esto suele afectar a los SVG exportados desde herramientas como [draw.io](https://www.drawio.com) que tienen el formato de texto HTML o el ajuste de línea activados. Para solucionarlo, desactiva **Formatted Text** y **Word Wrap** en todas las etiquetas de tu diagrama antes de exportarlo como SVG. Consulta la [documentación de draw.io](https://www.drawio.com/doc/faq/svg-export-text-problems) para obtener más información sobre las exportaciones de SVG.

<div id="videos">
  ## Videos
</div>

Mintlify admite [etiquetas HTML en Markdown](https://www.markdownguide.org/basic-syntax/#html), lo que te brinda flexibilidad para crear contenido enriquecido.

<Tip>
  Incluye siempre texto alternativo dentro de los elementos de video para los navegadores que no admiten la reproducción de video.
</Tip>

<div id="youtube-embeds">
  ### Videos de YouTube incrustados
</div>

Incrusta videos de YouTube mediante elementos iframe:

```html
<iframe
  className="w-full aspect-video rounded-xl"
  src="https://www.youtube.com/embed/4KzFe50RQkQ"
  title="Reproductor de vídeo de YouTube"
  allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture"
  allowFullScreen
></iframe>
```

<Frame>
  <iframe className="w-full aspect-video rounded-xl" src="https://www.youtube.com/embed/4KzFe50RQkQ" title="Reproductor de vídeo de YouTube" allow="accelerometer; autoplay; clipboard-write; encrypted-media; gyroscope; picture-in-picture" allowFullScreen />
</Frame>


<div id="self-hosted-videos">
  ### Videos autoalojados
</div>

Usa el elemento HTML `<video>` para contenido de video autoalojado:

```html
<video
  controls
  className="w-full aspect-video rounded-xl"
  src="enlace-a-tu-video.com"
></video>
```

<div id="autoplay-videos">
  ### Reproducción automática de vídeos
</div>

Para reproducir un vídeo automáticamente, usa:

```html
<video
  autoPlay
  muted
  loop
  playsInline
  className="w-full aspect-video rounded-xl"
  src="/videos/demo.mp4"
></video>
```

<Note>
  Al usar la sintaxis de JSX, escribe los atributos de dos palabras en camelCase: `autoPlay`, `playsInline`, `allowFullScreen`.
</Note>

<div id="iframes">
  ## Iframes
</div>

Incorpora contenido externo con elementos iframe:

```html
<iframe 
  src="https://example.com/embed" 
  title="Contenido integrado"
  className="w-full h-96 rounded-xl"
></iframe>
```

<Tip>
  Envuelve los iframes en un componente [frame](/es/components/frames) para mantenerlos dentro del ancho de la columna de texto y evitar desbordamientos.

  ```html
  <Frame>
    <iframe 
      src="https://example.com/embed" 
      title="Contenido integrado"
      className="w-full h-96 rounded-xl"
    ></iframe>
  </Frame>
  ```
</Tip>

<div id="related-resources">
  ## Recursos relacionados
</div>

<Card title="Referencia del componente Frame" icon="frame" horizontal href="/es/components/frames">
  Aprende a usar el componente Frame para presentar imágenes.
</Card>