Officiƫle Integratie & SDK
Responsief afbeeldingscomponent met lazy loading en adaptieve srcset
Een gestroomlijnd React-component dat responsieve srcset-resoluties, slimme WebP/AVIF-formaatselectie en vloeiende wazige placeholders automatisch beheert.
Installeren:
TSX Pakketnpm install @smallpict/reactImplementatievoorbeeld
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"
/>
);
}Integratiestappen
1Installeer het Pakket
Installeer @smallpict/react in uw project via npm of yarn.
2Stel de Provider in
Wikkel uw applicatie in met SmallPictProvider en geef uw API-sleutel mee.
3Plaats het Afbeeldingscomponent
Vervang traditionele img-tags door het geoptimaliseerde component met ingebouwde srcset-ondersteuning.
Belangrijkste Voordelen
- Automatische generatie van srcset voor Retina-schermen met hoge dichtheid
- Ingebouwde ondersteuning voor blur-placeholders en zachte overgangen
- Minder dan 2 KB bundelgrootte zonder zware externe bibliotheken
- Compatibel met Vite, Remix, Create React App en Gatsby
Officiƫle Ontwikkelaarsdocumentatie
Complete handleidingen en API-specificaties nodig?
Ontdek parameterreferenties, authenticatie en lokaal testen in onze officiƫle React Component-handleiding.
Geef je React Component Beeld-pipeline een Boost
Ervaar AVIF- en WebP-optimalisatie in minder dan 50 ms. Geen installatiekosten, directe sandbox-sleutels.
