Image

Name: Stack0
Author: Stack0

A next/image wrapper optimized for Stack0 CDN with built-in image transformations. Uses a custom loader to bypass Next.js image optimization in favor of CDN-level processing.

Demo

Default

With WebP transform

With blur effect

Why Use This Component?

When using Stack0 CDN, image optimization happens at the CDN level, not in your Next.js application. This component:

Bypasses Next.js image optimization - Prevents double processing
Uses Stack0 CDN transforms - Width, height, format, quality via URL params
Maintains all next/image features - Lazy loading, blur placeholder, responsive sizing
Type-safe transforms - Full TypeScript support for CDN options

Basic Usage

basic-example.tsx

import { Image } from '@stack0/elements'
 
export function Example() {
  return (
    <Image
      src="https://cdn.stack0.dev/your-image.jpg"
      alt="Description"
      width={800}
      height={600}
    />
  )
}

With CDN Transforms

transforms-example.tsx

import { Image } from '@stack0/elements'
 
export function OptimizedImage() {
  return (
    <Image
      src="https://cdn.stack0.dev/your-image.jpg"
      alt="Optimized image"
      width={800}
      height={600}
      transforms={{
        format: "webp",      // Convert to WebP
        quality: 85,         // 85% quality
        fit: "cover",        // Cover fit mode
      }}
    />
  )
}

Props

Prop	Type	Description
src	string	Image source URL (required)
alt	string	Alt text for accessibility (required)
width	number	Image width in pixels (required unless fill)
height	number	Image height in pixels (required unless fill)
transforms	ImageTransformOptions	Stack0 CDN transformation options
loader	ImageLoader	Custom loader (overrides default Stack0 loader)
...props	NextImageProps	All other next/image props are supported

Transform Options

Option	Type	Description
format	"webp" \| "avif" \| "jpeg" \| "png" \| "gif"	Output format
quality	number (1-100)	Output quality percentage
fit	"cover" \| "contain" \| "fill" \| "inside" \| "outside"	Resize fit mode
blur	number (0.3-1000)	Blur amount
sharpen	number (0-10)	Sharpen amount
rotate	0 \| 90 \| 180 \| 270	Rotation angle
flipH / flipV	boolean	Flip horizontally / vertically
background	string (hex without #)	Background color for transparent images

Responsive Images

responsive-example.tsx

import { Image } from '@stack0/elements'
 
export function ResponsiveImage() {
  return (
    <Image
      src="https://cdn.stack0.dev/hero.jpg"
      alt="Hero image"
      fill
      sizes="(max-width: 768px) 100vw, (max-width: 1200px) 50vw, 33vw"
      transforms={{ format: "webp", quality: 80 }}
      className="object-cover"
    />
  )
}

Custom Loader

For advanced use cases, you can provide your own loader function:

custom-loader.tsx

import { Image } from '@stack0/elements'
 
// Custom loader for a different CDN
const myLoader = ({ src, width, quality }) => {
  return `https://my-cdn.com/${src}?w=${width}&q=${quality || 75}`
}
 
export function CustomLoaderExample() {
  return (
    <Image
      loader={myLoader}
      src="images/photo.jpg"
      alt="Custom loaded image"
      width={800}
      height={600}
    />
  )
}

Using the Loader Utility

You can also use the createStack0Loader function directly:

loader-utility.tsx

import { createStack0Loader } from '@stack0/elements'
import NextImage from 'next/image'
 
const loader = createStack0Loader({
  format: "webp",
  quality: 85,
})
 
export function DirectLoaderExample() {
  return (
    <NextImage
      loader={loader}
      src="https://cdn.stack0.dev/image.jpg"
      alt="Direct loader usage"
      width={800}
      height={600}
    />
  )
}

Image Gallery Image Processing SDK CDN SDK