npm install @zawcloud/images
Keep <NuxtImg>. A provider points @nuxt/image at the edge, which resizes, converts to AVIF or WebP and caches each size on its first request.
Also for Next.js and Astro . All integrations.
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/imagesRegister the provider in nuxt.config:
// nuxt.config.ts
export default defineNuxtConfig({
modules: ['@nuxt/image'],
image: {
provider: 'zawcloud',
providers: {
zawcloud: {
provider: '@zawcloud/images/nuxt',
options: { baseURL: 'https://a3f9c21b.zwcld.net' },
},
},
},
});<NuxtImg src="/photos/hero.jpg" width="1200" sizes="sm:100vw md:50vw" fit="cover" />
width, height, quality,
format and fit map onto the edge's parameters. Nuxt's
contain letterboxes, so it becomes pad and its
background becomes bg;
inside becomes contain and
outside becomes cover. Any other modifier, for example
:modifiers="{ blur: 20 }", is passed through by name.
preset works as a provider option or per image.
| 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.
deviceSizes and
imageSizes, and Astro's widths, must then be
widths you allow. Set them to the same lists, or leave the account unrestricted.
preset. Set one in the loader or provider config.