Реализация Image CDN (Imgix/Cloudinary) для оптимизации изображений

Настройка Image CDN: imgix и Cloudinary

Image CDN автоматически оптимизирует изображения: конвертирует в WebP/AVIF, изменяет размер под устройство, сжимает без потери качества — и всё это через URL-параметры без изменения оригинала.

imgix: настройка и использование

# imgix работает поверх вашего S3/хранилища
# Настраиваете Source в dashboard.imgix.com:
# Type: Amazon S3
# S3 Bucket: my-bucket
# S3 Key ID / Secret Key
# Base URL: https://mysite.imgix.net

// TypeScript: imgix URL builder
import ImgixClient from '@imgix/js-core';

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

// Базовая трансформация
const url = client.buildURL('/products/shoe.jpg', {
  w: 800,           // ширина
  h: 600,           // высота
  fit: 'crop',      // crop | fill | scale | clip | max | min
  crop: 'faces,entropy', // умная обрезка
  auto: 'format,compress', // auto WebP/AVIF + сжатие
  q: 80,            // качество
  dpr: 2,           // device pixel ratio
});
// → https://mysite.imgix.net/products/shoe.jpg?w=800&h=600&fit=crop&auto=format%2Ccompress&q=80&dpr=2&s={signature}

Next.js Integration:

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

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

const client = new ImgixClient({ domain: 'mysite.imgix.net' });

export default function imgixLoader({
  src,
  width,
  quality,
}: {
  src: string;
  width: number;
  quality?: number;
}) {
  return client.buildURL(src, {
    w: width,
    auto: 'format,compress',
    q: quality ?? 75,
    fit: 'max',
  });
}

// Использование — стандартный next/image с автоматическим imgix
<Image
  src="/products/shoe.jpg"
  width={800}
  height={600}
  alt="Running shoe"
  sizes="(max-width: 768px) 100vw, 50vw"
/>

Cloudinary: настройка

npm install next-cloudinary

// next.config.ts
const nextConfig = {
  images: {
    remotePatterns: [
      {
        protocol: 'https',
        hostname: 'res.cloudinary.com',
        pathname: `/${process.env.CLOUDINARY_CLOUD_NAME}/**`,
      },
    ],
  },
};

// Компоненты next-cloudinary
import { CldImage, CldUploadWidget } from 'next-cloudinary';

// Оптимизированное изображение
<CldImage
  src="products/shoe"           // public_id в Cloudinary
  width={800}
  height={600}
  alt="Running shoe"
  crop="fill"
  gravity="auto"                // умное кадрирование
  format="auto"                 // auto WebP/AVIF
  quality="auto"
  sizes="(max-width: 768px) 100vw, 50vw"
/>

// Трансформации
<CldImage
  src="hero/banner"
  width={1200}
  height={400}
  alt="Hero"
  overlays={[{
    text: {
      color: 'white',
      fontFamily: 'Arial',
      fontSize: 40,
      fontWeight: 'bold',
      text: 'Sale 50% Off',
    },
    position: { gravity: 'south', y: 40 },
  }]}
/>

// Upload Widget
<CldUploadWidget
  uploadPreset="unsigned_preset"
  onUpload={({ info }) => {
    console.log('Uploaded:', info.public_id);
    setImageId(info.public_id);
  }}
>
  {({ open }) => <button onClick={() => open()}>Загрузить фото</button>}
</CldUploadWidget>

Сравнение imgix vs Cloudinary

Cloudflare Images: бюджетная альтернатива

# Upload
curl -X POST "https://api.cloudflare.com/client/v4/accounts/{account_id}/images/v1" \
  -H "Authorization: Bearer {token}" \
  -F [email protected] \
  -F metadata='{"productId":"123"}'

# Delivery URL
https://imagedelivery.net/{account_hash}/{image_id}/public
https://imagedelivery.net/{account_hash}/{image_id}/thumbnail  # вариант
https://imagedelivery.net/{account_hash}/{image_id}/w=800,h=600,fit=scale-down

Стоимость: $5/месяц за 100,000 изображений (значительно дешевле Cloudinary).

Responsive Images: srcset

<!-- Автоматически генерированный srcset через imgix -->
<img
  src="https://mysite.imgix.net/hero.jpg?w=800&auto=format"
  srcset="
    https://mysite.imgix.net/hero.jpg?w=400&auto=format 400w,
    https://mysite.imgix.net/hero.jpg?w=800&auto=format 800w,
    https://mysite.imgix.net/hero.jpg?w=1200&auto=format 1200w,
    https://mysite.imgix.net/hero.jpg?w=1600&auto=format 1600w
  "
  sizes="(max-width: 768px) 100vw, 1200px"
  alt="Hero image"
  loading="lazy"
/>

Настройка imgix или Cloudinary с интеграцией в Next.js — 1–2 рабочих дня. Включая конфигурацию loader, responsive images и upload widget.