Image hosting for Astro — remote images with @astrojs/image

Step by step

1. 1. Whitelist swiftimg in astro.config.mjs

   Add the delivery hostname to `image.domains` so the component will accept it as a remote source.

   // astro.config.mjs
   export default defineConfig({
     image: { domains: ["i.swiftimg.com"] },
   });

2. 2. Reference a swiftimg URL from a component

   Use the `<Image />` component with a swiftimg URL and explicit width/height.

   ---
   import { Image } from "astro:assets";
   ---
   <Image src="https://i.swiftimg.com/abc123.png" width={1200} height={630} alt="..." />

3. 3. Use transforms for responsive srcset

   Add width/format query parameters to the swiftimg URL and pass it through `<picture>` with explicit sources.

See also

• Image hosting for Static sites (Hugo, Jekyll, Eleventy)

  Offload images from your static-site repo to swiftimg. Smaller repo, faster builds, automatic WebP variants, and on-the-fly resizing — no plugin required.

• Image hosting for Hugo

  Reference swiftimg URLs from Hugo templates and content. Permanent URLs, automatic WebP, and no Hugo image processing on every build.

• Image hosting for Eleventy (11ty)

  Reference swiftimg URLs from Eleventy templates and Markdown. Permanent URLs, automatic WebP, and no @11ty/eleventy-img runtime needed.

• swiftimg vs Cloudflare Images

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