Интеграция Imgix для обработки изображений на лету

Интеграция imgix для обработки изображений

imgix — прокси-CDN для изображений: хранит оригиналы в вашем S3, трансформирует через URL-параметры и раздаёт через глобальную CDN-сеть.

Подключение источника

# В dashboard.imgix.com:
# Sources → Add Source → Amazon S3
# S3 Bucket Name: my-assets-bucket
# Access Key ID + Secret Access Key (IAM пользователь с read-only на bucket)
# Subdomain: mysite.imgix.net

IAM Policy для imgix:

{
  "Version": "2012-10-17",
  "Statement": [{
    "Effect": "Allow",
    "Action": ["s3:GetObject", "s3:ListBucket"],
    "Resource": [
      "arn:aws:s3:::my-assets-bucket",
      "arn:aws:s3:::my-assets-bucket/*"
    ]
  }]
}

Параметры трансформации

Изменение размера:
?w=800                      ширина 800px (высота пропорционально)
?w=800&h=600                800×600
?w=800&h=600&fit=crop       обрезать по центру
?w=800&h=600&fit=fill       заполнить с полями
?w=800&h=600&fit=max        вписать, не увеличивая
?ar=16:9&w=800              aspect ratio + ширина

Форматы и качество:
?auto=format                WebP для Chrome/FF, AVIF если поддерживается
?auto=compress              автосжатие
?auto=format,compress       оба (рекомендуется)
?q=75                       качество 75% (0–100)
?fm=webp                    принудительно WebP
?fm=avif                    принудительно AVIF

Умная обрезка:
?fit=crop&crop=faces        распознавание лиц
?fit=crop&crop=entropy      максимальная информативность
?fit=crop&crop=focal        по фокальной точке (из метаданных)

Цвет и эффекты:
?sat=-100                   чёрно-белое
?blur=20                    размытие
?sharp=50                   резкость
?exp=-5                     экспозиция
?hue=120                    сдвиг цвета

Водяной знак:
?mark=https://mysite.imgix.net/watermark.png&markw=20&markpad=10&markalign=bottom,right

TypeScript SDK

// npm install @imgix/js-core
import ImgixClient from '@imgix/js-core';

const client = new ImgixClient({
  domain: 'mysite.imgix.net',
  secureURLToken: process.env.IMGIX_SECURE_TOKEN, // Для подписи URL
  useHTTPS: true,
});

// Генерация URL
const url = client.buildURL('products/shirt-red.jpg', {
  w: 600,
  h: 600,
  fit: 'crop',
  auto: 'format,compress',
  q: 80,
});

// srcset для responsive images
const srcSet = client.buildSrcSet('products/shirt-red.jpg', {
  auto: 'format,compress',
  fit: 'max',
}, {
  widths: [320, 480, 640, 800, 1080, 1200, 1600],
});
// → "...?w=320... 320w, ...?w=480... 480w, ..."

Next.js: кастомный loader

// lib/imgix-loader.ts
import ImgixClient from '@imgix/js-core';

const client = new ImgixClient({
  domain: process.env.NEXT_PUBLIC_IMGIX_DOMAIN!,
  secureURLToken: process.env.IMGIX_SECURE_TOKEN,
});

export default function imgixLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}): string {
  // src может быть полным S3 путём или относительным
  const path = src.startsWith('http')
    ? new URL(src).pathname
    : src;

  return client.buildURL(path, {
    w: width,
    auto: 'format,compress',
    q: quality ?? 75,
    fit: 'max',
  });
}

// next.config.ts
const nextConfig = {
  images: {
    loader: 'custom',
    loaderFile: './lib/imgix-loader.ts',
  },
};

// Использование — стандартный next/image
import Image from 'next/image';

<Image
  src="/products/shirt-red.jpg"
  alt="Red shirt"
  width={600}
  height={600}
  sizes="(max-width: 640px) 100vw, (max-width: 1024px) 50vw, 33vw"
  priority={isAboveFold}
/>

Защищённые URL (Signed URLs)

Для приватных изображений — подпись через secureURLToken:

const client = new ImgixClient({
  domain: 'private.imgix.net',
  secureURLToken: process.env.IMGIX_SECURE_TOKEN!,
});

// URL автоматически подписывается
const url = client.buildURL('/private/document-preview.jpg', {
  w: 400,
  h: 300,
  fit: 'clip',
});
// → https://private.imgix.net/private/document-preview.jpg?w=400&h=300&s={hmac-signature}

// Без правильной подписи imgix вернёт 403

Оптимизация производительности

<!-- Preload критических изображений (LCP) -->
<link
  rel="preload"
  as="image"
  href="https://mysite.imgix.net/hero.jpg?w=1200&auto=format&q=80"
  imagesrcset="
    https://mysite.imgix.net/hero.jpg?w=600&auto=format&q=80 600w,
    https://mysite.imgix.net/hero.jpg?w=1200&auto=format&q=80 1200w,
    https://mysite.imgix.net/hero.jpg?w=1800&auto=format&q=80 1800w
  "
  imagesizes="100vw"
/>

Интеграция imgix в Next.js с loader, srcset и signed URLs — 1 рабочий день.