DotMDCómo añadir una imagen en Markdown:signo de exclamación, texto alternativo, ruta.
La imagen en Markdown es una línea corta. El tamaño, la alineación y los pies de foto no forman parte de ella y necesitan un poco de HTML. Aquí tienes la sintaxis, las reglas de rutas y los rodeos.
macOS 14 o posterior. Leer es gratis; editar y revisar se pagan una sola vez.
Respuesta rápida
Una imagen es un enlace con un signo de exclamación delante: . La ruta puede ser una dirección web o un archivo relativo al documento. Para un tamaño, pasa a HTML: <img src="image.png" width="400">.
<img src="assets/cat.png" alt="A cat on a keyboard" width="400">·
La sintaxis
- El texto alternativo entre corchetes describe la imagen a los lectores de pantalla y se muestra si la imagen no se carga. Escribe lo que muestra la imagen, no «imagen».
- La ruta va entre paréntesis. Si tiene espacios, escríbelos como
%20o encierra la ruta entre ángulos. - El título es un texto opcional entre comillas, normalmente visible como tooltip al pasar el cursor.
El estilo por referencia también funciona y evita direcciones largas en el texto:
![Logo][logo]
[logo]: https://example.com/logo.png "DotMD logo"Rutas relativas y dónde está el archivo
Una ruta sin esquema es relativa al archivo Markdown, no a donde abriste la app. Con los archivos organizados así
docs/
spec.md
assets/
flow.pngla imagen en spec.md es . Desde un archivo una carpeta más arriba, escribe docs/assets/flow.png, y desde una carpeta más abajo, ../assets/flow.png. En GitHub, una ruta que empieza con / es relativa a la raíz del repositorio. Guarda las imágenes junto al documento, en una carpeta assets, para que mover la carpeta mueva también las imágenes.
Los nombres de archivo de las imágenes distinguen mayúsculas y minúsculas en los servidores Linux aunque un Mac las ignore, lo que es una causa habitual de que una imagen funcione en local y se rompa en línea.
Cómo fijar el tamaño de la imagen
Markdown no tiene tamaño. Usa una etiqueta HTML img con un ancho; el alto sigue las proporciones:
<img src="assets/screen.png" alt="Settings window" width="400">El ancho y el alto son en píxeles, y un porcentaje como width="50%" funciona en la mayoría de las apps. GitHub admite esta etiqueta en README y comentarios. Algunas apps también aceptan un tamaño dentro del texto alternativo, como . Esa forma viene de Obsidian y DotMD la lee, pero otras apps mostrarán el |400 como parte del texto alternativo, así que usa la etiqueta HTML en un archivo que deba funcionar en todas partes. En una celda de tabla, la barra vertical se escribe \|.
Alineación y pies de foto
La alineación y los pies de foto también son HTML. Para centrar una imagen, ponla en un párrafo con align:
<p align="center">
<img src="assets/logo.png" alt="Logo" width="200">
</p>Para un pie de foto, usa un figure con un figcaption:
<figure>
<img src="assets/flow.png" alt="Request flow" width="500">
<figcaption>Figure 1. The request flow.</figcaption>
</figure>No todas las apps conservan estas etiquetas; GitHub conserva la mayoría, y DotMD muestra ambas. Si necesitas un pie de foto que funcione en cualquier sitio, pon en su lugar una línea en cursiva bajo la imagen: *Figure 1. The request flow.*.
Una imagen clicable y otros trucos
Pon la imagen dentro de un enlace para que se pueda hacer clic en ella:
[](https://example.com/builds)Así se construyen las insignias de la parte superior de un README. Para mostrar otra imagen en modo oscuro, usa un elemento picture con un <source media="(prefers-color-scheme: dark)">, donde la app lo admita.
Texto alternativo, tamaño de archivo y formatos
Escribe el texto alternativo como si describieras la imagen por teléfono: Settings window with the Sync option turned on dice más que screenshot. Para una imagen puramente decorativa, deja los corchetes vacíos para que un lector de pantalla la omita.
Usa PNG para capturas y diagramas, JPEG para fotos y SVG para logotipos y dibujos de línea, y mantén los archivos pequeños: una captura de 6 MB ralentiza un README y un repositorio. La mayoría de las apps también muestran los GIF animados como cualquier otra imagen.
Por qué no se ve la imagen
- La ruta es incorrecta. Compruébala desde la carpeta del archivo Markdown y revisa las mayúsculas del nombre.
- Falta el signo de exclamación. Sin él obtienes un enlace, no una imagen.
- Un espacio en la ruta sin escapar.
- Un archivo local en una página en línea. Una ruta a un archivo de tu disco solo funciona en tu disco.
- Una imagen remota bloqueada. Algunas apps no cargan imágenes de la web hasta que lo permites.
Para ver cómo quedará una imagen, abre el archivo en un lector que resuelva las rutas relativas al documento. DotMD lo hace: las imágenes se muestran sin superar el ancho de la columna de texto, se respeta la etiqueta HTML de ancho y una captura pegada en el editor se guarda en una carpeta assets junto al archivo. Leer es gratis.
Preguntas sobre las imágenes en Markdown
¿Cómo añado una imagen en Markdown?
Escribe . La ruta es una dirección web o una ruta de archivo relativa al archivo Markdown.
¿Cómo cambio el tamaño de una imagen en Markdown?
Markdown no tiene sintaxis de tamaño. Usa una etiqueta HTML como <img src="image.png" width="400">.
¿Cómo centro una imagen o añado un pie de foto en Markdown?
Usa HTML: envuelve la imagen en <p align="center"> para centrarla, o en <figure> con un <figcaption> para un pie de foto. La compatibilidad varía según la app.
¿Por qué no se ve mi imagen de Markdown?
Normalmente la ruta relativa es incorrecta o las mayúsculas no coinciden con el nombre del archivo. Comprueba que hay un signo de exclamación y que la ruta es relativa al archivo Markdown.