Integração Oficial e SDK
Componente de imagem reativo com lazy loading e srcset adaptativo
Um componente React moderno e superleve que gerencia atributos srcset responsivos, escolha inteligente de formato WebP/AVIF e placeholders borrados.
Instalar:
Pacote TSXnpm install @smallpict/reactExemplo de Implementação
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"
/>
);
}Etapas de Integração
1Instale o Módulo
Instale @smallpict/react no seu projeto usando npm ou yarn.
2Configure o Provedor
Envolva sua aplicação com SmallPictProvider informando sua chave de API.
3Renderize o Componente Image
Substitua tags img convencionais pelo componente otimizado com suporte nativo a srcset.
Principais Vantagens
- Geração automática de srcset para telas Retina e alta densidade
- Suporte embutido para placeholders desfocados e transições suaves
- Tamanho inferior a 2 KB sem dependências externas pesadas
- Compatível com Vite, Remix, Create React App e Gatsby
Documentação Oficial de Desenvolvedores
Precisa de guias completos e especificações da API?
Explore referências de parâmetros, autenticação e testes em nosso guia oficial para Componente React.
Acelere seu Pipeline de Imagens com Componente React
Experimente otimização AVIF e WebP em menos de 50ms na sua aplicação. Sem taxa de configuração, chaves sandbox imediatas.
