Cloudinary vs Uploadthing vs ImageKit 2026

User uploads image
       ↓
Upload to CDN storage (S3-backed)
       ↓
On-demand transformation (resize, crop, format convert, optimize)
       ↓
Serve from edge CDN (closest server to user)
       ↓
Cache transformed image for future requests

import { v2 as cloudinary } from "cloudinary"
import { UploadApiResponse } from "cloudinary"

cloudinary.config({
  cloud_name: process.env.CLOUDINARY_CLOUD_NAME,
  api_key: process.env.CLOUDINARY_API_KEY,
  api_secret: process.env.CLOUDINARY_API_SECRET,
  secure: true,
})

// Upload a file:
async function uploadPackageScreenshot(filePath: string, packageName: string): Promise<string> {
  const result: UploadApiResponse = await cloudinary.uploader.upload(filePath, {
    folder: `packages/${packageName}`,
    public_id: "screenshot",
    overwrite: true,
    resource_type: "image",
    transformation: [
      { width: 1200, height: 630, crop: "fill", gravity: "center" },
      { quality: "auto", fetch_format: "auto" },  // Auto WebP/AVIF
    ],
    tags: ["package-screenshot", packageName],
  })

  return result.secure_url
}

// Generate transformation URLs (without re-uploading):
function getOptimizedUrl(publicId: string, width: number, height?: number): string {
  return cloudinary.url(publicId, {
    transformation: [
      { width, height, crop: height ? "fill" : "scale" },
      { quality: "auto:best", fetch_format: "auto" },
      { dpr: "auto" },  // Serve 2x for retina
    ],
    secure: true,
  })
}

// Advanced transformations:
const overlayUrl = cloudinary.url("package-card", {
  transformation: [
    { width: 1200, height: 630 },
    // Overlay text:
    {
      overlay: { font_family: "Inter", font_size: 48, font_weight: "bold", text: "react" },
      color: "#ffffff",
      gravity: "north_west",
      x: 60,
      y: 60,
    },
    // Overlay an icon:
    {
      overlay: "npm-logo",
      width: 80,
      gravity: "south_east",
      x: 30,
      y: 30,
    },
    { quality: "auto", fetch_format: "auto" },
  ],
})

URL-based transformations — no upload required for new sizes:
https://res.cloudinary.com/demo/image/upload/
  w_400,h_300,c_fill,g_face/     ← Resize to 400×300, crop to face
  e_grayscale/                    ← Apply grayscale
  e_blur:200/                     ← Apply blur
  q_auto,f_auto/                  ← Auto quality and format
  sample.jpg

import { CldImage, CldUploadButton } from "next-cloudinary"

// Drop-in replacement for next/image with Cloudinary optimization:
function PackageCard({ imagePublicId }: { imagePublicId: string }) {
  return (
    <CldImage
      src={imagePublicId}
      width={800}
      height={450}
      alt="Package screenshot"
      crop="fill"
      gravity="center"
      sizes="(max-width: 768px) 100vw, 800px"
    />
  )
}

// Upload widget (no backend needed):
function UploadButton({ onUpload }: { onUpload: (url: string) => void }) {
  return (
    <CldUploadButton
      uploadPreset="pkgpulse-screenshots"
      onSuccess={(result) => {
        if (result.info && typeof result.info === "object") {
          onUpload(result.info.secure_url)
        }
      }}
    >
      Upload Screenshot
    </CldUploadButton>
  )
}

// app/api/uploadthing/core.ts — Define upload routes:
import { createUploadthing, type FileRouter } from "uploadthing/next"
import { getServerSession } from "next-auth"

const f = createUploadthing()

export const ourFileRouter = {
  // Package screenshot upload (authenticated):
  packageScreenshot: f({
    image: {
      maxFileSize: "4MB",
      maxFileCount: 1,
    },
  })
    .middleware(async ({ req }) => {
      const session = await getServerSession()
      if (!session?.user) throw new Error("Unauthorized")

      // Return metadata that becomes available in onUploadComplete:
      return { userId: session.user.id }
    })
    .onUploadComplete(async ({ metadata, file }) => {
      // Save to database:
      await db.packageImage.create({
        data: {
          url: file.url,
          key: file.key,
          uploadedBy: metadata.userId,
        },
      })

      // Return data to the client:
      return { uploadedBy: metadata.userId, url: file.url }
    }),

  // Bulk imports (multiple files, higher limits):
  csvImport: f({ text: { maxFileSize: "16MB", maxFileCount: 1 } })
    .middleware(async ({ req }) => {
      const session = await getServerSession()
      if (!session?.user?.isAdmin) throw new Error("Admin only")
      return { userId: session.user.id }
    })
    .onUploadComplete(async ({ file }) => {
      await processCsvImport(file.url)
      return { processed: true }
    }),
} satisfies FileRouter

export type OurFileRouter = typeof ourFileRouter

// app/api/uploadthing/route.ts:
import { createRouteHandler } from "uploadthing/next"
import { ourFileRouter } from "./core"

export const { GET, POST } = createRouteHandler({ router: ourFileRouter })

// Client component — type-safe upload:
"use client"
import { useUploadThing } from "~/utils/uploadthing"

function PackageScreenshotUploader() {
  const { startUpload, isUploading } = useUploadThing("packageScreenshot", {
    onClientUploadComplete: (res) => {
      console.log("Uploaded:", res?.[0].url)
      // res is fully typed based on your router definition
    },
    onUploadError: (error) => {
      console.error("Upload error:", error.message)
    },
  })

  const handleDrop = (files: File[]) => {
    startUpload(files)
  }

  return (
    <div onDrop={(e) => handleDrop([...e.dataTransfer.files])}>
      {isUploading ? "Uploading..." : "Drop image here"}
    </div>
  )
}

import ImageKit from "imagekit"
import { UploadResponse } from "imagekit/dist/libs/interfaces"

const imagekit = new ImageKit({
  publicKey: process.env.IMAGEKIT_PUBLIC_KEY!,
  privateKey: process.env.IMAGEKIT_PRIVATE_KEY!,
  urlEndpoint: process.env.IMAGEKIT_URL_ENDPOINT!,
})

// Upload:
async function uploadImage(buffer: Buffer, fileName: string): Promise<string> {
  const result: UploadResponse = await imagekit.upload({
    file: buffer,
    fileName,
    folder: "/packages",
    tags: ["package-image"],
    useUniqueFileName: true,
    transformation: {
      pre: "w-1200,h-630,cm-pad_resize",
    },
  })

  return result.url
}

// URL transformation (same as Cloudinary's URL approach):
function getResizedUrl(imageUrl: string, width: number, quality = 80): string {
  // Append transformation parameters to URL:
  return `${imageUrl}?tr=w-${width},q-${quality},f-auto`
}

// Or use ImageKit's URL builder:
function buildTransformedUrl(imageId: string, transforms: object): string {
  return imagekit.url({
    path: imageId,
    transformation: [transforms],
  })
}

https://ik.imagekit.io/demo/image.jpg
  ?tr=w-400,h-300,c-maintain_ratio    ← Resize maintaining ratio
  :w-400,h-300,cm-extract,x-100,y-50  ← Chained transformations

Built-in transformations:
- w (width), h (height)
- c (crop: maintain_ratio, force, at_least, at_max)
- cm (crop mode: extract, pad_resize, pad_extract)
- f (format: auto, webp, avif, jpg, png)
- q (quality: 0-100 or auto)
- bl (blur), rt (rotate), flip-h, flip-v
- e-sharpen, e-grayscale, e-contrast
- lo-true (lossless)

// next.config.ts:
export default {
  images: {
    remotePatterns: [
      {
        protocol: "https",
        hostname: "ik.imagekit.io",
      },
    ],
  },
}

// Component — just use next/image normally:
import Image from "next/image"

function PackageImage({ src }: { src: string }) {
  return (
    <Image
      src={src}
      width={800}
      height={450}
      alt="Package screenshot"
      // next/image handles srcset, WebP conversion, and lazy loading
      // ImageKit handles CDN delivery from the URL
    />
  )
}

// Type safety flows from server router definition to client hook
// If you change maxFileSize on the server, TypeScript will error
// on client code that violates the new constraint at compile time