官方原生集成与 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
在应用根节点包裹 Provider 并配置 API 密钥及 CDN 域名。
33. 使用 SmallPictImage
使用 SmallPictImage 替换传统 img 标签以获得即时性能提升。
核心优势与收益
- 自动渲染带 AVIF/WebP/PNG 回退的 picture 标签
- 基于 IntersectionObserver 的原生懒加载
- 零布局抖动（Cumulative Layout Shift = 0）
- 体积超轻（Gzip 后小于 3KB）
官方开发者技术文档
需要完整的开发指南与 API 规范？
在官方 React 组件 SDK 开发者指南中查阅完整的参数参考、鉴权机制、错误码说明及本地调试教程。
全面加速您的 React 组件 SDK 图像管线
在您的应用中体验低于 50 毫秒的极速 AVIF 与 WebP 转换。零入网费，即刻获取沙箱 API Key，支持弹性扩展。