Replace Sharp with Jimp for pure JS image manipulation library #2533
Conversation
from webp to jpeg images. Jimp is pure javascript so no external dependencies. Sharp has those and caused various build/deploy issues.
| @@ -1027,7 +1027,7 @@ router.get('/samplepackimage/:id/:seed', async (req, res) => { | |||
| }); | |||
|
|
|||
| res.writeHead(200, { | |||
| 'Content-Type': 'image/webp', | |||
| 'Content-Type': 'image/jpeg', | |||
There was a problem hiding this comment.
This is only functional change in the file. The rest were update by prettier/eslint
|
Did some more testing with various jpeg quality settings:
I would guess the durations aren't very accurate coming from the local dev environment. An example of the 25% quality image is below which is surprisingly decent, as I expected at 25% lots of artifacts or dithering. In comparison the 90% quality is. In comparison the full size in two browser tabs, you can definitely see some artifacts is the lower quality such as around the mirrored lotus lines or the generous plunderer background. I don't think those would be noticeable though in the embed sizing though. |
|
I think for now we will stick with sharp - the perf hit is a bit too much to make this change worth it |
Testing
From testing a jpeg is around twice as large as a webp image and takes 3 times as long to generate (1.7s vs 5.9s). PNG images were 5 times as large.
Creating sample image that is of type jpeg
There is a Jimp plugin for webp https://github.com/jimp-dev/jimp/tree/main/plugins/wasm-webp but I couldn't get it to work with error
Error: No "exports" main defined in /home/node/app/node_modules/@jimp/wasm-webp/package.json, which I assume relates to the note about "only works in esm environments". As well looking through the webp plugin dependencies it eventually uses https://github.com/webmproject/libwebp which has to be built, so might have the same type of build issue as Sharp.