Next.js Image Transformation

Next.js Image Transformation is an open-source, self-hostable image optimization service that acts as a drop-in replacement for Vercel's Image Optimization API for Next.js applications.

What is Next.js Image Transformation?

Next.js Image Transformation is a deployment template for Coolify that bundles a lightweight API written in Bun and an Imgproxy instance. It takes image URLs with width, height, and quality query parameters and returns transformed images on the fly. The service is designed to replace the Vercel Image Optimization endpoint, so Next.js projects can use it with minimal configuration changes. The GitHub repository behind the template has 633 stars.

Key Features

• Drop-in replacement for Vercel's Image Optimization — Works with Next.js's custom loader API, so existing next/image components keep working after you swap the loader file.
• Bun-powered transformation API — A small API written in Bun converts incoming Next.js image requests into Imgproxy format and forwards them to the image processor.
• Imgproxy integration — Uses Imgproxy to handle resizing, cropping, and quality adjustments with fast performance.
• Supports width, height, and quality parameters — Each of these query parameters can be changed dynamically to see the image update in real time.
• Self-hostable through Coolify — Deploy in a few steps from the Coolify dashboard, either on your own server or via Coolify Cloud.
• Configurable allowed remote domains — The ALLOWED_REMOTE_DOMAINS environment variable restricts which image sources are processed; it defaults to * for any domain.
• Free cloud CDN option — A hosted version at images.coollabs.io provides a free global CDN with simple pricing.

Who should use Next.js Image Transformation?

• Next.js developers who want to avoid Vercel's paid image optimization limits by running their own service.
• Self-hosting users who already use Coolify and need an open-source image optimization pipeline on their own infrastructure.
• Teams with data-privacy constraints who must process images without sending them to a third-party cloud provider.

What can you do with it?

• E-commerce sites: Deliver product images at multiple widths and quality levels to improve page speed without manual resizing workflows.
• Content-heavy blogs: Automatically generate compressed, correctly dimensioned images for article thumbnails and featured images.
• Portfolio sites: Serve responsive image variants for photography and design work while controlling bandwidth usage.

How does it work?

Deploy the template through Coolify, optionally setting ALLOWED_REMOTE_DOMAINS to limit which external image hosts are allowed. In your Next.js project, add a custom loader file and point it to your transformation API domain. The loader builds a request with width and quality query parameters, and the API forwards the request to Imgproxy, which returns the optimized image.

FAQ

Is Next.js Image Transformation free to use?

The self-hosted version is open-source, so you can run it on your own infrastructure at no cost. The cloud version at images.coollabs.io offers a free global CDN with simple pricing.

Can it completely replace Vercel's Image Optimization?

Yes, the template is designed as a drop-in replacement. You set next.config.js to use a custom loader and update the loader file to route requests to your transformation API.

What image transformations are supported?

Currently width, height, and quality are supported. These are passed as query parameters and processed by Imgproxy.

Is there a way to test it before setting up?

Yes, the documentation includes a live test URL where you can change the width, height, and quality query parameters on a sample image to see the transformations happen instantly.