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

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
   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.

   // 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.

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

See also

• Image hosting for SvelteKit

  Reference swiftimg URLs from SvelteKit components and Markdown content. Permanent URLs, on-the-fly resize, and global delivery.

• Image hosting for Vue / Nuxt

  Configure @nuxt/image (or your own Vue component) to fetch from swiftimg. Permanent URLs, on-the-fly resize, and global delivery.

• Image hosting for Astro

  Reference swiftimg URLs from Astro's <Image /> component. Permanent URLs, automatic WebP variants, on-the-fly resize, and global delivery.

• swiftimg vs Cloudflare Images

  A Cloudflare Images alternative: equivalent global delivery, without the per-image and per-delivery line items.