# Agregar contenido multimedia (/es/editor/media)

<!-- agent-signals: reading_time_min: 3 · est_tokens: 1296 · updated: 2026-07-30 -->
Related: [Cómo usar el editor](/es/editor/tutorial.md), [Conceptos básicos de Git para el editor](/es/editor/git-essentials.md), [Crear y editar páginas](/es/editor/pages.md), [Organizar la navegación](/es/editor/navigation.md), [Vista previa en vivo](/es/editor/live-preview.md), [Branches y publicación](/es/editor/branching-and-publishing.md)

<div id="supported-file-types">
  ## Tipos de archivo admitidos [#tipos-de-archivo-admitidos]
</div>

* **Imágenes**: PNG, JPG, JPEG, GIF, WebP (máx. 20 MB)
* **Vídeos**: MP4, WebM (máx. 20 MB)
* **Fuentes**: TrueType (TTF), WOFF, WOFF2
* **Otros**: PDF, ICO (favicons)

<div id="add-media-to-a-page">
  ## Agregar contenido multimedia a una página [#agregar-contenido-multimedia-a-una-página]
</div>

<div id="drag-and-drop">
  ### Arrastrar y soltar [#arrastrar-y-soltar]
</div>

Arrastra y suelta contenido multimedia desde tu computadora o desde el gestor de recursos sobre una página. En modo visual, la imagen o el video se insertan en línea. En Modo Markdown, el editor inserta la ruta en la posición de tu cursor. Las imágenes se guardan en la raíz de tu carpeta `images/`, y los videos se guardan en la raíz de tu carpeta `videos/`.

<div id="slash-command">
  ### Comando slash [#comando-slash]
</div>

Escribe <kbd>/image</kbd> para abrir el menú de imágenes o <kbd>/video</kbd> para abrir el menú de vídeos. Sube contenido multimedia nuevo o selecciona entre los archivos existentes.

<div id="embed">
  ### Incrustar [#incrustar]
</div>

Escribe <kbd>/embed</kbd> y pega una URL de YouTube, Loom o Vimeo. El editor detecta el proveedor y genera el iframe automáticamente. Al buscar en el menú slash, los términos `youtube`, `yt`, `loom` y `vimeo` también muestran el comando **Embed**.

Para otras incrustaciones, escribe <kbd>/embed</kbd> y activa **Inserción manual** para escribir HTML personalizado.

<div id="upload-files">
  ### Subir archivos [#subir-archivos]
</div>

Usa el explorador de archivos en la barra lateral para subir o buscar archivos. Arrastra y suelta archivos en una carpeta para organizar recursos multimedia.

<Frame>
  <img src="/_assets/41068cf4ce81f10653073efcecbb63e8ae1e07b68099356e4dc02c4f6e9d9a9a" alt="Explorador de archivos abierto en el menú de la barra lateral del editor." className="block dark:hidden" />

  <img src="/_assets/b362613c14522f84ef5d95f9ab37de72cb32c288e9a4bd21d150765cabb2cd94" alt="Explorador de archivos abierto en el menú de la barra lateral del editor." className="hidden dark:block" />
</Frame>

<div id="format-images">
  ## Formatear imágenes [#formatear-imágenes]
</div>

Después de insertar una imagen en el modo visual, pasa el cursor por encima para mostrar una barra de herramientas con opciones de formato.

* **Vista previa en modo claro/oscuro**: Cambia entre el modo claro y oscuro para ver cómo se ve la imagen en cada tema.
* **Alineación**: Establece la alineación de la imagen como izquierda, centrada, derecha o a todo el ancho.
* **Frame**: Envuelve la imagen en un componente `<Frame>` para añadir un borde y un fondo.
* **Configuración**: Reemplaza la imagen o actualiza su texto alternativo.

<div id="manage-assets">
  ## Administra los recursos [#administra-los-recursos]
</div>

<div id="organize-with-folders">
  ### Organiza con carpetas [#organiza-con-carpetas]
</div>

Haz clic en el botón &#x2A;*+** del explorador de archivos para crear una nueva carpeta. Arrastra y suelta archivos y carpetas en el árbol de archivos para reordenarlos.

<div id="rename-and-edit-assets">
  ### Renombrar y editar recursos [#renombrar-y-editar-recursos]
</div>

Pasa el cursor sobre un recurso y haz clic en el botón &#x2A;*...** para cambiar el nombre del archivo o actualizar su texto alternativo (alt).

<div id="delete-assets">
  ### Eliminar recursos [#eliminar-recursos]
</div>

Pasa el cursor sobre un recurso y haz clic en el botón <Icon icon="<svg xmlns=&#x22;http://www.w3.org/2000/svg&#x22; viewBox=&#x22;0 0 24 24&#x22; fill=&#x22;none&#x22;><path d=&#x22;M19.5 5.5L18.8803 15.5251C18.7219 18.0864 18.6428 19.3671 18.0008 20.2879C17.6833 20.7431 17.2747 21.1273 16.8007 21.416C15.8421 22 14.559 22 11.9927 22C9.42312 22 8.1383 22 7.17905 21.4149C6.7048 21.1257 6.296 20.7408 5.97868 20.2848C5.33688 19.3626 5.25945 18.0801 5.10461 15.5152L4.5 5.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/><path d=&#x22;M3 5.5H21M16.0557 5.5L15.3731 4.09173C14.9196 3.15626 14.6928 2.68852 14.3017 2.39681C14.215 2.3321 14.1231 2.27454 14.027 2.2247C13.5939 2 13.0741 2 12.0345 2C10.9688 2 10.436 2 9.99568 2.23412C9.8981 2.28601 9.80498 2.3459 9.71729 2.41317C9.32164 2.7167 9.10063 3.20155 8.65861 4.17126L8.05292 5.5&#x22; stroke=&#x22;currentColor&#x22; stroke-linecap=&#x22;round&#x22; stroke-width=&#x22;1.5&#x22;/></svg>" /> para eliminarlo.

<div id="best-practices">
  ## Mejores prácticas [#mejores-prácticas]
</div>

* **Usa nombres descriptivos**: Pon nombres claros a los archivos, como `api-dashboard-light.png` en lugar de `img1.png`.
* **Agrega texto alternativo (alt text)**: Proporciona texto alternativo descriptivo para mejorar la accesibilidad y el SEO.
* **Organiza con carpetas**: Agrupa los recursos relacionados, como variantes de modo claro y oscuro o recursos para un área de funcionalidad específica.
* **Usa formatos apropiados**: PNG para gráficos con transparencia, JPG para fotos, SVG para iconos y logotipos (no puedes subir archivos SVG a través del editor, pero puedes agregarlos a tu repositorio mediante Git).