React Component Library

Image Optimization Made Simple

Drop-in React component for automatic WebP/AVIF conversion, resizing, and CDN delivery.

54,251+
Total Downloads
Growing fast
5,161+
Monthly Downloads
Last 30 days
v1.0.0
Latest Version
Stable release
npm install staticdelivrView Documentation

Get Started in 2 Minutes

Install the package and start optimizing images immediately.

Installation

bash
npm install staticdelivr

Or with yarn: yarn add staticdelivr

Basic Usage

jsx
import { StaticDelivrImage } from 'staticdelivr';

<StaticDelivrImage
  src="https://example.com/image.jpg"
  width={800}
  height={600}
  quality={80}
  format="webp"
  alt="Optimized image"
/>
Features

Everything You Need for Perfect Images

Powerful image optimization without the complexity.

Automatic Optimization

Convert images to WebP/AVIF automatically. Resize, compress, and deliver the optimal format for each browser.

Learn more

Drop-in Replacement

Replace <img> or Next.js <Image> components seamlessly. Same API, better performance.

Get started
import { StaticDelivrImage }
from 'staticdelivr';

TypeScript Ready

Full TypeScript support with proper types for all props and configurations.

View types

Framework Agnostic

Works with React, Next.js, Vite, or any modern React-based framework.

See examples

Ready to Optimize Your Images?

Join 54K+ developers already using StaticDelivrImage for better performance and user experience.

Install NowRead the Docs