SmallPict LogoSmallPict
公式インテグレーション&SDK

React アプリのためのモダンなレスポンシブ画像コンポーネント

SPA や React フレームワーク(Vite、Remix、Gatsby、Astro)に動的画像変換、ぼかしプレースホルダー、アートディレクション機能を簡単に統合。

インストール:npm install @smallpict/react
TSX パッケージ

実装コード例

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"
    />
  );
}

連携ステップ

11. パッケージのインストール

React プロジェクトで npm install @smallpict/react を実行します。

22. SmallPictProvider の設定

アプリのルートを API キーと CDN ドメインでラップします。

33. SmallPictImage の配置

通常の img タグを SmallPictImage に置き換えてパフォーマンスを向上させます。

主なメリット

  • AVIF/WebP/PNG フォールバックを備えた自動 picture レンダリング
  • IntersectionObserver による組み込み遅延読み込み
  • レイアウトシフトの完全排除(CLS = 0)
  • 超軽量バンドルサイズ(Gzip 後 3KB 未満)
公式開発者ドキュメント

完全な実装ガイドと API 仕様をお探しですか?

公式 React コンポーネント SDK 開発者ガイドで、パラメータ仕様、認証、エラーコード、ローカル検証手順をご確認いただけます。

React コンポーネント SDK ドキュメントを読む

React コンポーネント SDK の画像パイプラインを最大化

アプリケーションで 50ms 未満の高速 AVIF / WebP 配信を実現。初期費用なし、即時利用可能なサンドボックスキーを提供。