Skip to content

Optimize your images for desktop, tablet and mobile and different image formats.

License

Notifications You must be signed in to change notification settings

NodeArt/strapi-plugin-image-optimizer

Β 
Β 

Folders and files

NameName
Last commit message
Last commit date

Latest commit

Β 

History

71 Commits
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 
Β 

Repository files navigation

⚠️ Looking for a Maintainer ⚠️

Hi there, I do not use Strapi anymore (Actually I never really used it). I evaluated Strapi as a headless CMS a while ago and since I was missing a functionallity to scale and format uploaded images, I was happy to find that @nicolashmln already created a great plugin for this. Nevertheless, it has only one issue (at least it was an issue for me): The image sizes and format to transform the uploaded images to could not be declared in code. Therefore, I created a fork which I then published. Since I expected to use Strapi as CMS (because it made a good impression) I thought it makes sense to share this with the world.

However, some weeks later I decided to move from Strapi due to a bunch of reasons which are not really important at this point (self-hosting, etc.). This plugin however is forced to use a semi-internal Strapi API which was and is sometimes subject to changes (because this is the only reason to hook into the upload process). Therefore, sometimes changes are required or otherwise the plugin even breaks with minor changes (which is pretty bad☹️). However, since I do not use Strapi anymore I think it is better to pass this plugin to somebody who knows Strapi better than I do. If you use Strapi and this plugin regularly and feel confident to take over the maintainership of this repo contact me on LinkedIn or Instagram under @marlokessler.

Thank you!

Cheers Marlo


image optimizer logo

Strapi plugin image optimizer

Version License Dependencies Deploy All Contributors

Table of contents

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.

// ./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"]. Only jpeg, jpg, png/webp, avif, heif, tiff and tif will adjust quality.
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. If neither width nor height are set, the output will be the same size as the original.
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. If neither width nor height are set, the output will be the same size as the original.
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"
  | "entropy" // only in combination with ImageFit cover
  | "attention"; // only in combination with ImageFit cover;

Example config

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

// ./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: "sm",
          width: 768,
        },
        {
          name: "md",
          width: 1280,
        },
        {
          name: "lg",
          width: 1920,
        },
        {
          name: "xl",
          width: 2840,
          // Won't create an image larger than the original size
          withoutEnlargement: true,
        },
        {
          // Uses original size but still transforms for formats
          name: "original",
        },
      ],
      additionalResolutions: [1.5, 3],
      quality: 70,
    },
  },
  // ...
});

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.

import { Config as ImageOptimizerConfig } from "strapi-plugin-image-optimizer/dist/server/models/config";

// ...
export default ({ env }) => ({
  // ...
  "image-optimizer": {
    // ...
    config: {
      // ...
    } satisfies ImageOptimizerConfig,
  },
});

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
Marlo Kesser

πŸ’» πŸ“–
Yaroslav Zakhidnyi
Yaroslav Zakhidnyi

πŸ› πŸ’»
Josef Bredreck
Josef Bredreck

πŸ’» πŸ“–
Cretezy
Cretezy

πŸ’» πŸ“–
Lucurious
Lucurious

πŸ› πŸ’»
Alexander Birkner
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.

About

Optimize your images for desktop, tablet and mobile and different image formats.

Resources

License

Stars

Watchers

Forks

Releases

No releases published

Packages

No packages published

Languages

  • TypeScript 98.1%
  • JavaScript 1.9%