2

I am creating a function to resize thumbnails downloaded by youtube-dl. youtube-dl downloads 4 thumbnails, but they are not in the exact dimensions I need so they must be resized. Because the images I need are smaller than the largest thumbnail downloaded by youtube-dl, that large thumbnail is used as a base to create the resized thumbnails.

This is the function I am using to resize my thumbnails:

import fs from 'fs-extra';
import sharp from 'sharp';

let thumbnailData = fs.readFileSync('D:/original 1280x720 (122,346 bytes).jpg');

await generateThumbnailFile(thumbnailData, 720, 405, 'D:/medium resized 720x405 (329,664 bytes).jpg');
await generateThumbnailFile(thumbnailData, 168, 95, 'D:/small resized 168x95 (26,246 bytes).jpg');

const generateThumbnailFile = async (sourceData, width, height, filepath) => {
    try {
        const data = await sharp(sourceData)
            .resize({ width: width, height: height, fit: sharp.fit.inside })
            .jpeg({ quality: 100, chromaSubsampling: '4:4:4' })
            .toBuffer();
        fs.writeFileSync(filepath, data);
    } catch (err) {
        throw err;
    }
}

However, the size of my resized thumbnails is much greater than I would expect. The file size of the medium resized thumbnail nearly three times larger than the largest original thumbnail and the file size of the small resized thumbnail is nearly three times larger than its comparable original thumbnail.

What can I do to reduce the filesize of my resized thumbnails?

No stupid questions
  • 425
  • 1
  • 11
  • 31

1 Answers1

1

Answer is very easy - you used quality: 100 change it to smaller number 80-95 and the generated file should be smaller. If you use quality of 100 is a waste of space in jpegs.

Here you ahve a link to the page that can show you different images compressed to different queality levels: http://regex.info/blog/lightroom-goodies/jpeg-quality you can see there that 100% is usually usually bigger than other files significantly (sometimes even twice bigger).

Therefor using just 80-90% is enought and the file size is not really that great (as probably input file queality was not set to 100, resizing + quality set to 100 could produce files bigger in size than source files).

Seti
  • 2,169
  • 16
  • 26
  • FWIW WordPress uses 82, or maybe 86, for their quality. That should be plenty for most use cases. Unless you're using loseless compression, or compressing uncompressed inputs, choosing 100% quality is likely to yield larger files than the originals. – Slbox Dec 13 '20 at 21:56