Cómo usar una imagen como enlace con Markdown
En este tutorial aprenderás a convertir una imagen en un enlace clicable con Markdown, combinando la sintaxis de imagen y la de enlace.
Convertir una imagen en un enlace clicable es una técnica muy útil para crear botones visuales, badges, banners promocionales o miniaturas que llevan a vídeos en YouTube. Aunque parece complejo, Markdown lo resuelve con una combinación elegante de sus dos sintaxis básicas: la de imagen y la de enlace.
A continuación verás la sintaxis exacta, casos de uso reales y la alternativa en HTML cuando necesitas más control.
La sintaxis combinada de imagen y enlace
La idea es sencilla: en lugar de envolver un texto entre los corchetes del enlace, envuelves la sintaxis completa de una imagen. El procesador entenderá que el contenido clicable del enlace es la imagen y no un texto.
En el siguiente ejemplo creamos una imagen que enlaza a una URL externa:
[](https://ejemplo.com)Al renderizarse, aparecerá la imagen y al hacer clic sobre ella el navegador llevará a la URL indicada. Fíjate en que la exclamación ! queda dentro del corchete exterior, no fuera.
Estructura desglosada
Para tener claro qué hace cada parte, conviene leer la sintaxis de fuera hacia dentro:
[...](URL): la sintaxis de enlace, donde la URL es el destino al hacer clic.: la sintaxis de imagen, que va dentro de los corchetes del enlace en lugar de un texto.alt: el texto alternativo que se mostrará si la imagen no carga, y que usan los lectores de pantalla.imagen: la URL o ruta del archivo de imagen.URL: la dirección a la que apunta el enlace al hacer clic.
Caso típico: miniatura de vídeo de YouTube
Uno de los usos más comunes es simular un reproductor de vídeo en un archivo README. Como Markdown no permite insertar vídeos directamente, se inserta una miniatura del vídeo como imagen y se enlaza a la página de YouTube.
En el siguiente ejemplo creamos una miniatura clicable hacia un vídeo de YouTube:
[](https://www.youtube.com/watch?v=ID_DEL_VIDEO)YouTube ofrece miniaturas de tamaño estándar en URLs predecibles, lo que hace que este patrón se aplique sin esfuerzo.
Caso típico: badge de un servicio externo
Otro uso muy extendido es enlazar badges (como los de shields.io, codecov o npm) a las páginas correspondientes. En este caso, la imagen es un SVG dinámico que muestra el estado de un servicio y el enlace lleva al panel detallado.
En el siguiente ejemplo creamos un badge de estado de build:
[](https://github.com/usuario/proyecto/actions)Este patrón es prácticamente obligatorio en los README de proyectos de código abierto.
Versión HTML para más control
Si necesitas controlar dimensiones de la imagen, atributos del enlace (como abrir en una pestaña nueva) o aplicar estilos, lo más práctico es escribirlo directamente en HTML.
En el siguiente ejemplo combinamos <a> e <img> para abrir el enlace en una pestaña nueva con una imagen de ancho fijo:
<a href="https://ejemplo.com" target="_blank">
<img src="/img/logo.png" alt="Logo" width="200" />
</a>Para más detalles sobre el atributo target y otras opciones del enlace, tienes el consejo de definir el target de los enlaces con Markdown.
Esto ha sido todo.
👋 Hola! Soy Edu, me encanta crear cosas y he redactado este tutorial. Si te ha resultado útil, el mayor favor que me podrías hacer es el de compatirlo en Twitter.
Sígueme en Twitter para estar al día con mi contenido. 😊
