Yeah it's not a NextJS specific issue, but I don't wanna post it on SO and get destroyed.

First, I didn't even consider image compression and stuff. But, after using my app for a while, I noticed when I upload 4-5 big images (each 10-15 MB), it crashes/reloads the page. It's happening because I'm rendering all those big pictures directly on the web page. So to prevent that, I needed to compress those pictures before rendering. First I went with [react-image-file-resizer](https://www.npmjs.com/package/react-image-file-resizer), which was good enough for me. It accepts maxWidth, maxHeight, and quality parameters, and these are the main things I needed to change in the pictures. But while using it, I noticed my app gets stuck while the compression is running. It was happening because of the default single-threaded behavior of JavaScript and the compression process is a heavy task. So as expected, I went with [Web Workers](https://developer.mozilla.org/en-US/docs/Web/API/Web_Workers_API/Using_web_workers). But then while running the compression (inside Web Worker), I was getting an error "Image is not defined". The react-image-file-resizer library uses the [Image](https://developer.mozilla.org/en-US/docs/Web/API/HTMLImageElement/Image) Constructor

At this point, I became confused. The Web Worker is running in a different thread, but it's still running in the browser, right? So all the browser APIs should be available. Or I'm getting something wrong here?

You might ask, why not create an API dedicated only to image compression and use a NodeJS library? Well, I could do that, but my app is deployed in Vercel, and as many of you know, Vercel has a payload limit of 4.5MB. So I cannot send a total of 200MB+ images to my API endpoint in the production

So, do u have any idea why I can't access the Image constructor in the Web Worker? or can u suggest some other similar library u know that can help me achieve my requirement?

Any kinda help will be appreciated...