Strapi recognizes plugin, but does not optimize images

[wdmtech]

Package versions

Strapi version: "4.13.6"
strapi-plugin-image-optimizer version: "^2.1.1"

The issue

I wasn't able to get the plugin to work with my current project (stuck on older version since other plugins require updating), so I created a brand new Strapi project with npx create-strapi-app@4.13.6 (the same version my current project is running)

However I see the same issue even on a clean project.

Someone else in Discord is experiencing this issue too (although they don't specify their Strapi version)

Reproduction

Created the project, then I added the override file at 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;
};

I created a new plugins.js file at config/plugins.js to contain the example config settings provided in README.MD

// ./config/plugins.js

module.exports = {
  // ...
  "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,
    },
  },
  // ...
};

I ran npm run build and then npm run develop

I can see that the plugin is loaded in the Plugins section of the Admin panel

Uploaded a jpg image with fairly large dimensions (photo size)

Queried the asset, observed that only the default Strapi media sizes are available, and the file is in its original format

// 20240109102218
// http://localhost:1337/api/upload/files

[
  {
    "id": 2,
    "name": "moises-alex-WqI-PbYugn4-unsplash.jpg",
    "alternativeText": null,
    "caption": null,
    "width": 5184,
    "height": 3456,
    "formats": {
      "thumbnail": {
        "name": "thumbnail_moises-alex-WqI-PbYugn4-unsplash.jpg",
        "hash": "thumbnail_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b",
        "ext": ".jpg",
        "mime": "image/jpeg",
        "path": null,
        "width": 234,
        "height": 156,
        "size": 8.73,
        "url": "/uploads/thumbnail_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b.jpg"
      },
      "small": {
        "name": "small_moises-alex-WqI-PbYugn4-unsplash.jpg",
        "hash": "small_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b",
        "ext": ".jpg",
        "mime": "image/jpeg",
        "path": null,
        "width": 500,
        "height": 333,
        "size": 32.01,
        "url": "/uploads/small_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b.jpg"
      },
      "medium": {
        "name": "medium_moises-alex-WqI-PbYugn4-unsplash.jpg",
        "hash": "medium_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b",
        "ext": ".jpg",
        "mime": "image/jpeg",
        "path": null,
        "width": 750,
        "height": 500,
        "size": 69.54,
        "url": "/uploads/medium_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b.jpg"
      },
      "large": {
        "name": "large_moises-alex-WqI-PbYugn4-unsplash.jpg",
        "hash": "large_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b",
        "ext": ".jpg",
        "mime": "image/jpeg",
        "path": null,
        "width": 1000,
        "height": 667,
        "size": 120.95,
        "url": "/uploads/large_moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b.jpg"
      }
    },
    "hash": "moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b",
    "ext": ".jpg",
    "mime": "image/jpeg",
    "size": 3369.71,
    "url": "/uploads/moises_alex_Wq_I_Pb_Yugn4_unsplash_d6ca76921b.jpg",
    "previewUrl": null,
    "provider": "local",
    "provider_metadata": null,
    "createdAt": "2024-01-09T10:22:16.071Z",
    "updatedAt": "2024-01-09T10:22:16.071Z"
  }
]

I think that's all the steps followed correctly, maybe not? :-D

Any help appreciated. Any idea what I might be doing wrong?

[tagperfect]

Hey, any updates on this topic? Got same issue, strapi 4.21.1

[azamatsalamat]

Experiencing the same issue with Strapi 4.20.5 and strapi-plugin-image-optimizer ^2.2.1

[freddieerg]

same issue here

[echolimazulu]

Hello everyone,

Thanks to all contributors for this project and for the work done.

@marlokessler,

I faced the same issue today and found out that we don't try to register the extension if we use .ts extension for "extensions/upload/strapi-server" file.

I didn't check why it does, but I guess that it might be a bug in strapi code if it worked before.

Versions:

• strapi 4.23.0
• strapi-plugin-image-optimizer 2.2.1

@wdmtech, @tagperfect, @azamatsalamat, @freddieerg,

Disclaimer:
I didn't test it very well, but as a temporary solution I guess that you can try to fix the issue this way:

Temporary fix:

1. Change the name of the file, from: "extensions/upload/strapi-server.ts" to: "extensions/upload/strapi-server.js"
2. Insert the following code into "extensions/upload/strapi-server.js":

'use strict';

const imageOptimizerService = require('strapi-plugin-image-optimizer/dist/server/services/image-optimizer-service').default;

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

It works for me.

UPDATE:
I didn't see that I have no support of typescript from the bootstrap of strapi project. To work with config with .ts extension of file extensions/upload/strapi-server you have to add support of typescript before as described here:
https://docs.strapi.io/dev-docs/typescript#add-typescript-support-to-an-existing-strapi-project

Then you will be able to use it with the following code:

import { Common } from "@strapi/strapi";
import imageOptimizerService from "strapi-plugin-image-optimizer/dist/server/services/image-optimizer-service";

export default (plugin: Common.Plugin) => {
  plugin.services["image-manipulation"] = imageOptimizerService();

  return plugin;
};

[freddieerg]

Wow, thanks for looking into this @echolimazulu. Super helpful!! :)