Реалізація 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:

// 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.