SmallPict LogoSmallPict
Integración Oficial y SDK

Componente de imagen reactivo con carga diferida y srcset adaptativo

Un componente React ligero y de primera calidad que gestiona automáticamente srcset responsivos, selección de formato WebP/AVIF y placeholders borrosos.

Instalar:npm install @smallpict/react
Paquete TSX

Ejemplo de Implementación

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

Pasos de Integración

1Instala el Paquete

Instala @smallpict/react en tu proyecto usando npm o yarn.

2Configura el Proveedor

Envuelve tu aplicación o vista con SmallPictProvider indicando tu clave de API.

3Renderiza Componentes de Imagen

Reemplaza las etiquetas img estándar por el componente optimizado con soporte nativo de srcset.

Beneficios Principales

  • Generación automática de srcset para pantallas de alta densidad
  • Soporte integrado para placeholders blur y transiciones suaves
  • Menos de 2KB de peso en el paquete final sin dependencias pesadas
  • Compatible con Vite, Remix, Create React App y Gatsby
Documentación Oficial para Desarrolladores

¿Necesita guías completas y especificaciones de API?

Consulte parámetros, autenticación, códigos de error y pruebas locales en nuestra guía oficial de Componente React.

Leer Documentación de Componente React

Potencie el pipeline de imágenes de Componente React

Experimente optimización AVIF y WebP en menos de 50 ms. Sin costo de configuración, claves de sandbox instantáneas.