Bitmap manipulation increasing the file size considerably.

[RishabhAsthana]

I am using Jimp for a project and this involves manipulating the bitmap by simple bitwise operations. I use a PNG image as a source, and manipulate its bitmap by changing the lower 2-bits every byte, without ever adding any more bytes. What this leads to is that my input is around 86KB but the same bitmap, when written to an image (using the write() method), is coming out to be about 235KB. Is there any way I can avoid this? I would like to have access to same the bitmap which I was manipulating instead of having a new one created (of a much larger size). Are there any options to preserve the original compression, and image size?

Update: I went back and tried reading the same image, and then just writing it back without any manipulation and I am still noticing the size bloat.

This is the function I am using in my workflow:

function test(){
	Jimp.read("in.png", function (err, image) {
	    if (err) throw err;
        this.write("out.png");
    });
}

Update 2: It seems the original image had a bit-depth of 8 but the output image has a bit-depth of 32, which explains the bloating. Any way to stop this from happening?

[DennisJames]

I am experiencing this problem too, have you found the way to fix?

[hipstersmoothie]

@DennisJames @asthana4 any chance you could share a sample image?

[DennisJames]

@hipstersmoothie here is one of my sample with size 8.21KB , i run code like : var image = await Jimp.read(file); image.write(newPath + 'test2.' + image.getExtension(), function (err, res) { console.log(err, res); }); then i get a png with size 21.8KB,

[hipstersmoothie]

The png options werent getting passed correctly so I've opened #604. Once released the following code will allow you to get smaller files.

const fs = require('fs');
const Jimp = require('jimp');

test();

async function test() {
    const image = await Jimp.read('./exampleImages/panda.png');

    await image
      .deflateStrategy(0)
      .filterType(Jimp.PNG_FILTER_NONE)
      .colorType(0)
      .writeAsync('test.png');

    const orig = fs.statSync('./exampleImages/panda.png');
    const result = fs.statSync('test.png');

    console.log(`${orig.size / 1000.0}kb`, `${result.size / 1000.0}kb`);
}

Output:

8.413kb 8.19kb

Note: colorType 0 makes it greyscale. This works for this image but maybe not other. Play around with the functions listed here

EDIT: Released in v0.5.0

[mojodev]

any update to fix this issue ?

[hipstersmoothie]

converting the image to png will make it bigger unless you use the png options. have you tried my above code @mojodev

[matamune94]

converting the image to png will make it bigger unless you use the png options. have you tried my above code @mojodev

how about jpeg ? when I write image to buffer , it increasing the file size 168kb > 800kb ? how can fix ?

[grahamb]

I'm running into the same issue when reading in an image from Base64-encoded data and writing it back out without any manipulation. Doing so results in a file twice the size of the original.

const jimp = require('jimp')
const fs = require('fs')
const rawData = fs.readFileSync('/tmp/1.bin', 'utf-8');
const image = await jimp.read(Buffer.from(rawData, 'base64');
const newBuffer = await image.getBufferAsync(jimp.AUTO);

console.log(rawData.length); // 17196
console.log(newBuffer.getString('base64'); // 35060

[kane-mason]

same issue - no manipulation at all but file size doubles

[Eriickson]

any update to fix this issue ?

[eZubia]

Any updates for this issue?

[dobrovolskaa]

Any updates ?

[emmaakachukwu]

waiting for updates.. 🙂

[arturferreira]

Any update?