Integrazione Ufficiale e SDK
Componente immagine reattivo con lazy loading e srcset adattivo
Un componente React leggero e performante che gestisce automaticamente risoluzioni responsive srcset, selezione del formato WebP/AVIF e segnaposto blur.
Installa:
Pacchetto TSXnpm install @smallpict/reactEsempio di Implementazione
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"
/>
);
}Passaggi di Integrazione
1Installa il Pacchetto
Installa @smallpict/react nel tuo progetto tramite npm o yarn.
2Configura il Provider
Avvolgi la tua app con SmallPictProvider indicando la tua chiave API.
3Renderizza il Componente Image
Sostituisci i tag img standard con il componente ottimizzato con supporto nativo a srcset.
Vantaggi Principali
- Generazione automatica di srcset per schermi ad alta risoluzione Retina
- Supporto integrato per segnaposto sfocati e transizioni fluide
- Meno di 2 KB di bundle senza librerie esterne pesanti
- Compatibile con Vite, Remix, Create React App e Gatsby
Documentazione Ufficiale per Sviluppatori
Hai bisogno di guide complete e specifiche API?
Esplora i riferimenti ai parametri, autenticazione e test locali nella nostra guida ufficiale per Componente React.
Accelera la pipeline di immagini Componente React
Ottimizzazione di immagini AVIF e WebP in meno di 50 ms nella tua applicazione. Nessun costo di configurazione.
