Serve and transform images

Store one original image and serve whatever each page needs. Storage delivers images from a URL on your domain and transforms them at request time. Add parameters to the URL and the edge returns a resized, cropped, or reformatted derivative, then caches it so the next request is instant.

The delivery host

Public assets are served from your delivery host. The path is the tenant, the folder, then the file name:

https://storage.revenexx.com/<TENANT_SLUG>/<folder>/sunset.jpg

Delivery runs on revenexx's own content delivery edge, cached close to your customers and routed to the nearest location. The platform and your data are hosted in the EU; the edge delivers cached content globally so it stays fast everywhere. A managed web application firewall protects the edge by default.

You can also serve these assets from your own domain under a /cdn/ path, which is what the Nuxt Image provider below uses.

Transform on the fly

For images, add transform parameters as a query string. Resize to 800 px wide and convert to WebP:

https://storage.revenexx.com/<TENANT_SLUG>/photos/sunset.jpg?w=800&fm=webp

Crop a centered square thumbnail:

https://storage.revenexx.com/<TENANT_SLUG>/photos/sunset.jpg?w=300&h=300&fit=crop&gravity=ce

The first request for a given combination is generated at the edge; every later request for the same URL is served from cache. You never regenerate the same variant twice.

Transform parameters

The most common parameters:

Parameters are applied at the edge and validated server-side. You never construct or sign anything yourself; you just add the query string.

One original, many variants

Upload the largest version you have. Generate every smaller size and alternate format with parameters at request time. You don't pre-render thumbnails, and you don't store duplicates.

Nuxt Image provider

If you build the front end with Nuxt, the official provider wires Storage into @nuxt/image so <NuxtImg> emits transform URLs for you. It targets your own domain's /cdn/ path, which means responsive images and modern formats served from your origin.

Install

npm i @revenexx/storage-nuxt-image
npx nuxi module add image

Configure

Register the provider in nuxt.config.ts. Set baseURL to your origin, or leave it empty to emit root-relative /cdn/ URLs that resolve against whatever domain serves the page.

import { presets } from '@revenexx/storage-nuxt-image'

export default defineNuxtConfig({
  modules: ['@nuxt/image'],
  image: {
    provider: 'storage',
    presets,
    providers: {
      storage: {
        provider: '@revenexx/storage-nuxt-image',
        options: {
          // baseURL: 'https://my-shop.com',
          // cdnPath: '/cdn/',
        },
      },
    },
  },
})

The provider accepts two options:

Use it

Use <NuxtImg> with standard modifiers. The provider maps them to transform parameters:

<template>
  <!-- /cdn/sftp-imports/header.jpg?w=800&h=450&fit=cover&fm=webp -->
  <NuxtImg
    src="/sftp-imports/header.jpg"
    width="800"
    height="450"
    fit="cover"
    format="webp"
  />

  <!-- richer transforms via :modifiers -->
  <NuxtImg
    src="/uploads/portrait.jpg"
    :width="600"
    :modifiers="{ gravity: 'sm', blur: 3 }"
  />

  <!-- ship-ready presets -->
  <NuxtImg preset="card" src="/uploads/photo.jpg" />
</template>

The provider maps width to w, height to h, quality to q, format to fm, and fit straight through, then builds <baseURL><cdnPath><source>?<query>. The built-in presets cover the common cases (thumbnail, avatar, card, hero, ogImage, placeholder); import them as shown above or define your own.

What's next

• 3D assets — show interactive models the same way you show images.
• Signed URLs & access — serve private images with time-limited links.