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