公式インテグレーション&SDK
React アプリのためのモダンなレスポンシブ画像コンポーネント
SPA や React フレームワーク(Vite、Remix、Gatsby、Astro)に動的画像変換、ぼかしプレースホルダー、アートディレクション機能を簡単に統合。
インストール:
TSX パッケージnpm install @smallpict/react実装コード例
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"
/>
);
}連携ステップ
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 の画像パイプラインを最大化
アプリケーションで 50ms 未満の高速 AVIF / WebP 配信を実現。初期費用なし、即時利用可能なサンドボックスキーを提供。
