Frequently Asked Questions
Images is fully compatible with next/image
components. All you need to do is to set a custom loader function.
Here is an example repository: https://github.com/coollabsio/coolify-examples/tree/main/nextjs/spa-with-image-optimization
Here is an example repository: https://github.com/coollabsio/coolify-examples/tree/main/nextjs/spa-with-image-optimization
# next.config.js
module.exports = {
images: {
loader: 'custom',
loaderFile: './loader.js',
},
}
# loader.js
'use client'
export default function myImageLoader({ src, width, quality }) {
const isLocal = !src.startsWith('http');
const query = new URLSearchParams();
const imageOptimizationApi = 'https://images.coollabs.io/o';
// Your NextJS application URL
const baseUrl = 'https://coollabs.io';
const fullSrc = `${baseUrl}${src}`;
if (width) query.set('width', width);
if (quality) query.set('quality', quality);
if (isLocal && process.env.NODE_ENV === 'development') {
return src;
}
if (isLocal) {
return `${imageOptimizationApi}/${fullSrc}?${query.toString()}`;
}
return `${imageOptimizationApi}/${src}?${query.toString()}`;
}
- Store your images anywhere (S3, GCS, etc.)
- Make sure they are reachable over the internet.
- Validate your domain.
- Append https://images.coollabs.io/o/ to your image URL to optimize it.
Examples:
Currently, we support the following optimizations with query params:
Examples:
- Width resizing (eg: width=500)
- Height resizing (eg: height=500)
- Quality (eg: quality=10, default: 65)
Examples:
All optimized images are served through a global CDN for faster delivery.
Query parameters are used to build up the CDN cache key. If you use the same query parameter and image url twice, the global CDN will serve the cached image for the second request.
Query parameters are used to build up the CDN cache key. If you use the same query parameter and image url twice, the global CDN will serve the cached image for the second request.
Once you added your domain, you need to validate that you are the owner of it.
Note: It may take up to 24 hours for the DNS record to propagate, but usually it is faster.
- You will need to set a TXT DNS record with the value provided in the dashboard.
- After you set the record, click the "Validate" button.
Note: It may take up to 24 hours for the DNS record to propagate, but usually it is faster.