Change from jpg to more efficient webp thumbnails

[sam365724]

No description provided.

[bpatrik]

I spent some time with this:
doing something like this:

const Logger_1 = require("./src/backend/Logger");
const run = async () => {
    const sharp = require('sharp');
    const input = {
        mediaPath: '<some path>\\img.jpg',
        size: 50,
    };
    sharp.cache(false);
    const image = sharp(input.mediaPath, { failOnError: false });
    const metadata = await image.metadata();
    const kernel = sharp.kernel.lanczos3;
    image.resize(input.size, input.size, {
        kernel,
        position: sharp.gravity.centre,
        fit: 'cover',
    });
    await image.withMetadata().jpeg({ mozjpeg: true }).toFile('test_mozjpeg.jpg');
    await image.withMetadata().jpeg().withMetadata({ exif: {
            IFD0: {
                Copyright: 'Wernham Hogg'
            }
        }
    }).toFile('test_withMetadata.jpg');
  await image.withMetadata().webp({ effort: 6, quality: 60 }).toFile('test_60.webp');
  await image.withMetadata().webp({ effort: 6, quality: 100 }).toFile('test_100.webp');
  await image.withMetadata().png().toFile('test.png');
};
run();

Interistingly:
test.png - 13kb
test_60.webp - 36kb
test_100.webp - 38kb
test_mozjpeg.jpg - 49,3 kb
test_withMetadata - 49,4 kb

To my understanding png won because that does not contain any metadata which can be quite big

So I think switching to webp only helped because sharp removed some metadata, but not all. But looking at the webp file it still has some. If I manually delete the XMP data from webp it reduces to 24kb.

[bpatrik]

I totally missed on my previous comment that I'm calling withMetadata() in each line....
Removing it, the filesize drops to 1-2KB for each format.

output:
png - 7,13KB
web 100 2,20kb
jpg 1,06kb
webp 80 786
webp 60 546kb

So changing thumbnails to webp sound good to me

[sam365724]

@bpatrik
OK, cool. Do we need metadata for the thumbnails, correct? Because in my code I use withMetadata() as before.

[bpatrik]

Metadata is not needed for the thumbnails. I already removed that after merging this PR.

[4gra]

This is a fantastic change and contributes to a performance boost that's frankly staggering to see in action -- thank you 👍

I've just added a compatibility note as an issue in #603 as it's broken an old client of ours. Not a huge problem.