SmallPict LogoSmallPict
Integrasi & SDK Resmi

Komponen Gambar Responsif Modern untuk Aplikasi React

Integrasikan transformasi gambar dinamis, placeholder blur-up, dan art direction ke dalam Single Page Apps dan framework React (Vite, Remix, Gatsby, Astro).

Instal:npm install @smallpict/react
Paket TSX

Contoh Implementasi

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

Langkah Integrasi

11. Pasang paket

Jalankan npm install @smallpict/react di proyek React Anda.

22. Konfigurasikan SmallPictProvider

Bungkus root aplikasi Anda dengan API Key / domain CDN Anda.

33. Pasang SmallPictImage

Ganti tag img standar dengan SmallPictImage untuk peningkatan performa instan.

Manfaat Utama

  • Tag picture otomatis dengan fallback AVIF/WebP/PNG
  • Lazy loading bawaan berbasis IntersectionObserver
  • Nol pergeseran tata letak (Cumulative Layout Shift = 0)
  • Ukuran bundle sangat ringan (< 3KB gzipped)
Dokumentasi Developer Resmi

Butuh Panduan Implementasi Lengkap & Spesifikasi API?

Pelajari referensi parameter, mekanisme autentikasi, kode error, dan instruksi pengujian lokal di panduan developer resmi SDK Komponen React.

Baca Dokumen SDK Komponen React

Tingkatkan Pipeline Gambar SDK Komponen React Anda

Rasakan optimasi gambar AVIF dan WebP di bawah 50ms di aplikasi Anda. Tanpa biaya setup, sandbox API key instan, dan skalabilitas tanpa batas.