Strapi WebP Images Middleware

Automatically generates WebP versions of uploaded images in Strapi and exposes the webpUrl field in API responses.

This package provides two middleware:

• generate-webp
  Generates WebP images after upload.

• inject-webp-url
  Adds webpUrl to image objects in API responses and optionally inlines SVG content.

Installation

Install the package:

npm install strapi-middleware-webp-images

Usage

Add the middleware to your Strapi project.

File

config/middlewares.ts

Example configuration:

export default [
  {
    resolve: "strapi-middleware-webp-images/dist/generate-webp",
  },
  {
    resolve: "strapi-middleware-webp-images/dist/inject-webp-url",
  },
];

Middleware Order

Make sure the middleware runs after the upload middleware.

Example:

export default [
  "strapi::errors",
  "strapi::security",
  "strapi::cors",
  "strapi::body",

  {
    resolve: "strapi-middleware-webp-images/dist/generate-webp",
  },
  {
    resolve: "strapi-middleware-webp-images/dist/inject-webp-url",
  },

  "strapi::public",
];

Features

• Automatic WebP generation after image upload • Adds webpUrl to API responses • Optional inline SVG support • Uses Sharp for fast image conversion • Works with Strapi v5

Example API Response

Original Strapi response:

{
  "url": "/uploads/image.jpg"
}

Response with this middleware:

{
  "url": "/uploads/image.jpg",
  "webpUrl": "/uploads/webp/image.webp"
}

Generate WebP for existing images

Works only with local file provider (public/uploads)

Run:

npx strapi-middleware-webp-images generate

Requirements

• Strapi v5 • Node.js 18+

License

MIT