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

Ví dụ Triển khai

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

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.

Đọc Tài liệu 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.