swiftimg

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

Astro's image components support remote sources via the `domains` config. Pointing them at swiftimg gives you a CDN-backed source plus on-the-fly transforms — no pipeline to maintain in the Astro project.

Try swiftimg freeSee the API

Heads-up

Astro's built-in optimization is great for in-repo images. swiftimg makes sense once your image library outgrows the repo or you need responsive variants without checking 4× sizes in.

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

    src/pages/index.astro
    ---
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.

Astro — FAQ

Does Astro's image cache still apply?

Astro caches generated variants of in-repo images. For remote swiftimg URLs, swiftimg's own global cache (1-year immutable) is what serves the bytes.

What about Astro on Vercel / Netlify?

Same setup — remote images are fetched from swiftimg regardless of host. No platform-specific image bills.

Can I use swiftimg with the legacy @astrojs/image integration?

The integration supports remote URLs, but the modern `astro:assets` API is the recommended path.

See also

Ready to host your Astro images?

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

Upload nowSee all how-tos