strapi-media-toolkit

A Strapi v5 plugin for automatic image optimization, WebP conversion, and custom responsive image generation.

Features

• Image Optimization — Automatically compress JPEG, PNG, WebP, AVIF, TIFF, and GIF uploads with configurable quality
• WebP Conversion — Convert uploaded images to WebP format for smaller file sizes
• Custom Responsive Sizes — Define your own named image sizes (width, height, fit mode) beyond Strapi's defaults
• AWS S3 Offloading — Optionally offload media files to an S3 bucket with custom domain support
• Admin UI — Manage all settings directly from the Strapi admin panel

Requirements

• Strapi v5
• Node.js >= 18

Installation

npm install strapi-media-toolkit

Setup

1. Register the plugin

Add the following to your Strapi project's config/plugins.ts:

import type { Core } from '@strapi/strapi';

const config = ({ env }: Core.Config.Shared.ConfigParams): Core.Config.Plugin => ({
  'strapi-media-toolkit': {
    enabled: true,
  },
});

export default config;

2. Rebuild the admin panel

npm run build

AWS S3 Provider (Optional)

If you want new uploads to go directly to S3 (or a compatible provider), install the Strapi S3 provider and extend the config above with an upload block:

npm install @strapi/provider-upload-aws-s3

import type { Core } from '@strapi/strapi';

const config = ({ env }: Core.Config.Shared.ConfigParams): Core.Config.Plugin => ({
  upload: {
    config: {
      provider: 'aws-s3',
      providerOptions: {
        baseUrl: env('AWS_CDN_URL'),
        accessKeyId: env('AWS_ACCESS_KEY_ID'),
        secretAccessKey: env('AWS_ACCESS_KEY_SECRET'),
        region: env('AWS_REGION'),
        params: {
          ACL: 'private',
          Bucket: env('AWS_BUCKET'),
        },
      },
      actionOptions: {
        upload: {},
        uploadStream: {},
        delete: {},
      },
      breakpoints: {
        large: 1000,
        medium: 750,
        small: 500,
      },
    },
  },
  'strapi-media-toolkit': {
    enabled: true,
  },
});

export default config;

Add the corresponding variables to your .env:

AWS_ACCESS_KEY_ID=your_access_key
AWS_ACCESS_KEY_SECRET=your_secret_key
AWS_REGION=us-east-1
AWS_BUCKET=your_bucket_name
AWS_CDN_URL=https://your-cdn-or-bucket-url.com

The upload block is only needed if you want new uploads routed to S3. Without it, files are stored locally and you can still use the Offload feature in the admin panel to migrate existing local files to S3 at any time.

Configuration

All settings are managed through the Media Toolkit section in the Strapi admin panel. No manual config file required.

Optimization Settings

| Setting | Default | Description | |---------|---------|-------------| | Enabled | true | Enable/disable image optimization on upload | | Quality | 80 | Compression quality (1–100) | | Convert to WebP | true | Convert images to WebP format | | WebP Quality | 80 | WebP compression quality (1–100) | | Preserve Original | true | Keep the original file alongside optimized version |

Default Image Sizes

| Name | Width | Height | Fit | |------|-------|--------|-----| | thumbnail | 245 | 245 | cover | | small | 500 | 500 | inside | | medium | 750 | 750 | inside | | large | 1000 | 1000 | inside |

You can add, edit, or remove sizes from the Image Sizes page in the admin panel. Supported fit modes: cover, contain, inside, outside, fill.

Admin API

| Method | Path | Description | |--------|------|-------------| | GET | /api/strapi-media-toolkit/settings | Get all settings | | PUT | /api/strapi-media-toolkit/settings | Update settings | | POST | /api/strapi-media-toolkit/settings/reset | Reset to defaults | | GET | /api/strapi-media-toolkit/image-sizes | List image sizes | | POST | /api/strapi-media-toolkit/image-sizes | Create image size | | PUT | /api/strapi-media-toolkit/image-sizes/:id | Update image size | | DELETE | /api/strapi-media-toolkit/image-sizes/:id | Delete image size |

License

MIT