Cómo insertar GIFs animados con Markdown
En este tutorial aprenderás a insertar GIFs animados en un documento Markdown, ya sea desde un archivo local o desde una URL externa.
Los GIFs animados son uno de los recursos más usados en archivos README de GitHub, en documentación técnica y en posts de blog para mostrar interfaces en movimiento, animaciones cortas o reacciones humorísticas. La buena noticia es que un GIF se inserta exactamente igual que una imagen estática en Markdown, ya que el formato GIF es un tipo de imagen más.
A continuación verás cómo insertar un GIF desde una URL externa, desde un archivo local y cómo abordar las limitaciones más habituales.
Insertar un GIF con la sintaxis estándar de imagen
La forma canónica de insertar un GIF es la misma sintaxis de imagen de Markdown: una exclamación, los corchetes con el texto alternativo y los paréntesis con la URL del archivo. El procesador detectará la extensión .gif y la mostrará como un GIF animado en cualquier visor que soporte el formato (que son prácticamente todos).
En el siguiente ejemplo insertamos un GIF desde una URL externa:
El procesador renderizará el GIF en el lugar donde aparezca la sintaxis y la animación arrancará automáticamente al cargar la página.
Insertar un GIF desde un archivo local
Si el GIF forma parte del propio repositorio o proyecto, puedes referenciarlo mediante una ruta relativa desde el archivo Markdown. Es la opción habitual en archivos README de GitHub donde se guarda el GIF en una carpeta docs/ o assets/.
En el siguiente ejemplo insertamos un GIF guardado dentro del proyecto:
Esta ruta relativa funciona en GitHub, GitLab y la mayoría de visores de Markdown, siempre que respeten la estructura de carpetas del repositorio.
Controlar el tamaño del GIF
La sintaxis estándar de Markdown no permite especificar dimensiones para una imagen, lo que se aplica también a los GIFs. Si necesitas redimensionarlo, tendrás que recurrir a la etiqueta HTML <img>, que la mayoría de plataformas (incluida GitHub) aceptan sin problema.
En el siguiente ejemplo limitamos el ancho del GIF a 400 píxeles:
<img src="./docs/demo.gif" alt="Demo de la aplicación" width="400" />Tienes más detalles sobre este patrón en el consejo de redimensionar imágenes con Markdown.
Limitaciones a tener en cuenta
Trabajar con GIFs en Markdown trae un par de inconvenientes que conviene tener presentes:
- Tamaño del archivo: los GIFs animados pueden pesar mucho. Para clips largos o de alta resolución es más eficiente convertirlos a un vídeo en formato MP4 o WebM. Tienes ejemplos en el consejo de insertar vídeos con Markdown.
- Reproducción automática: la animación arranca sola al cargar la página, sin posibilidad de pausarla. Para controles de reproducción, vuelve a aplicar la recomendación de pasar a vídeo.
- Accesibilidad: añade siempre un texto alternativo descriptivo entre los corchetes. Los lectores de pantalla y los buscadores lo usan para entender qué se está mostrando.
Para GIFs muy pesados o muy largos, considera usar servicios externos como Giphy o subir el archivo a la propia plataforma de issues de GitHub (que los convierte automáticamente a MP4 al arrastrarlos).
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. 😊
