Blinkloader

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

Возможности

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

Установка

NPM

npm install @a-it/imgproxy-blinkloader

Yarn

yarn add @a-it/imgproxy-blinkloader

PNPM

pnpm add @a-it/imgproxy-blinkloader

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

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

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

Базовое использование

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

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

HTML реализация

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

<!-- Базовое использование -->
<img imgproxy-src="https://example.com/image.jpg" />

<!-- С указанием размеров -->
<img 
  imgproxy-src="https://example.com/image.jpg" 
  imgproxy-width="800" 
  imgproxy-height="600" 
/>

<!-- Фоновое изображение на div -->
<div 
  imgproxy-src="https://example.com/image.jpg" 
  imgproxy-width="1200" 
  imgproxy-height="800"
>
</div>

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

| Опция | Тип | По умолчанию | Описание | |--------|------|---------|-------------| | 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:

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:

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