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

Implementatievoorbeeld

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

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.

Lees React Component Documentatie

Geef je React Component Beeld-pipeline een Boost

Ervaar AVIF- en WebP-optimalisatie in minder dan 50 ms. Geen installatiekosten, directe sandbox-sleutels.