Official Integration & SDK
Modern Responsive Image Component for React Apps
Integrate dynamic image transformations, blur-up placeholders, and art direction into Single Page Apps and React frameworks (Vite, Remix, Gatsby, Astro).
Install:
TSX Packagenpm install @smallpict/reactImplementation Example
tsximport { SmallPictImage } from '@smallpict/react';
export function ProductHero() {
return (
<SmallPictImage
src="https://my-bucket.s3.amazonaws.com/camera.jpg"
alt="Pro Mirrorless Camera"
width={800}
height={500}
format="auto" // Auto-selects AVIF or WebP based on browser support
quality={85}
placeholder="blur"
className="rounded-2xl shadow-xl"
/>
);
}Integration Steps
11. Install package
Run npm install @smallpict/react in your React project.
22. Configure SmallPictProvider
Wrap your application root with your API Key / CDN domain.
33. Drop in SmallPictImage
Replace raw img tags with SmallPictImage for instant performance gains.
Key Benefits
- Automatic picture tag with AVIF/WebP/PNG fallbacks
- Built-in IntersectionObserver lazy loading
- Zero layout shift (Cumulative Layout Shift = 0)
- Ultra-lightweight bundle (< 3KB gzipped)
Official Developer Documentation
Need Complete Implementation Guides & API Specs?
Explore parameter references, authentication mechanisms, error codes, and local testing instructions in our official React Component SDK developer guide.
Supercharge Your React Component SDK Image Pipeline
Experience sub-50ms AVIF and WebP image optimization in your application. Zero setup fee, instant sandbox keys, and unlimited scalability.
