Introducción
Markdown ofrece una sintaxis sencilla y directa para formatear documentos, incluyendo la inserción de imágenes, facilitando así la creación de contenido. Su simplicidad permite a los autores centrarse en el contenido en lugar de en etiquetas HTML complejas. Sin embargo, esta simplicidad también puede ser una limitación cuando se necesita mayor control sobre la presentación de las imágenes. Este artículo explora la sintaxis básica de Markdown para imágenes.
Conclusiones clave
- La sintaxis básica de Markdown para imágenes es
, donde el texto alternativo describe la imagen y la URL apunta a una ruta local o a una fuente remota. - Para crear una imagen con enlace, envuelva la sintaxis de la imagen dentro de un enlace Markdown:
[](link_url). - Markdown no admite de forma nativa el redimensionamiento ni la alineación de imágenes. Para estos casos, utilice la
<img>etiqueta HTML con los atributoswidth,height, o .style - El texto alternativo es fundamental para la accesibilidad. Debe ser breve, específico y centrarse en lo que la imagen transmite en contexto; los lectores de pantalla ya la identifican como una imagen.
- La mayoría de los procesadores de Markdown admiten HTML en línea sin formato, lo que permite usarlo
<img>con CSS en línea para dimensiones, flotación, centrado, carga diferida y otros estilos avanzados.
Requisitos previos
- Conocimientos generales de HTML5. Para una revisión exhaustiva del lenguaje de marcado HTML5, explore nuestra serie Cómo crear un sitio web en HTML .
Cómo agregar imágenes en Markdown
Aquí está la sintaxis para agregar imágenes en Markdown. El título es opcional:
Esto da como resultado el siguiente código HTML:
Imágenes relacionadas
Con la sintaxis Markdown para enlaces , así es como se tendría una imagen con enlace:
Así es como se ve la imagen enlazada arriba:
Cambiar el tamaño de las imágenes en Markdown
Markdown por sí solo no admite el redimensionamiento directo de imágenes. Sin embargo, podemos solucionar este problema utilizando la <imgetiqueta HTML >. Vamos a redimensionar la imagen anterior:
Esto redimensionará la imagen al ancho mencionado, en este caso, a 400.
Este método es compatible con la mayoría de las plataformas que ofrecen Markdown con soporte para HTML, incluidas GitHub y Jupyter Notebook.
Mejores prácticas de texto alternativo para la accesibilidad
El texto alternativo (alt text) es una breve descripción que explica el contenido de una imagen. Se utiliza principalmente en lectores de pantalla para ayudar a las personas con discapacidad visual a comprender el contenido de las imágenes. También resulta útil cuando las imágenes no se cargan correctamente. Por lo tanto, es fundamental que los textos alternativos sean claros, específicos y se centren en lo importante de la imagen en su contexto.
Estas son algunas de las mejores prácticas:
- Sé breve. La mayoría de las veces, una frase es suficiente.
- Describe los elementos clave en lugar de cada detalle. Piensa en lo que alguien necesitaría para comprender la imagen si no pudiera verla.
- No es necesario decir "imagen de" o "foto de", ya que los lectores de pantalla ya lo hacen. Pero mencione si se trata de un logotipo, una ilustración o una pintura.
- Evite usar el mismo texto que aparece junto a la imagen.
Para obtener más información sobre accesibilidad, puede consultar la guía Accesibilidad web para principiantes .
Alternativas HTML y estilos en línea
Si bien Markdown ofrece una sintaxis sencilla y eficiente para insertar imágenes, presenta limitaciones inherentes en cuanto a estilos avanzados o alternativas para diferentes situaciones. En estos casos, se puede utilizar HTML sin formato directamente en el documento Markdown. La mayoría de los procesadores de Markdown admiten la inserción de HTML sin formato, lo que lo convierte en una potente alternativa cuando la sintaxis de Markdown no es suficiente.
Opta por <img>etiquetas HTML en lugar de la sintaxis Markdown para las imágenes cuando necesites:
- Especifique las dimensiones exactas: Markdown no admite de forma nativa los atributos de ancho o alto.
- Aplicar estilos complejos: Más allá del texto alternativo básico y el título (información sobre herramientas), Markdown no ofrece una forma directa de agregar estilos CSS como bordes, relleno o alineación.
- Implementar imágenes responsivas: Usar
<picture>o srcset para diferentes fuentes de imágenes según el tamaño o la resolución de la pantalla. - Agregar subtítulos a las imágenes: Si bien algunas variantes de Markdown pueden tener extensiones, el Markdown estándar no tiene una sintaxis específica para subtítulos.
- Agregar atributos personalizados: Cualquier atributo HTML no compatible con Markdown (por ejemplo,
loading="lazy",class,id).
El uso de HTML en Markdown también permite utilizar CSS en línea para dar estilo a las imágenes. Puedes usar el styleatributo para aplicar propiedades CSS directamente a un elemento HTML. Por ejemplo:
Existen otros estilos en línea que puedes utilizar para las imágenes:
-
Apresto:
-
Alineación:
-
Centrado (requiere un elemento contenedor): Para centrar una imagen, debe envolverla en un elemento HTML de nivel de bloque como un
<div>y aplicar alineación de texto o margen automático:
Preguntas frecuentes
1. ¿Cuál es la sintaxis correcta para insertar una imagen en Markdown?
La sintaxis básica para insertar una imagen es:
Puede image_urlser una ruta/URL a la imagen.
2. ¿Cómo agrego una imagen local en Markdown?
Para agregar una imagen local en Markdown, reemplace image_urlen la sintaxis básica con la ruta local a la imagen. Por ejemplo:
También puedes usar rutas relativas:
Aquí, la imagen se encuentra en la misma carpeta que tu archivo Markdown.
3. ¿Puedo cambiar el tamaño o centrar las imágenes en Markdown?
Para cambiar el tamaño de una imagen, utilice la <img>etiqueta HTML:
Para centrar una imagen, podemos usar el alignatributo:
4. ¿Cómo puedo usar imágenes en un archivo README de GitHub?
Para usar imágenes en GitHub, puedes:
-
Crea una carpeta en el repositorio de GitHub, sube todas las imágenes a esa carpeta y utiliza la ruta relativa en la sintaxis básica.
documento.md -
Como alternativa, puedes subir las imágenes a tu depósito de almacenamiento preferido y añadir la URL a la imagen.
Conclusión
En este tutorial, se abordó la sintaxis básica para insertar imágenes en Markdown, incluyendo imágenes básicas, imágenes con enlaces y el uso de HTML sin formato para redimensionar y aplicar estilos avanzados. También se aprendieron las mejores prácticas para el texto alternativo en cuanto a accesibilidad y cómo aplicar CSS en línea cuando la sintaxis estándar de Markdown no es suficiente.
Ahora puedes insertar imágenes en documentos Markdown, controlar sus dimensiones y alineación mediante HTML, y escribir texto alternativo accesible. Estas técnicas se aplican a archivos README de GitHub, sitios de documentación, blogs y cualquier plataforma que admita HTML para renderizar Markdown.
Para seguir desarrollando estas habilidades, consulta los siguientes tutoriales:
Gracias por aprender con la comunidad de DigitalOcean. Descubre nuestras soluciones de computación, almacenamiento, redes y bases de datos gestionadas.
Acerca del/de los autor/es
¿Sigues buscando una respuesta?
Este cuadro de texto utiliza por defecto el formato Markdown para dar formato a su respuesta.
Puedes escribir !ref en este cuadro de texto para buscar rápidamente en nuestro conjunto completo de tutoriales, documentación y ofertas del mercado, ¡e insertar el enlace!
Si, por casualidad, alguien quiere insertar imágenes (es decir, en el mismo archivo) dentro de un archivo Markdown, puede hacerlo convirtiendo la imagen a URI base64 (esto puede ayudar: https://base64.guru/converter/encode/image ) y pegando el resultado dentro de la sección de enlace de la imagen.
Puedes comprobarlo aquí: https://drive.google.com/file/d/1TB5cRgTHpNN5PtyrpV50yfAGQQym9O89/view?usp=sharing
como referencia.
Esta obra está bajo una licencia Creative Commons Atribución-NoComercial-CompartirIgual 4.0 Internacional.
Conviértete en colaborador de la comunidad.
Reciba un pago por escribir tutoriales técnicos y seleccione una organización benéfica centrada en la tecnología para que reciba una donación equivalente.
Documentación de DigitalOcean
Documentación completa para cada producto de DigitalOcean.
Recursos para startups y empresas nativas de IA
En The Wave encontrarás todo lo que necesitas saber para crear un negocio, desde cómo conseguir financiación hasta cómo comercializar tu producto.
La nube del desarrollador
Escala tus recursos a medida que creces, ya sea que ejecutes una máquina virtual o diez mil.
Empiece a construir hoy mismo.
Desde inferencia basada en GPU y Kubernetes hasta bases de datos y almacenamiento gestionados, obtenga todo lo que necesita para crear, escalar e implementar aplicaciones inteligentes.
