Día 4/365 Desafío Full Stack: Dar vida a tu página con imágenes en HTML

Día 4/365 Desafío Full Stack: Dar vida a tu página con imágenes en HTML. Soy Dhanian y hoy te explico cómo convertir textos estáticos en historias visuales accesibles y profesionales. Además te cuento cómo trabajamos en Q2BSTUDIO como empresa de desarrollo de software y aplicaciones a medida, con experiencia en inteligencia artificial, ciberseguridad, servicios cloud aws y azure y servicios inteligencia de negocio para empresas.

El elemento <img> sirve para insertar imágenes en una página web. Es un elemento autocerrado que no envuelve contenido sino que se configura mediante atributos. Los dos atributos imprescindibles son src y alt. src indica la ruta de la imagen y alt ofrece un texto alternativo para accesibilidad, SEO y casos de imagen rota.

Sobre src puedes usar rutas relativas dentro de tu proyecto o URL absolutas externas. Evita el hotlinking a otras webs ya que roba ancho de banda y resulta poco fiable. Ejemplo de rutas relativas y de uso de alt en formato representado:

<img src=images/hike-panorama.jpg alt=Panoramica_de_montanas_desde_el_PCT width=1000 height=400 /><img src=images/deer-on-trail.jpg alt=Venado_mula_curioso_en_el_sendero width=800 height=600 /><img src=images/divider-flourish.png alt= width=200 height=20 />

Notas sobre alt: el texto alternativo debe ser breve y descriptivo, explicar la función de la imagen si actúa como enlace o botón, y dejarlo vacío en imágenes puramente decorativas para que los lectores de pantalla las ignoren. Además, el alt ayuda al posicionamiento en buscadores cuando describe el contenido visual.

Otros atributos útiles son width y height para indicar el tamaño intrínseco de la imagen y evitar desplazamientos de contenido mientras se carga la página. Más adelante se recomienda usar CSS para que las imágenes sean responsivas, pero declarar tamaño inicial es una práctica de rendimiento.

Buenas prácticas rápidas: usa imágenes de las que tengas derechos de uso, optimiza el peso para mejorar la carga, proporciona alt descriptivos, y prefiere rutas relativas cuando las imágenes forman parte de tu sitio. Para ilustrar, un ejemplo de uso funcional: una imagen que enlaza a la página principal debe incluir un alt que explique la acción para usuarios de lectores de pantalla.

Reto del Día 4: crea una carpeta images dentro de tu proyecto. Busca 2 o 3 imágenes de las que tengas derechos (tus fotos o recursos libres). Crea un archivo gallery.html y construye una página que muestre esas imágenes con etiquetas <img>, usando rutas relativas como src=images/tu-imagen.jpg y alt descriptivos para cada una. Opcionalmente añade width y height. Prueba renombrar un archivo en la carpeta images para ver cómo aparece el alt cuando el navegador no encuentra la imagen.

En Q2BSTUDIO desarrollamos soluciones integrales que combinan diseño web con servicios avanzados como aplicaciones a medida y software a medida, integración de inteligencia artificial para empresas, agentes IA, ciberseguridad y pentesting, y proyectos de inteligencia de negocio con herramientas como power bi. Si te interesa crear una aplicación o producto a medida revisa nuestro apartado de desarrollo de aplicaciones y software multiplataforma y si buscas incorporar IA a tus procesos visita nuestras soluciones de inteligencia artificial.

Palabras clave integradas naturalmente en este artículo para mejorar posicionamiento: aplicaciones a medida, software a medida, inteligencia artificial, ciberseguridad, servicios cloud aws y azure, servicios inteligencia de negocio, ia para empresas, agentes IA y power bi. Sigue el desafío, practica con tus propias imágenes y en poco tiempo tus páginas tendrán un aspecto mucho más profesional y accesible.