Официальная интеграция и SDK
Реактивный компонент изображений с отложенной загрузкой и адаптивным srcset
Легкий компонент React, который автоматически управляет адаптивными разрешениями srcset, интеллектуальным выбором WebP/AVIF и размытыми плейсхолдерами.
Установка:
Пакет TSXnpm install @smallpict/reactПример реализации
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"
/>
);
}Этапы интеграции
1Установите Модуль
Установите @smallpict/react в проект через npm или yarn.
2Настройте Провайдер
Оберните ваше приложение в SmallPictProvider с указанием ключа API.
3Внедрите Компонент Image
Замените стандартные теги img оптимизированным компонентом с нативной поддержкой srcset.
Ключевые преимущества
- Автоматическая генерация вариантов srcset для экранов Retina с высокой плотностью пикселей
- Встроенная поддержка размытых плейсхолдеров и плавных переходов
- Размер бандла менее 2 КБ без тяжелых сторонних библиотек
- Совместимость с Vite, Remix, Create React App и Gatsby
Официальная документация для разработчиков
Нужны полные руководства и спецификации API?
Узнайте о параметрах, аутентификации и локальном тестировании в нашем официальном руководстве по Компонент React.
Ускорьте пайплайн обработки изображений Компонент React
Оптимизация AVIF и WebP быстрее 50 мс в вашем приложении. Без платы за подключение, мгновенные ключи песочницы.
