Oficjalna Integracja i SDK
Reaktywny komponent graficzny z leniwym ładowaniem i adaptacyjnym srcset
Lekki i wydajny komponent React, który automatycznie zarządza responsywnymi rozdzielczościami srcset, inteligentnym doborem formatu WebP/AVIF oraz płynnymi efektami rozmycia.
Instalacja:
Pakiet TSXnpm install @smallpict/reactPrzykład Implementacji
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"
/>
);
}Kroki Integracji
1Zainstaluj Moduł
Zainstaluj pakiet @smallpict/react w swoim projekcie przy użyciu npm lub yarn.
2Otocz Aplikację Dostawcą
Opakuj aplikację komponentem SmallPictProvider, przekazując swój klucz API.
3Renderuj Obrazy
Zastąp standardowe znaczniki img zoptymalizowanym komponentem z wbudowaną obsługą srcset.
Kluczowe Korzyści
- Automatyczne generowanie wariantów srcset dla ekranów Retina o wysokim DPI
- Wbudowana obsługa rozmytych placeholderów i płynnych przejść tonalnych
- Mniej niż 2 KB wagi końcowej paczki bez ciężkich zależności zewnętrznych
- Kompatybilny z Vite, Remix, Create React App oraz Gatsby
Oficjalna Dokumentacja Programistyczna
Potrzebujesz pełnych przewodników i specyfikacji API?
Sprawdź parametry, uwierzytelnianie i testowanie lokalne w naszym oficjalnym przewodniku po Komponent React.
Przyspiesz Potok Obrazów w Komponent React
Optymalizacja obrazów AVIF i WebP poniżej 50 ms w Twojej aplikacji. Zero opłat wstępnych, natychmiastowe klucze sandbox.
