imgix Integration for Image Processing
imgix is a proxy CDN for images: stores originals in your S3, transforms via URL parameters, and delivers through global CDN network.
Connecting a Source
# In 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 for 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/*"
]
}]
}
Transformation Parameters
Resizing, formats, quality, smart cropping, color effects, and watermarks are all controlled via URL parameters.
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: Custom Loader
Custom loader enables seamless integration with Next.js Image component for optimized delivery.
Signed URLs for Protected Images
Secure private images using signed URLs with secureURLToken.
imgix integration in Next.js with loader, srcset and signed URLs — 1 working day.