Image Processing

Welcome to RIXL Image Processing — where every image becomes a performance powerhouse. Upload any format and get back perfectly processed AVIF files with smart placeholders, responsive sizing, and instant global delivery.

Quick Actions

Upload Images

Transform images with automatic AVIF compression and smart placeholders.

React Component

Drop-in Image component with lazy loading and responsive sizing.

Dashboard Management

Upload, organize, and manage images through our web interface.

How RIXL Transforms Your Images

Upload Any Format

Drop in JPEG, PNG, WebP, HEIC, or any common image format. RIXL accepts files up to 100MB each.

Automatic AVIF Conversion

Every image is converted to AVIF format for 50% smaller file sizes with no visible quality loss.

Smart Placeholder Generation

Instant blur placeholders are created for smooth loading experiences while full images load.

Global CDN Delivery

Your images are distributed to 200+ edge locations worldwide for instant loading anywhere.

Image Processing Features

AVIF Transformation

50% smaller files than JPEG with no visible quality loss. Automatic fallbacks included.

Smart Placeholders

Instant blur placeholders prevent layout shift and improve perceived performance.

Responsive Delivery

Automatic sizing for different devices and screen densities.

Lazy Loading

Built-in lazy loading reduces initial page load and saves bandwidth.

Format Fallbacks

Automatic WebP and JPEG fallbacks for older browsers.

Global CDN

Edge caching and intelligent routing for instant delivery worldwide.

Supported Formats

Input Formats

RIXL accepts all common image formats for processing:

Common Formats

JPEG, PNG, WebP, GIF, BMP - the formats you use every day.

Professional Formats

HEIC/HEIF, TIFF, JPEG 2000 - high-quality formats from cameras and professional tools.

Vector Graphics

SVG files are preserved as-is for crisp scaling at any size.

Output Preparation

Every image is automatically prepared for web delivery:

Primary: AVIF format (50% smaller than JPEG)
Fallback: WebP format (30% smaller than JPEG)
Legacy: JPEG format (universal compatibility)
Placeholders: Instant blur placeholders for smooth loading

Implementation Examples

React Component Usage

import {Image} from '@rixl/videosdk-react';

function ProfilePhoto({imageId}) {
return (
<Image
id={imageId}
   alt="User profile photo"
   className="w-32 h-32 rounded-full object-cover"
   loading="eager"
   priority={true}
/>
);
}

import {Image} from '@rixl/videosdk-react';

function ImageGallery({images}) {
return (
<div className="grid grid-cols-1 md:grid-cols-2 lg:grid-cols-3 gap-6">
{images.map((image, index) => (
<div key={image.id} className="aspect-square">
<Image
  id={image.id}
  alt={image.description}
  className="w-full h-full object-cover rounded-lg hover:scale-105 transition-transform"
  loading={index < 6 ? "eager" : "lazy"}
  sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
/>
</div>
))}
</div>
);
}

import {Image} from '@rixl/videosdk-react';

function ProductImage({product}) {
return (
<div className="product-image-container">
<Image
id={product.mainImageId}
   alt={`${product.name} - main product image`}
   className="w-full h-96 object-cover rounded-lg"
   priority={true}
   sizes="(max-width: 768px) 100vw, 50vw"
   onLoad={() => console.log('Product image loaded')}
/>

<div className="flex gap-2 mt-4">
{product.thumbnailIds.map((thumbId, index) => (
  <Image
    key={thumbId}
    id={thumbId}
    alt={`${product.name} - view ${index + 1}`}
    className="w-16 h-16 object-cover rounded cursor-pointer hover:opacity-75"
    loading="lazy"
  />
))}
</div>
</div>
);
}

API Integration

// Upload image via API
const uploadImage = async (imageFile) => {
// Initialize upload
const initResponse = await fetch('https://api.rixl.com/images/upload/init', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
name: imageFile.name,
format: 'jpg'
})
});

const {image_id, presigned_url} = await initResponse.json();

// Upload file to presigned URL
await fetch(presigned_url, {
method: 'PUT',
body: imageFile
});

// Complete upload
const completeResponse = await fetch('https://api.rixl.com/images/upload/complete', {
method: 'POST',
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY',
'Content-Type': 'application/json'
},
body: JSON.stringify({
image_id: image_id
})
});

const result = await completeResponse.json();
return result.data.image_id;
};

// Get image details and delivery status
const getImageDetails = async (imageId) => {
const response = await fetch(`https://api.rixl.com/images/${imageId}`, {
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY'
}
});

const result = await response.json();
return result.data;
};

// List images with pagination
const listImages = async (page = 0, limit = 25) => {
const response = await fetch(`https://api.rixl.com/images?offset=${page * limit}&limit=${limit}`, {
headers: {
'X-API-Key': 'YOUR_PROJECT_API_KEY'
}
});

const result = await response.json();
return result.data;
};

Real-World Use Cases

E-commerce Applications

Product Galleries

High-quality product images with instant loading and zoom functionality.

User-Generated Content

Customer photos and reviews with automatic preparation and moderation.

Category Banners

Hero images and promotional banners delivered for all devices.

Content & Media

Editorial Content

News articles, blog posts, and magazine-style layouts with delivered images.

Portfolio Websites

Photography and design portfolios with high-quality image delivery.

Social Platforms

User profiles, posts, and feeds with automatic image preparation.

Performance Benefits

50% Smaller Files

AVIF compression reduces file sizes by 50% compared to JPEG with no quality loss.

Faster Page Loads

Lazy loading and smart placeholders improve perceived performance.

Better SEO

Faster loading images improve Core Web Vitals and search rankings.

What's Next?

Ready to deliver your images? Choose your approach:

Upload Your First Image

See AVIF transformation in action with our dashboard upload.

React Integration

Add the Image component to your React application.

API Implementation

Build custom image workflows with our REST API.

Ready to see the difference?

Start with our Dashboard Upload to see AVIF transformation in action, or jump into the React Component Guide to add delivered images to your application. For custom workflows, explore our API Documentation.