SmallPict LogoSmallPict
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:npm install @smallpict/react
Pacchetto TSX

Esempio di Implementazione

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

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.

Leggi la Documentazione di 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.