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

Exemplo de Implementação

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

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.

Ler Docs de 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.