Cómo añadir una imagen a un Markdown

La información visual se percibe con mucha más facilidad y eficacia que el simple texto. Por eso se dice que una imagen vale más que mil palabras. Así que es posible que también quieras añadir una imagen a tu documento o entrada de blog. A continuación te presentamos algunas formas sencillas de añadir una imagen a una publicación o documento en Markdown.

Markdown es un lenguaje de marcado sencillo y fácil de usar que puede utilizarse para dar formato a casi cualquier documento. Si quieres saber más sobre él, lee La guía de Markdown.

Cómo añadir una imagen desde un archivo

Supongamos que las imágenes que necesita están en la carpeta images:

1
2
3
4
5

 ├─ images
     └─ picture.jpg
     └─ picture-2.jpg
     └─ picture-three.jpg
 ├─ README.md

Importante: Tenga en cuenta que si el nombre del archivo contiene paréntesis u otros caracteres especiales, la imagen puede no mostrarse. Si quieres saber cómo nombrar correctamente los archivos para proyectos web, consulta estas directrices para nombres de archivos en proyectos web.

La primera forma de insertar una imagen local en un documento markdown es utilizar el siguiente código:

1

![Descripción de la imagen](/images/picture.jpg)

La parte entre corchetes es el llamado texto alternativo, que es importante por las siguientes razones:

1. Para la accesibilidad. Los programas de lectura de pantalla lo leen. Por ejemplo, para los que tienen problemas de visión.

2. Este texto se mostrará en lugar de la imagen si el archivo de imagen no se puede cargar por cualquier motivo.

3. Proporciona un contexto y una descripción de la imagen para los motores de búsqueda, ayudándoles a encontrarla.

La parte entre paréntesis es la ruta del archivo. Fíjese en el símbolo / delante de imágenes. Sin este símbolo, su documento puede mostrarse normalmente en su ordenador, pero una vez subido a un servidor en Internet, puede dejar de mostrarse. Esta es una de las principales razones por las que ocurre esto.

Otra forma de mostrar una imagen local en la publicación de markdown es utilizar la etiqueta image en el cuerpo del documento:

1

<image src="/images/picture.jpg" alt="Descripción de la imagen">

Una de las ventajas de este método es que de esta manera se pueden utilizar funciones adicionales de control de la imagen. Los detalles dependen del recurso en el que se publique el documento.

Cualquiera de los dos métodos le dará los resultados que desea, así que la elección es suya.

Cómo añadir una imagen desde un enlace

Cuando necesites insertar una imagen en un documento que está en algún lugar de Internet, sólo tienes que utilizar un enlace a la imagen:

1

![Descripción de la imagen](https://picsum.photos/800/600)

o

1

<image src="https://picsum.photos/800/600" alt="Descripción de la imagen">

Cómo añadir un pie de foto a una imagen

En el código markdown, basta con añadir el texto entre comillas, separado por un espacio:

1

![Descripción de la imagen](/images/picture.jpg "Leyenda de la imagen")

En el código HTML, debe utilizar el atributo caption:

1
2
3
4

<image
  src="/images/picture.jpg"
  alt="Descripción de la imagen"
  caption="Leyenda de la imagen">

Cómo añadir un marco a una imagen

A veces es necesario añadir un marco alrededor de una imagen. Por ejemplo, si la imagen y la página tienen el mismo fondo y la imagen necesita ser separada visualmente.

Una imagen en formato markdown no tiene la posibilidad de añadir estilos de diseño, por lo que esto no es posible. Puede intentar añadir un atributo especial a la etiqueta img como en el código siguiente:

1

<img src="/images/picture.jpg" border="5px solid red"/>

Pero, por desgracia, eso tampoco funcionará. El marco no se mostrará.

Sin embargo, hay una solución y una bastante inusual. Encontrada en StackOverflow. Todo lo que tienes que hacer es rodear la etiqueta image con otra - kbd:

1
2
3

<kbd>
  <img src="/images/picture.jpg" />
</kbd>

¡Genial! 😎