Replace/modify how payload resize/convert images

[khakimvinh]

Hi everyone,
I would like to modify how payload resize and convert images, is there a way to do so?

The reason:

• When payload resize images declared imageSizes, if uploaded media smaller, it will get enlarged.

What I checked:

• I can't find any hooks in official docs for this specific part. (or I missed)
• payload-webp: using after change hook, convert after payload done with resize/convert.

Current work around I can think of is using payload-webp then use after change hook to remove files resized by payload.

Any ideas appreciated, thanks.

[khakimvinh]

Sorry to bump, really appreciate any ideas or thoughts. Thanks!

[jmikrut]

Hey @khakimvinh — just so I am clear, the main thing you're looking to change is to disable the way that small images are upscaled to the larger size. Is that correct?

Building in hooks here may not be the best way to do this. We might consider adding an option for upscale on image sizes, and then only upscale if that property is set to true. Would that solve your issue?

Should we support this internally? We would be happy to accept a PR if you agree with this approach, and I could talk through implementation strategy as well!

[khakimvinh]

Hi @jmikrut thanks for the reply.

I just found below in the payload source code src/uploads/imageResizer.ts:

// line 50
const sizes = imageSizes
    .filter((desiredSize) => desiredSize.width <= dimensions.width || desiredSize.height <= dimensions.height)
...

So we actually already have code to prevent unnecessary up-scaling. The thing is the code doesn't check if desiredSize.height not null before comparing. Which is exactly my case (null <= number will always true) causing always up-scaling

Also, there is a line in the doc:
Behind the scenes, Payload relies on sharp to perform its image resizing. You can specify additional options for sharp to use while resizing your images.
Not sure if I missed anything but I can't find anything related to where or how to input such sharp options into config.

If such feature not exists yet, I can try to do a PR on:

• resizeOptions in upload config: provide array of sharp options to be used for each desiredSize, if none provided then will fallback to current behavior
• formatOption in upload config: provide sharp format option to be used, if not then will fallback to current behavior
  With exposing both these Sharp options, developers can have much more power over resizing and formatting.

Let me know what you think, thanks!