An open-source & self-hostable image optimization service, a drop-in replacement for Vercel's Image Optimization.

The cloud version, with free global CDN and simple pricing available here: https://images.coollabs.io

• Change the width query parameter to see the image resize on the fly.
• Add the height query parameter to see the image crop on the fly.
• Add the quality query parameter to see the image quality change on the fly.

https://image.coollabs.io/image/https://cdn.coollabs.io/images/image1.jpg?width=500

1. Next Image Transformation API.
   • A simple API written in Bun that transforms the incoming request to Imgproxy format and forwards it to the Imgproxy service.
2. Imgproxy service.
   • A powerful and fast image processing service that can resize, crop, and transform images on the fly.

1. Login to your Coolify instance or the cloud.
2. Create a new service and select the Next.js Image Transformation template.
3. Optional: Set the ALLOWED_REMOTE_DOMAINS environment variable to the domain of your images (e.g. example.com,coolify.io). By default, it is set to * which allows any domain.
4. Set the your <domain> on the Next Image Transformation service.
5. Deploy your service.

1. In next.config.js add the following:

module.exports = {
  images: {
    loader: 'custom',
    loaderFile: './loader.js',
  },
}

2. Create a file called loader.js in the root of your project and add the following:

'use client'

export default function myImageLoader({ src, width, quality }) {
    const isLocal = !src.startsWith('http');
    const query = new URLSearchParams();

    const imageOptimizationApi = '<image-optimization-domain>';
    // Your NextJS application URL
    const baseUrl = '<your-nextjs-app-domain>';

    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()}`;
}

• Replace <image-optimization-domain> with the URL of what you set on the Next Image Transformation API.
• Replace <your-nextjs-app-domain> with the URL of your Nextjs application.

• width
• height
• quality