Image | Design System Docs

Componente de imagen optimizado con carga diferida (lazy loading), relaciones de aspecto y efecto de aparición suave.

Imagen Básica

Code Snippet

<Image 
  src="https://images.unsplash.com/photo-1682687220742-aba13b6e50ba?q=80&w=800&auto=format&fit=crop" 
  alt="Paisaje de montaña" 
  class="rounded-xl"
/>

Relación de Aspecto: Video (16:9)

Code Snippet

<Image 
  src="https://images.unsplash.com/photo-1498050108023-c5249f4df085?q=80&w=800&auto=format&fit=crop" 
  alt="Espacio de trabajo" 
  aspectRatio="video"
  class="rounded-xl"
/>

Uso como Avatar (Square + rounded-full)

Code Snippet

<Image 
  src="https://images.unsplash.com/photo-1534528741775-53994a69daeb?q=80&w=400&auto=format&fit=crop" 
  alt="Retrato de usuario" 
  aspectRatio="square"
  class="w-24 rounded-full"
/>