@a-it/imgproxy-blinkloader v0.0.5

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>

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

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

Интеграция с 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