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:
Paket TSXnpm install @smallpict/reactContoh Implementasi
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"
/>
);
}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.
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.
