Overview

Overview

The Image component provides optimized image display with automatic lazy loading, thumbhash placeholders, and intelligent CDN delivery. It is implemented as a Lit web component (<rixl-image>) and wrapped for React, so image analytics and UI behavior are consistent across every framework.

Quick Example

import {Image} from "@rixl/media-react";

function ImageDisplay() {
  return (
    <Image
      id="your-image-id"
      className="object-contain w-full h-full rounded-lg"
      analyticsPage="standalone"
      onRixlAnalytics={(e) => console.log(e.detail.event)}
    />
  );
}

Key Features

Automatic Processing

• Lazy loading by default for improved page performance
• Thumbhash placeholders during loading for visual continuity
• Automatic format selection (WebP, AVIF) based on browser support
• Responsive image serving based on device pixel density

Developer Experience

• Simple API with minimal required props
• Full TypeScript support with type safety
• CSS framework compatibility (TailwindCSS, etc.)
• Accessibility-first with proper alt text handling

Analytics

• Automatic content_views start/watch/end events
• image_click interactions with click coordinates
• image_load_error events for failed media loads
• Page, feed, and post context support

Performance Benefits

• CDN delivery for global distribution
• Automatic image processing and resizing
• Progressive loading for better perceived performance
• Memory-efficient rendering and cleanup

When to Use

The Image component is perfect for:

• Product galleries requiring high-quality image display
• Hero sections with responsive background images
• Content management with user-uploaded images
• E-commerce platforms needing optimized product photos
• Portfolio websites showcasing visual work
• Feed posts alongside the Feed component

Browser Support

Works across all modern browsers with automatic fallbacks for older browsers that don't support advanced image formats.