SmallPict LogoSmallPict
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:npm install @smallpict/react
TSX Package

Implementation Example

tsx
import { 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.

Read React Component SDK Docs

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.