npm install @zawcloud/images

Astro images, served by an image CDN

Keep astro:assets. An image service points <Image> at the edge, so nothing is processed at build time and every size is made on request.

Also for Next.js and Nuxt . All integrations.

One setting: your delivery hostname

https://a3f9c21b.zwcld.net

This is an example. Your own is on the console dashboard: an opaque <label>.zwcld.net, or a custom domain once it is verified. Sign in and the console shows this guide with your hostname filled in.

The hostname identifies the account, so no API key goes in your markup, and the URLs are safe to build in the browser. Images come from your configured origin: /photos/hero.jpg means <origin>/photos/hero.jpg.

One package, no dependencies. The framework writes the srcset; the edge resizes, converts to AVIF or WebP and caches each size on its first request. Nothing is processed at build time.

npm install @zawcloud/images

Astro

Set it as the image service:

// astro.config.mjs
import { defineConfig } from 'astro/config';

export default defineConfig({
  image: {
    service: {
      entrypoint: '@zawcloud/images/astro',
      config: { baseUrl: 'https://a3f9c21b.zwcld.net' },
    },
  },
});

---
import { Image } from 'astro:assets';
---
<Image src="/photos/hero.jpg" width={1200} height={800} widths={[400, 800, 1200]} alt="" />

quality takes Astro's names (low 50, mid 70, high 85, max 100) or a number. widths and densities both become a srcset. SVGs pass through untouched.

An imported image (import hero from './hero.jpg') has a built path such as /_astro/hero.a1b2c3.jpg. The edge can fetch it only if your origin is your deployed site. Otherwise use string paths on your image origin.

Options

Option	Edge parameter	Notes
width, height	w, h	Clamped to 5000
quality	q	1–100. The edge's default is 80
format	f	auto (the default) picks AVIF or WebP per browser and is left out of the URL. jpg means jpeg
fit	fit	cover, contain, fill or pad. crop means cover. pad fills the box with params.bg
preset	preset	One of your named presets
params	as named	Any other parameter: { grayscale: true, watermark: '© Shop' }

Options are written in a fixed order, so one image at one size is always the same URL, and every cache can reuse it. A value the edge would refuse, such as quality 0 or an unknown fit, throws in your build instead of becoming a broken image in production.

Two account settings to check

Output size limits. If your account allows only certain widths, any other width is refused with a 400. Next's deviceSizes and imageSizes, and Astro's widths, must then be widths you allow. Set them to the same lists, or leave the account unrestricted.
Presets-only delivery. Every URL then needs a preset. Set one in the loader or provider config.