Blinkloader

Легкая, высокопроизводительная библиотека оптимизации изображений для современных веб-приложений.

Возможности

- Автоматическая оптимизация изображений: Трансформирует и оптимизирует изображения на лету
- Ленивая загрузка: Загружает изображения только когда они попадают в область видимости
- Адаптивные изображения: Автоматически адаптирует изображения под размер экрана и плотность пикселей устройства
- Поддержка WebP: Обслуживает формат WebP для поддерживаемых браузеров для лучшего сжатия
- Поддержка Retina дисплеев: Доставляет изображения высокого разрешения на Retina-дисплеи
- Плавные переходы: Опциональный эффект появления для лучшего пользовательского опыта
- Пакетная обработка: Эффективно обрабатывает изображения в пакетах для повышения производительности

Установка

$3

``bash
npm install @a-it/imgproxy-blinkloader
`

$3

`bash
yarn add @a-it/imgproxy-blinkloader
`

$3

`bash
pnpm add @a-it/imgproxy-blinkloader
`

Совместимость

Важно: Blinkloader совместим только с imgproxy - быстрым и безопасным сервером для изменения размеров и конвертации изображений. Для работы с Blinkloader необходимо настроить доступ к серверу imgproxy.

Быстрый старт

$3

`typescript
import { Blinkloader } from '@a-it/imgproxy-blinkloader';

// Инициализация Blinkloader с конфигурацией
const blinkloader = new Blinkloader({
cdnBase: 'https://your-imgproxy-url.com',
// Дополнительные опции...
});
`

$3

Добавьте атрибут imgproxy-src к вашим изображениям:

`html




imgproxy-src="https://example.com/image.jpg"
imgproxy-width="800"
imgproxy-height="600"
/>





`

Параметры конфигурации

| Опция | Тип | По умолчанию | Описание |
|--------|------|---------|-------------|
| cdnBase | string | 'https://cdn.a-it.org' | Базовый URL для сервера imgproxy. Должен указывать на корректно настроенный экземпляр imgproxy |
| lazyload | boolean | true | Включить ленивую загрузку изображений |
| batchSize | number | 5 | Количество изображений для обработки в каждом пакете |
| batchInterval | number | 250 | Временной интервал (мс) между пакетами |
| responsive | boolean | true | Включить адаптивное изменение размера изображений |
| webp | boolean | true | Обслуживать WebP изображения для поддерживаемых браузеров |
| retina | boolean | true | Удваивать размеры изображений для Retina-дисплеев |
| fadeIn | boolean | false | Включить эффект появления при загрузке изображений |

Атрибуты изображений

| Атрибут | Описание |
|-----------|-------------|
| imgproxy-src | URL-адрес исходного изображения |
| imgproxy-width | Целевая ширина изображения |
| imgproxy-height | Целевая высота изображения |
| imgproxy-quality | Качество изображения (1-100) |
| imgproxy-format | Выходной формат (jpeg, png, webp) |
| imgproxy-resize | Метод изменения размера (fit, fill, auto) |
| imgproxy-gravity | Гравитация для обрезки изображения (no, so, ea, we, ce, sm) |
| imgproxy-enlarge | Разрешить увеличение изображения (булевый атрибут) |
| imgproxy-extend | Расширить изображение до заданных размеров (булевый атрибут) |

Интеграция с imgproxy

Для работы с Blinkloader необходимо установить и настроить сервер imgproxy. Ниже приведен пример запуска imgproxy с помощью Docker:

`bash
docker run -p 8080:8080 \
-e IMGPROXY_ENABLE_WEBP=true \
-e IMGPROXY_ENABLE_CLIENT_HINTS=true \
-e IMGPROXY_JPEG_PROGRESSIVE=true \
-e IMGPROXY_USE_ETAG=true \
darthsim/imgproxy:latest
`

После запуска сервера imgproxy, вы можете настроить Blinkloader, указав URL сервера в параметре cdnBase:

`typescript
const blinkloader = new Blinkloader({
cdnBase: 'http://localhost:8080',
retina: true,
webp: true
});
`

Более подробную информацию о настройке и использовании imgproxy вы можете найти в официальной документации.

Поддержка браузеров

- Chrome: 49+
- Firefox: 52+
- Safari: 10+
- Edge: 16+
- Opera: 36+
- iOS Safari: 10+
- Android Browser: 67+

Соображения по производительности

- Используйте подходящие размеры изображений, чтобы избежать ненужной обработки
- Включите пакетную обработку для страниц с множеством изображений
- Рассмотрите возможность отключения поддержки Retina для сценариев с низкой пропускной способностью
- По возможности используйте формат WebP для лучшего сжатия

Участие в разработке

Вклады приветствуются! Пожалуйста, не стесняйтесь отправлять запросы на внесение изменений.

1. Сделайте форк репозитория
2. Создайте ветку для новой функции (git checkout -b feature/amazing-feature)
3. Зафиксируйте ваши изменения (git commit -m 'Add some amazing feature')
4. Отправьте изменения в ветку (git push origin feature/amazing-feature`)
5. Откройте Pull Request