Налаштування Image CDN (Imgix/Cloudinary) для оптимізації зображень

Налаштування Image CDN: Imgix і Cloudinary

Один із наших клієнтів зіткнувся з LCP 4.2 секунди на мобільних пристроях. Основна причина — неоптимізовані зображення розміром 10 МБ. Після інтеграції Image CDN LCP впав до 1.1 секунди, а щомісячний трафік знизився на 70%. Така ситуація типова для багатьох проєктів: важкі картинки — головний ворог Core Web Vitals. Image CDN вирішує це автоматично: конвертує в WebP/AVIF, підганяє розмір під екран, стискає без втрати якості. Усе через URL-параметри, без зміни оригіналів. Ми реалізували подібні рішення для 20+ проєктів на Next.js та Vue. Економія трафіку сягає 70%, а LPC прискорюється в 3-4 рази.

Як Image CDN пришвидшує Core Web Vitals?

Image CDN напряму впливає на LCP — один із ключових Core Web Vitals. Автоматична конвертація в сучасні формати зменшує розмір зображень на 60-90% без втрати якості. Розумне кадрування та адаптивні srcset генерують зображення точно під розмір вікна браузера, включаючи Retina-дисплеї. Це знижує CLS завдяки явному вказуванню розмірів, а TTFB покращується завдяки доставці з найближчого edge-сервера. У підсумку сторінки проходять аудит Lighthouse із зеленими показниками.

Проблеми, які вирішуємо

• Повільне завантаження першої сторінки. LCP зашкалює через 5-мегабайтні JPEG. Image CDN автоматично зменшує розмір і вибирає оптимальний формат.
• Висока вартість трафіку. Кожен зайвий мегабайт коштує грошей. Стиснення WebP/AVIF економить до 70% трафіку без помітної втрати якості.
• Несумісність із Retina-дисплеями. Одне зображення для всіх DPR — розмите на 2x пікселя. CDN генерує srcset із потрібними роздільностями.

Як ми це робимо: стек і конфіги

Налаштування 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, }); const url = client.buildURL('/products/shoe.jpg', { w: 800, h: 600, fit: 'crop', crop: 'faces,entropy', auto: 'format,compress', q: 80, dpr: 2, }); 

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 }) { return client.buildURL(src, { w: width, auto: 'format,compress', q: quality ?? 75, fit: 'max', }); } 

Налаштування Cloudinary

// Компоненти next-cloudinary import { CldImage, CldUploadWidget } from 'next-cloudinary'; <CldImage src="products/shoe" width={800} height={600} alt="Running shoe" crop="fill" gravity="auto" format="auto" quality="auto" sizes="(max-width: 768px) 100vw, 50vw" /> <CldUploadWidget uploadPreset="unsigned_preset" onUpload={({ info }) => { console.log('Uploaded:', info.public_id); setImageId(info.public_id); }} > {({ open }) => <button onClick={() => open()}>Завантажити фото</button>} </CldUploadWidget> 

Як вибрати між imgix і Cloudinary?

Cloudinary AI-кадрування приблизно на 20% точніше imgix у визначенні облич, але imgix обробляє зображення в середньому на 10% швидше. Додаткова таблиця:

Процес роботи

1. Аналітика. Перевіряємо поточні метрики LCP, обсяг трафіку, формати.
2. Вибір CDN. Визначаємо, imgix чи Cloudinary, під ваш хостинг і бюджет.
3. Налаштування джерела. Створюємо Source в imgix або акаунт Cloudinary, підключаємо сховище.
4. Реалізація loader. Пишемо кастомний завантажувач для Next.js або Vue.
5. Адаптивна верстка. Налаштовуємо srcset, sizes, lazy loading.
6. Тестування. Перевіряємо LCP, CLS, якість зображень у різних браузерах.
7. Деплой, документація. Передаємо доступи та інструкцію.

Що входить в інтеграцію Image CDN?

• Налаштування акаунта та джерела CDN
• Інтеграція кастомного loader для next/image
• Конфігурація responsive images (srcset, sizes)
• Впровадження lazy loading та атрибутів loading="lazy"
• Оптимізація форматів: WebP, AVIF
• Документація та навчання команди
• Гарантія стабільної роботи після запуску

Терміни та вартість

Інтеграція одного CDN — від 1 до 3 робочих днів. Вартість розраховується індивідуально залежно від обсягу зображень і складності кастомних трансформацій. Економія на трафіку окупає інтеграцію протягом 2-3 місяців.

Типові помилки при самостійному налаштуванні

• Не налаштований secureURLToken для imgix. Зображення стануть доступні будь-кому, хто знає URL.
• Забутий domain у nextConfig.images.domains. Next.js блокує зовнішні домени.
• Неправильний fit. Використовуйте fit=max для уникнення спотворень.
• Відсутній auto=format. Користувачі старих браузерів отримають AVIF замість fallback.

Переваги професійного налаштування

Ми використовуємо офіційну документацію imgix і Cloudinary для всіх проєктів. Наш досвід — понад 20 успішних кейсів з оптимізації зображень. Замовте інтеграцію вже сьогодні — отримайте консультацію та попередній розрахунок.

Зв'яжіться з нами для консультації — ми допоможемо вибрати оптимальне рішення. Засновано на документації imgix і Cloudinary