Tích hợp & SDK Chính thức
Thành phần hình ảnh đáp ứng hiện đại cho các ứng dụng React
Tích hợp chuyển đổi hình ảnh động, hình giữ chỗ làm mờ và định hướng hình ảnh vào SPA và các framework React (Vite, Remix, Gatsby, Astro).
Cài đặt:
Gói TSXnpm install @smallpict/reactVí dụ Triển khai
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"
/>
);
}Các bước Tích hợp
11. Cài đặt gói
Chạy npm install @smallpict/react trong dự án React của bạn.
22. Cấu hình SmallPictProvider
Bọc gốc ứng dụng của bạn với API Key và tên miền CDN.
33. Sử dụng SmallPictImage
Thay thế thẻ img gốc bằng SmallPictImage để tăng hiệu suất ngay lập tức.
Lợi ích Chính
- Tự động tạo thẻ picture với dự phòng AVIF/WebP/PNG
- Tải chậm tích hợp sẵn dựa trên IntersectionObserver
- Không dịch chuyển bố cục (Cumulative Layout Shift = 0)
- Gói cài đặt siêu nhẹ (< 3KB gzipped)
Tài liệu Nhà phát triển Chính thức
Cần hướng dẫn triển khai đầy đủ và thông số API?
Tìm hiểu tài liệu tham khảo thông số, cơ chế xác thực và hướng dẫn kiểm thử trong tài liệu chính thức cho SDK Thành phần React.
Tăng tốc Quy trình Xử lý Ảnh SDK Thành phần React của Bạn
Trải nghiệm tối ưu hóa ảnh AVIF và WebP dưới 50ms trong ứng dụng của bạn. Không phí thiết lập, cấp khóa sandbox ngay lập tức.
