SmallPict LogoSmallPict
Offizielle Integration & SDK

Reaktive Bildkomponente mit Lazy-Loading und adaptivem srcset

Eine schlanke React-Komponente, die responsive srcset-Angaben, intelligente WebP/AVIF-Formatauswahl und sanfte Unschärfe-Platzhalter automatisch verwaltet.

Installieren:npm install @smallpict/react
TSX-Paket

Implementierungsbeispiel

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

Integrationsschritte

1Paket installieren

Installieren Sie @smallpict/react in Ihrem Projekt mit npm oder yarn.

2Provider einbinden

Ummanteln Sie Ihre Anwendung mit SmallPictProvider und übergeben Sie Ihren API-Schlüssel.

3Bildkomponenten rendern

Ersetzen Sie herkömmliche img-Tags durch die optimierte Komponente mit nativer srcset-Unterstützung.

Hauptvorteile

  • Automatische Generierung hochauflösender srcset-Varianten für Retina-Displays
  • Integrierte Unterstützung für Unschärfe-Platzhalter und sanfte Übergänge
  • Unter 2 KB Bundle-Größe ohne schwere externe Abhängigkeiten
  • Kompatibel mit Vite, Remix, Create React App und Gatsby
Offizielle Entwicklerdokumentation

Benötigen Sie vollständige Leitfäden & API-Spezifikationen?

Entdecken Sie Parameterreferenzen, Authentifizierung und Tests in unserem offiziellen React Komponente-Leitfaden.

React Komponente-Dokumentation lesen

Optimieren Sie Ihre React Komponente-Bild-Pipeline

Erleben Sie AVIF- und WebP-Bildoptimierung in unter 50 ms. Keine Einrichtungsgebühr, sofortige Sandbox-Schlüssel.