Strapi plugin image optimizer

Table of contents

• Requirements
• Installation
  • 1. Install package
  • 2. Extend Strapi's upload plugin
  • 3. Add config options
• Config options
  • Object Config
  • Object ImageSize
  • Type SourceFormat
  • Type OutputFormat
  • Type ImageFit
  • Type ImagePosition
  • Example config
• Usage
• Found a bug?
• Contributors

Requirements

Strapi version >= v4.11.7

Note

This plugin uses sharp provided via strapi core. All settings and options are documented in more detail in the sharp API documentation.

Installation

1. Install package

Install the package via npm install strapi-plugin-image-optimizer or yarn add strapi-plugin-image-optimizer.

2. Extend Strapi's upload plugin

To make this plugin work, you need to enter the following code to ./src/extensions/upload/strapi-server.ts. If file and folders do not exist, you need to create them. This code overrides the default image manipulation service of Strapi's upload plugin.

1// ./src/extensions/upload/strapi-server.ts
2
3import imageOptimizerService from "strapi-plugin-image-optimizer/dist/server/services/image-optimizer-service";
4
5module.exports = (plugin) => {
6  plugin.services["image-manipulation"] = imageOptimizerService;
7  return plugin;
8};

3. Add config options

Configure the plugin in the config/plugins.(js/ts) file of your Strapi project.

Config options

Object Config

Object ImageSize

Type SourceFormat

1type SourceFormat =
2  | "avif"
3  | "dz"
4  | "fits"
5  | "gif"
6  | "heif"
7  | "input"
8  | "jpeg"
9  | "jpg"
10  | "jp2"
11  | "jxl"
12  | "magick"
13  | "openslide"
14  | "pdf"
15  | "png"
16  | "ppm"
17  | "raw"
18  | "svg"
19  | "tiff"
20  | "tif"
21  | "v"
22  | "webp";

Type OutputFormat

1type OutputFormat = "original" | SourceFormat;

Type ImageFit

1type ImageFit = "contain" | "cover" | "fill" | "inside" | "outside";

Type ImagePosition

1type ImageFit =
2  | "top"
3  | "right top"
4  | "right"
5  | "right bottom"
6  | "bottom"
7  | "left bottom"
8  | "left"
9  | "left top"
10  | "center"
11  | "entropy" // only in combination with ImageFit cover
12  | "attention"; // only in combination with ImageFit cover;

Example config

The following config would be a good starting point for your project.

1// ./config/plugins.ts
2
3export default ({ env }) => ({
4  // ...
5  "image-optimizer": {
6    enabled: true,
7    config: {
8      include: ["jpeg", "jpg", "png"],
9      exclude: ["gif"],
10      formats: ["original", "webp", "avif"],
11      sizes: [
12        {
13          name: "xs",
14          width: 300,
15        },
16        {
17          name: "sm",
18          width: 768,
19        },
20        {
21          name: "md",
22          width: 1280,
23        },
24        {
25          name: "lg",
26          width: 1920,
27        },
28        {
29          name: "xl",
30          width: 2840,
31          // Won't create an image larger than the original size
32          withoutEnlargement: true,
33        },
34        {
35          // Uses original size but still transforms for formats
36          name: "original",
37        },
38      ],
39      additionalResolutions: [1.5, 3],
40      quality: 70,
41    },
42  },
43  // ...
44});

If you want type safety, you can extend the configuration with our config typing.

With that approach, you will get the possibility for property IntelliSense and static string type values.

1import { Config as ImageOptimizerConfig } from "strapi-plugin-image-optimizer/dist/server/models/config";
2
3// ...
4export default ({ env }) => ({
5  // ...
6  "image-optimizer": {
7    // ...
8    config: {
9      // ...
10    } satisfies ImageOptimizerConfig,
11  },
12});

Usage

When uploading an image in the media library, Image Optimizer resizes and converts the uploaded images as specified in the config.

Found a bug?

If you found a bug or have any questions please submit an issue. If you think you found a way how to fix it, please feel free to create a pull request!

Contributors ✨

Thanks goes to these wonderful people (emoji key):

Marlo Kesser 💻 📖

Yaroslav Zakhidnyi 🐛 💻

Josef Bredreck 💻 📖

Cretezy 💻 📖

Lucurious 🐛 💻

Alexander Birkner 🐛 💻

This project follows the all-contributors specification. Contributions of any kind welcome!

A special thanks to @nicolashmln, whose package strapi-plugin-responsive-image served as inspiration for this one.