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

Przykład Implementacji

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

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.

Przeczytaj Dokumentację 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.