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:
TSX-Paketnpm install @smallpict/reactImplementierungsbeispiel
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"
/>
);
}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.
Optimieren Sie Ihre React Komponente-Bild-Pipeline
Erleben Sie AVIF- und WebP-Bildoptimierung in unter 50 ms. Keine Einrichtungsgebühr, sofortige Sandbox-Schlüssel.
