Ejercicio 6 – Integración de Imágenes Adaptativas

📸 Desafío: Landing Page Visual

El objetivo de este ejercicio consiste en diseñar una Landing Page de alto impacto visual donde la gestión de imágenes sea el eje central. Se han aplicado técnicas avanzadas de optimización y efectos CSS para garantizar tanto estética como rendimiento.

Técnicas Implementadas

Adaptabilidad Real

Uso de srcset y sizes para servir diferentes resoluciones según el dispositivo del usuario, optimizando el ancho de banda.

Control de Proporción

Aplicación de object-fit: cover para mantener la integridad visual de las imágenes sin deformaciones en contenedores variables.

Interacción Dinámica

Efectos de hover utilizando transform: scale() y filtros de brillo (brightness) para mejorar la experiencia de usuario.

Código Destacado (Adaptabilidad)

Ejemplo de la estructura implementada para la carga inteligente de imágenes:

<img src="hero-small.jpg" srcset="hero-large.jpg 1024w, hero-medium.jpg 768w, hero-small.jpg 480w" sizes="(max-width: 768px) 100vw, 50vw" alt="Imagen promocional adaptativa">

🚀 Resultado del Proyecto

He desarrollado una landing page completa que incluye cabecera con imagen de fondo fija, galería con sombras dinámicas y un diseño totalmente responsivo.