swiftimg

Image hosting for Next.js — feed next/image from an external CDN

Next.js's <code>&lt;Image&gt;</code> component expects width variants and modern formats from your image source. Pointing it at swiftimg gives you both without running an image pipeline in your app, and delivery happens from a global CDN instead of Vercel's billed bandwidth.

Try swiftimg freeSee the API

Heads-up

If you only use Next.js's built-in Image Optimization on Vercel, you also pay Vercel for image transforms. An external host moves those costs to a flat plan.

Step by step

  1. 1. Allow the swiftimg host in next.config.js

    Whitelist swiftimg's delivery hostname so next/image will fetch from it.

    next.config.js
    // next.config.js
module.exports = {
  images: {
    remotePatterns: [
      { protocol: "https", hostname: "i.swiftimg.com" },
    ],
  },
};

  2. 2. Use a custom loader (optional, for transforms)

    A tiny loader hands swiftimg the requested width and format, so next/image's responsive srcset becomes one signed-URL call per breakpoint.

    Custom loader
    // lib/swiftimg-loader.ts
export default function swiftimgLoader({ src, width, quality }) {
  return `https://i.swiftimg.com/${src}?w=${width}&fm=webp&q=${quality || 75}&sig=...`;
}

  3. 3. Use it in a page

    Reference an image by its swiftimg ID; the loader fills in the transform.

    Page
    <Image src="abc123.png" loader={swiftimgLoader} width={1200} height={630} alt="..." />

Next.js — FAQ

Will Vercel's image-optimization budget still apply?

Only if you keep next/image's default loader. With a custom loader pointed at swiftimg, every transform happens on a global CDN and never touches Vercel's image quota.

What about static export (`next export`) or app-router static pages?

Both work — the swiftimg URL is just a remote URL, so static export embeds it without server-side optimization.

Can I keep Next.js images in /public for some, swiftimg for others?

Yes. Mix and match — swiftimg URLs and /public paths both work in the same <Image> component.

See also

Ready to host your Next.js images?

Start free, then unlock the full API, transforms, signed URLs, and a custom domain on the Developer plan.

Upload nowSee all how-tos