Image

Image Component

The Image component is a high-performance alternative to the standard HTML <img> tag, heavily inspired by Next.js. It helps optimize images for speed and search engine ranking.

Features

• Lazy Loading: Images are only loaded when they enter the viewport by default.
• CLS Prevention: Automatically sets width and height to prevent layout shifts.
• Layout Modes: Supports standard fixed sizing or a Fill mode for responsive containers.
• Blur-up Placeholders: Support for low-resolution placeholders while the full image loads.
• LCP Optimization: Use the Priority flag for critical above-the-fold images.

Basic Usage

new Image
{
    Src = "/path/to/image.jpg",
    Alt = "Description",
    Width = 800,
    Height = 600
}

Layout Modes

Fixed (Default)

Requires Width and Height. The image maintains these dimensions.

Fill

The image will fill its parent container. The parent MUST have relative positioning.

new Container
{
    ClassName = "relative h-64",
    Children =
    {
        new Image { Src = "/hero.webp", Fill = true }
    }
}

Placeholders

Use Blur placeholders for a smoother loading experience.

new Image
{
    Src = "/large.jpg",
    Width = 800,
    Height = 600,
    Placeholder = ImagePlaceholder.Blur,
    BlurDataURL = "data:image/webp;base64,..."
}

Properties

Property	Type	Default	Description
Src	string	-	Image source URL.
Alt	string	-	Alternative text for accessibility.
Width	int?	-	Width in pixels.
Height	int?	-	Height in pixels.
Fill	bool	false	If true, fills the parent container.
Loading	ImageLoading	Lazy	Lazy or Eager.
Priority	bool	false	High priority for preloading (LCP).
Placeholder	ImagePlaceholder	None	Blur or Empty.
BlurDataURL	string?	-	Small Data URL for blurred background.
ObjectFit	string?	"cover"	CSS object-fit property (for Fill).