SmallPict LogoSmallPict
Официальная интеграция и SDK

Реактивный компонент изображений с отложенной загрузкой и адаптивным srcset

Легкий компонент React, который автоматически управляет адаптивными разрешениями srcset, интеллектуальным выбором WebP/AVIF и размытыми плейсхолдерами.

Установка:npm install @smallpict/react
Пакет TSX

Пример реализации

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

Этапы интеграции

1Установите Модуль

Установите @smallpict/react в проект через npm или yarn.

2Настройте Провайдер

Оберните ваше приложение в SmallPictProvider с указанием ключа API.

3Внедрите Компонент Image

Замените стандартные теги img оптимизированным компонентом с нативной поддержкой srcset.

Ключевые преимущества

  • Автоматическая генерация вариантов srcset для экранов Retina с высокой плотностью пикселей
  • Встроенная поддержка размытых плейсхолдеров и плавных переходов
  • Размер бандла менее 2 КБ без тяжелых сторонних библиотек
  • Совместимость с Vite, Remix, Create React App и Gatsby
Официальная документация для разработчиков

Нужны полные руководства и спецификации API?

Узнайте о параметрах, аутентификации и локальном тестировании в нашем официальном руководстве по Компонент React.

Документация Компонент React

Ускорьте пайплайн обработки изображений Компонент React

Оптимизация AVIF и WebP быстрее 50 мс в вашем приложении. Без платы за подключение, мгновенные ключи песочницы.