Інтеграція 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
# 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/*"
]
}]
}
Параметри трансформації
Зміна розміру, формати, якість, розумна обрізка, кольорові ефекти та водяні знаки контролюються через URL-параметри.
TypeScript SDK
import ImgixClient from '@imgix/js-core';
const client = new ImgixClient({
domain: 'mysite.imgix.net',
secureURLToken: process.env.IMGIX_SECURE_TOKEN,
useHTTPS: true,
});
const url = client.buildURL('products/shirt-red.jpg', {
w: 600,
h: 600,
fit: 'crop',
auto: 'format,compress',
q: 80,
});
Next.js: Кастомний Loader
Кастомний loader дозволяє бездоганну інтеграцію з Next.js Image компонентом для оптимізованого доставлення.
Підписані URL для захищених зображень
Безпека приватних зображень за допомогою підписаних URL з secureURLToken.
Інтеграція imgix у Next.js з loader, srcset та підписаними URL — 1 робочий день.