Your images.
Optimized at the edge.

Next.js handles responsive sizes and lazy loading. imgt serves the WebP. Add these three files to your app, then restart its development server.

Help me self-host imgt on my Cloudflare account and integrate it into my project.

Read https://imgt.fashn.ai/llms.txt and follow its deployment, configuration and
Next.js guides before making changes. The source is
https://github.com/fashn-AI/imgt. Inspect my project and preserve its existing
configuration. Ask for missing information: my target Cloudflare
account, my own imgt deployment URL and the public HTTPS image sources I use.

1. Set up my own imgt deployment through Cloudflare's GitHub integration.
   Production branch pushes should deploy automatically. Use Wrangler to
   inspect the intended account; do not manually deploy or assume the account
   open in a browser is the correct one.
2. Set ALLOWED_HOSTS to the hosts serving my original images. Include
   images.unsplash.com if I want the playground. Wildcards such as *.example.com
   do not include the parent example.com. Validate redirect hosts too. Follow
   the deployment guide's GitHub rebuild step after dashboard variable updates.
3. Keep the imgt R2 bucket private, bound as DERIVATIVES, using Standard storage.
   Complete storage setup with an enabled lifecycle rule that deletes objects
   under derivatives/ after 30 days. Deployment does not add this rule.
4. If my app uses Next.js, adapt the TypeScript custom image loader to my
   existing configuration. Use my own imgt URL, configure the qualities my
   components use and preserve image dimensions and responsive sizes.
   Otherwise, use the /image API from my project with my own endpoint.
5. Replace every endpoint placeholder with my deployment URL. The FASHN AI
   website is a demonstration, not a shared optimization service for my app.
6. Run the repository checks and test the deployed image pipeline using
   npm run smoke -- MY_IMGT_ENDPOINT MY_PUBLIC_IMAGE_URL. Verify decoded WebP
   output, repeat cache hits and conditional 304 responses. Do not treat
   /health alone as an end-to-end check. Only use --fresh with source URLs that
   accept additional query parameters.

Keep the implementation small, explain the changes and call out any setup
steps I still need to complete in Cloudflare.

1. 01

   Configure the loader.

   List the quality values your Next.js components use.

   next.config.ts Copy

   import type { NextConfig } from "next";
   
   const nextConfig: NextConfig = {
     images: {
       loader: "custom",
       loaderFile: "./image-loader.ts",
       qualities: [77],
     },
   };
   
   export default nextConfig;

2. 02

   Point it at imgt.

   Replace the placeholder with your own deployed imgt URL. Deploy your own instance before integrating; this website provides a playground, not a shared optimization service.

   image-loader.ts Copy

   "use client";
   
   import type { ImageLoaderProps } from "next/image";
   
   export default function imageLoader({
     src,
     width,
     quality = 77,
   }: ImageLoaderProps) {
     const url = new URL("/image", "https://imgt.YOUR-SUBDOMAIN.workers.dev");
     url.search = new URLSearchParams({
       url: src,
       w: String(width),
       q: String(quality),
     }).toString();
     return url.href;
   }

3. 03

   Use your Image.

   Set dimensions and sizes to match your layout. imgt accepts integer widths from 1 to 3840 and qualities from 1 to 100; this example uses 77.

   app/page.tsx Copy

   import Image from "next/image";
   
   export default function Page() {
     return (
       <main style={{ maxWidth: 800, margin: "0 auto" }}>
         <Image
           src="https://images.unsplash.com/photo-1500530855697-b586d89ba3ee?fm=jpg&fit=crop&w=1920&h=1200&q=90"
           alt="Landscape from Unsplash"
           width={1920}
           height={1200}
           quality={77}
           sizes="(max-width: 768px) 100vw, 800px"
           style={{ width: "100%", height: "auto" }}
         />
       </main>
     );
   }

The ALLOWED_HOSTS environment variable lists the hosts imgt can fetch original images from. For https://cdn.example.com/photo.jpg, allow cdn.example.com. Include your frontend domain only if it serves the originals. This setting does not restrict which websites can display optimized images.

images.unsplash.com,cdn.example.com,*.images.example.com

Complete this step before production use. Deployment creates the private imgt R2 bucket, but does not add a lifecycle rule. Without one, unused cached images remain in storage and accumulate.