공식 연동 및 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 최적화를 경험하세요. 설치 비용 없이 샌드박스 키를 즉시 발급합니다.
