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.6.x

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.

// ./src/extensions/upload/strapi-server.ts

import imageOptimizerService from "strapi-plugin-image-optimizer/dist/server/services/image-optimizer-service";

module.exports = (plugin) => {
  plugin.services["image-manipulation"] = imageOptimizerService;
  return plugin;
};

3. Add config options

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

Config options

Object Config

Option	Type	Description
additionalResolutions	number[] Min: 0	Create additional resolutions for high res displays (e.g. Apples Retina Display which has a resolution of 2x). Default is [].
exclude	SourceFormat[]	Exclude image formats from being optimized. Default is [].
formats	OutputFormat[]	Specifiy the formats images should be transformed to. Specifiying original means that the original format is kept. Default is ["original", "webp", "avif"].
include	SourceFormat[]	Include image formats that should be optimized. Default is ["jpeg", "jpg", "png"].
sizes*	ImageSize[]	(required) - Specify the sizes to which the uploaded image should be transformed.
quality	number Min: 0 Max: 100	Specific the image quality the output should be rendered in. Default is 80.

Object ImageSize

Option	Type	Description
fit	ImageFit	The image fit mode if both width and height are specified. Default is cover.
height	number Min: 0	The height of the output image in pixels. If only height is specified then the width is calculated with the original aspect ratio.
name*	string Min: 0	(required) - The name of the size. This will be used as part of generated image's name and url.
position	ImagePosition	The position of the image within the output image. This option is only used when fit is cover or contain. Default is center.
width	number Min: 0	The width of the output image in pixels. If only width is specified then the height is calculated with the original aspect ratio.
withoutEnlargement	boolean	When true, the image will not be enlarged if the input image is already smaller than the required dimensions. Default is false.

Type SourceFormat

type SourceFormat =
  | "avif"
  | "dz"
  | "fits"
  | "gif"
  | "heif"
  | "input"
  | "jpeg"
  | "jpg"
  | "jp2"
  | "jxl"
  | "magick"
  | "openslide"
  | "pdf"
  | "png"
  | "ppm"
  | "raw"
  | "svg"
  | "tiff"
  | "tif"
  | "v"
  | "webp";

Type OutputFormat

type OutputFormat = "original" | SourceFormat;

Type ImageFit

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

Type ImagePosition

type ImageFit =
  | "top"
  | "right top"
  | "right"
  | "right bottom"
  | "bottom"
  | "left bottom"
  | "left"
  | "left top"
  | "center";

Example config

// ./config/plugins.ts

export default ({ env }) => ({
  // ...
  "image-optimizer": {
    enabled: true,
    config: {
      include: ["jpeg", "jpg", "png"],
      exclude: ["gif"],
      formats: ["original", "webp", "avif"],
      sizes: [
        {
          name: "xs",
          width: 300,
        },
        {
          name: "s",
          width: 768,
        },
        {
          name: "m",
          width: 1280,
        },
        {
          name: "l",
          width: 1920,
        },
        {
          name: "xl",
          width: 2840,
        },
      ],
      additionalResolutions: [1.5, 3],
      quality: 70,
    },
  },
  // ...
});

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 🐛 💻

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.