Image Component Guide

Learn how to use the Image component for responsive, optimized images

# Image Component Guide

The <image> component provides responsive, optimized images similar to Gatsby’s GatsbyImage and Astro’s Image.

# Quick Start

# Fixed Layout

<image
  src="/images/demos/demo-fixed-1600x1200.webp"
  width=800
  height=600
  layout="fixed"
/>

# Fluid Layout

<image src="/images/demos/demo-fluid-1800x900.webp" layout="fluid" placeholder="blur" />

# Circular Avatars

<image
  src="/images/demos/demo-avatar-1.webp"
  width=100
  height=100
  layout="fixed"
  style={ borderRadius: '50%',
    border: '3px solid white',
    boxShadow: '0 2px 8px rgba(0,0,0,0.15)' }
/>

# Image Gallery

# Props

Prop	Type	Default	Description
`src`	`string`	required	Image path or URL
`alt`	`string`	`''`	Alt text
`width`	`number`	`undefined`	Width in pixels
`height`	`number`	`undefined`	Height in pixels
`layout`	`'fixed' \| 'fluid' \| 'responsive'`	`'responsive'`	Layout mode
`loading`	`'lazy' \| 'eager'`	`'lazy'`	Loading strategy
`placeholder`	`'blur' \| 'none'`	`'none'`	Show blur placeholder
`class`	`string`	`undefined`	CSS class
`style`	`object`	`undefined`	Inline styles