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:
TSX Paketinpm install @smallpict/reactUygulama Örneği
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"
/>
);
}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 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ı.
