SmallPict LogoSmallPict
Resmi Entegrasyon & SDK

Tembel yükleme ve uyarlanabilir srcset özellikli reaktif görsel bileşeni

Duyarlı srcset çözünürlüklerini, akıllı WebP/AVIF format seçimini ve yumuşak bulanık yer tutucuları otomatik yöneten hafif React bileşeni.

Yükle:npm install @smallpict/react
TSX Paketi

Uygulama Örneği

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

Entegrasyon Adımları

1Paketi Ekleyin

npm veya yarn ile @smallpict/react paketini projenize kurun.

2Sağlayıcıyı Yapılandırın

Uygulamanızı API anahtarınızı belirterek SmallPictProvider ile sarmalayın.

3Görsel Bileşenini Render Edin

Standart img etiketlerini yerel srcset desteğine sahip optimize edilmiş bileşenle değiştirin.

Önemli Avantajlar

  • Yüksek piksel yoğunluklu Retina ekranlar için otomatik srcset üretimi
  • Bulanık yer tutucular ve yumuşak geçiş efektleri için dahili destek
  • Ağır dış bağımlılıklar olmadan 2 KB'ın altında nihai paket boyutu
  • Vite, Remix, Create React App ve Gatsby ile sorunsuz çalışma
Resmi Geliştirici Belgeleri

Eksiksiz uygulama kılavuzları ve API özelliklerine mi ihtiyacınız var?

Resmi React Bileşeni geliştirici kılavuzumuzda parametre referanslarını, kimlik doğrulamayı ve yerel testleri inceleyin.

React Bileşeni Belgelerini Oku

React Bileşeni Görsel İşleme Sürecinizi Hızlandırın

Uygulamanızda 50 ms altı AVIF ve WebP optimizasyonunu deneyimleyin. Kurulum ücreti yok, anında sandbox anahtarları.