Intégration et SDK Officiels

Composant d'image réactif avec chargement différé et srcset adaptatif

Un composant React moderne et ultra-léger qui gère automatiquement les résolutions srcset, le choix intelligent du format WebP/AVIF et les effets de flou progressif.

Démarrer avec Composant React Docs Techniques et Guide SDK

Installer:npm install @smallpict/react

Package TSX

Exemple d'Implémentation

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

Étapes d'Intégration

1Installez le Module

Installez @smallpict/react dans votre projet avec npm ou yarn.

2Configurez le Provider

Entourez votre application avec SmallPictProvider en transmettant votre clé API.

3Intégrez les Composants Image

Remplacez vos balises img par le composant optimisé gérant les densités d'écran automatiquement.

Avantages Clés

Génération automatique de srcset pour écrans Retina et haute densité
Prise en charge intégrée d'espaces réservés flous et transitions douces
Poids plume inférieur à 2 Ko sans dépendances tierces lourdes
Compatible avec Vite, Remix, Create React App et Gatsby

Documentation Développeur Officielle

Besoin des guides complets et des spécifications API ?

Consultez la référence des paramètres, l'authentification et les tests locaux dans notre guide officiel Composant React.

Lire la Documentation Composant React

Boostez votre pipeline d'images Composant React

Optimisation AVIF et WebP en moins de 50 ms dans votre application. Sans frais d'installation, clés sandbox instantanées.

Obtenir les Clés API Gratuites Essayer le Convertisseur Web