Cómo agregar imágenes en Markdown

Al visitar cualquier sitio web, seguramente habrás notado que las imágenes hacen que las páginas sean más dinámicas y visualmente atractivas. Si el contenido se limitara solo a texto, se vería aburrido y monótono. Los elementos visuales ayudan a los usuarios a comprender y recordar mejor la información, además de hacer la interfaz más amigable.

Markdown es un lenguaje de marcado simple y fácil de usar que permite crear texto con muy poco esfuerzo. Se utiliza ampliamente para escribir documentación, artículos y publicaciones de blog. Markdown también permite agregar imágenes al contenido, las cuales desempeñan un papel fundamental en la visualización de la información, haciéndola más clara y memorable.

Métodos principales para agregar imágenes

Copiar enlace

Existen dos métodos principales para insertar imágenes en Markdown: imágenes locales y enlaces externos.

Imágenes locales

Copiar enlace

Para insertar imágenes almacenadas localmente, es importante especificar correctamente la ruta del archivo. Se recomienda guardar las imágenes en el mismo directorio que el archivo Markdown o en un nivel jerárquico cercano.

Si la imagen se encuentra en el mismo directorio que el archivo .md, basta con proporcionar el nombre del archivo:

• 

Si la imagen está en un subdirectorio (por ejemplo, /img):

• 

El texto entre corchetes ([Computer]) es el texto alternativo (alt-text). Este aparece cuando la imagen no se puede cargar y también es utilizado por los lectores de pantalla para describir la imagen a los usuarios con discapacidad visual.

La ruta de la imagen se coloca entre paréntesis. Asegúrate de que sea correcta para evitar problemas de visualización al subir el contenido a un servidor.

Imágenes externas

Copiar enlace

Para insertar una imagen alojada en internet, usa su URL:

• 

Ventajas de usar imágenes externas:

• Ahorra espacio en el repositorio

• Conveniente si las imágenes se actualizan con frecuencia

Desventajas:

• Dependencia de un servidor externo

• Si la imagen se elimina o la URL cambia, dejará de mostrarse

Tamaño de las imágenes

Copiar enlace

Markdown estándar no admite controlar el tamaño de las imágenes (excepto en plataformas como GitHub que añaden esta funcionalidad), pero puedes utilizar HTML:

• <img src="/img/computer.png" alt="Computer" width="500" height="300">

Formato mejorado

Copiar enlace

El formato enriquecido ayuda a destacar la información y facilita la lectura del contenido.

Pie de imagen

Copiar enlace

Los pies de imagen proporcionan información adicional al lector:

• 

Imagen clicable

Copiar enlace

Para crear una imagen que funcione como enlace, envuelve la sintaxis de la imagen dentro de un enlace:

• [](https://site)

Texto alternativo eficaz

Copiar enlace

El alt-text debe describir el contenido de la imagen de manera clara.

Mal texto alternativo:

• 

Buen texto alternativo:

• 

¿Por qué es importante el alt-text?

Copiar enlace

Accesibilidad:
Los usuarios con discapacidad visual utilizan lectores de pantalla que leen el texto alternativo.

SEO:
Los motores de búsqueda indexan el alt-text, ayudando a que tu contenido aparezca en resultados de búsqueda.

Consejos para trabajar con imágenes

Copiar enlace

• Usa imágenes con el menor tamaño posible para mejorar los tiempos de carga.

• Optimiza las imágenes antes de subirlas.

• Asegúrate de que el alt-text sea único y preciso.

• El nombre del archivo debe ser relevante e incluir palabras clave.
  Ejemplo: en lugar de img123.png, usar computer-setup.png.

Métodos para insertar imágenes — Comparación

Copiar enlace

Conclusión

Copiar enlace

Ahora ya sabes cómo insertar imágenes en Markdown, controlar su tamaño, agregar pies de imagen y mejorar la accesibilidad usando texto alternativo. Las imágenes hacen que el contenido sea más visual y facilitan la comprensión de la información por parte de los lectores.

Consulta también nuestras soluciones de hosting WordPress fiables y de alto rendimiento para tus sitios WordPress.