PNG resize = large file sizes

[timothyallan]

Hi!

I'm migrating from Intervention image library to Sharp and have run into a snag. My PNG resizes are substantially larger via Sharp, compared to Intervention, which is using Imagemagick under the hood.

I've tried all the PNG settings available in Sharp, but still can't get anywhere close. Hopefully I'm just missing something?

Here are two PNG images, with alpha channel intact, resized from 2k or so down to 1024x1024.

Sharp is about 590KB, and Imagemagick is about 360KB!

Intervention code I'm using
Image->orientate()->fit(1024, 1024)->encode('png')

and Sharp is:
sharp().resize(1024, 1024).ignoreAspectRatio().png({ adaptiveFiltering: true })

adaptiveFiltering off seems to increase the file size even more on certain files, so I've left it on.

Any suggestions on how to get a comparative file size using Sharp??

[lovell]

Hello, please see https://sharp.pixelplumbing.com/en/stable/api-output/#png

"PNG output is always full colour at 8 or 16 bits per pixel. Indexed PNG input at 1, 2 or 4 bits per pixel is converted to 8 bits per pixel."

[timothyallan]

Thanks, and yup, read that area, but I wasn't aware what the various PNG input types are. So that's the cause then. Hopefully this clears it up for anyone else who isn't so versed on what indexed PNG input is as well!

[lovell]

See also #478 for the canonical version of this question.

[sin1rou]

Hello, libvips seems to support PNG8 format now.
8-Bit PNG Quantization Support by felixbuenemann · Pull Request #1009 · libvips/libvips

Can I use this option on sharp?

[lovell]

@sin1rou Please see #1484

[victorkurauchi]

Hi,
I started using this plugin (great work btw) this week and am trying to run a few resizing and optimisations with PNG and JPG files.
So far, no issues with JPG.

Today i'm running the resize for my PNG file and i noticed the final result contain a file that has a bigger size than the original.

Do you happen to know what would be the cause for this behaviour ?

Btw, I had a look in the links provided here :)

Thanks a lot!

my code:

const sharp = require('sharp')
const fs = require('fs')

const img = 'hero';
const inputPath = `./src/public/images/desktop/${img}.png`
const outputPath = `./src/public/images/mobile/${img}.png`

const start = Date.now()
let sharpObj = sharp(inputPath).resize(1024, 500, {
  fit: sharp.fit.inside,
  withoutEnlargement: true
})

// sharpObj = sharpObj.png({ adaptiveFiltering: true, pallete: true, quality: 70, dither: 1.0  })

sharpObj
  .toFile(outputPath)
  .then(() => {
    const end = Date.now()
    console.log((end - start) / 1000)

    fs.stat(outputPath, (err, stat) => {
      console.log(err, stat)
    })
  })
  .catch(err => {
    console.error(err)
  })

Result in /mobile folder:

My original image in desktop folder:

original image:

[lovell]

@victorkurauchi Please open a new issue, ensuring you've read https://sharp.pixelplumbing.com/api-output#png especially

Some of these options require the use of a globally-installed libvips compiled with support for libimagequant (GPL).