Imágenes

Insertar una imagen

Los archivos de imagenes son ficheros binarios que no pueden formar parte de un archivo plain text, ni en el caso de los ficheros markdown, ni en los HTML. Cuando accedemos al sitio web, las imágenes se descargan en paralelo junto al archivo HTML y nuestro navegador hará una composición "al vuelo" para mostrar la página.

El archivo HTML ha de llevar en su texto una etiqueta <img>, para indicar al navegador el punto del documento donde hay que visualizar la imagen.

Veamos un ejemplo de archivo markdown. Vamos a insertar directamente una etiqueta <img> entre párrafo y párrafo:

Emoji smiley:

<img src="./img/Smiley.png" alt="Smiley" width="150" height="150">

Imagen con licencia de [Pixabay](https://pixabay.com/es/illustrations/smiley-emoticon-emoji-cómic-4832495/)

Lo que muestra:

Emoji smiley:

Imagen con licencia de Pixabay

Las imágenes consisten en una única etiqueta HTML <img>, sin etiqueta de cierre. Entre otros, podemos poner los siguientes atributos:

• src="nombre_archivo" - Indica el archivo a descargar y mostrar. En nuestro ejemplo, indicamos un fichero en la misma carpeta que el documento, subcarpeta /img.
• alt="texto" - Texto alternativo cuando no se puede mostrar la imagen
• width y height permiten establecer el tamaño de visualización
• title="texto"- Recuadro a mostrar cuando pasamos el ratón sobre la imagen.

Como alternativa al uso de etiquetas, la sintaxis Markdown cuenta con el siguiente formato:

![texto alternativo](./img/Smiley.png)

Véase que el formato es el mismo que para los enlaces, añadiendo un prefijo !. El texto del enlace será considerado como texto alternativo cuando no se puede mostrar la imagen.

Markdown no cuenta inicialmente con otras opciones, aunque podemos añadir el atributo title tras el nombre del archivo:

![texto alternativo](/carpeta/imagen.jpg "Título")

Si necesitamos especificar tamaño u otros atributos, tendremos que usar directamente una etiqueta img insertada en el texto markdown.

Imágenes por referencia

Al igual que sucede con los enlaces, podemos poner la misma imagen varias veces en un documento, acompañada de una referencia que enlazará a una ubicación donde definamos el archivo de imagen a enlazar:

Texto regular.

![texto alternativo][id]

Y en otro lugar del documento escribimos:

[id]: carpeta/imagen.jpg

Pudiendo añadir un título:

[id]: carpeta/imagen.jpg  "Título"

Posicionamiento de las imágenes

En el ejemplo anterior, poníamos la imagen entre párrafo y párrafo, pero podemos insertarla dentro del texto de uno de los párrafos, lo que la muestra entre carácter y carácter:

Emoji smiley: 
<img src="./img/Smiley.png" alt="Smiley" width="150" height="150"> 
con licencia de [Pixabay](https://pixabay.com/es/illustrations/smiley-emoticon-emoji-cómic-4832495/)

Esto se visualiza así:

Emoji smiley: con licencia de Pixabay

Podemos usar el atributo style para llevar la imagen a la izquierda o derecha del párrafo:

Emoji smiley:

Con licencia de Pixabay

La propiedad de estilo float determina si la imagen debe mostrarse a la izquierda o derecha del texto:

<img src="./img/Smiley.png" width="150" height="150" style="float:right">

Cambiar right por left si la queremos a la izquierda.

Imágenes como enlaces

Hay ocasiones en las que queremos una imagen que, al pulsar sobre ella, haga de enlace a otro documento o sección. Podemos combinar ambas sintaxis, la de los enlaces y la de las imágenes. Basta con escribir un enlace y, en lugar del texto a mostrar, poner una imagen.

En formato markdown, en lugar de:

[  texto  ](URL enlazada)

escribimos:

[  ![](archivo_de imagen)  ](URL enlazada)

Y en formato HTML, en lugar de:

<a href="URL enlazada">
   texto 
</a>

escribimos:

<a href="URL enlazada"> 
   ![](./nombre_archivo.jpg) 
</a>