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:
Paquete TSXnpm install @smallpict/reactEjemplo de Implementación
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"
/>
);
}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.
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.
