Image processing: resized images are bigger than original

support
1

Hi everyone,

I am using the image processing feature of Hugo to add responsive image to my website.
Everything is working perfectly and this is an awesome feature! But, while looking at the network data
on my website, I noticed that resized PNG images are bigger than the original.

For example, with an image called “apercu-slack.png”:

  • the original is 1280x920px and weight 26ko
  • the medium version generated by Hugo is 1024x736px and weight 60ko
  • the small version generated by Hugo is 600x431px and weight 30ko

Is it to be expected? Is there a parameter to tweak the quality of the generated PNG?

The original image:
apercu-slack

2

It’s not totally surprising, as PNGs can be compressed (and in Photoshop there is even an option to output 8 bit files). We currently use the default (Go) compression settings when encoding PNGs.

To put it in perspective, the “original” which you uploaded to Discourse:

https://yyz2.discourse-cdn.com/flex036/uploads/gohugo/optimized/2X/9/95fea3add9b9722e8b6370e69d7b0eef9f3fb929_1_690x495.png

Is now 690 x 495 px at 41,3 KB…

You can see the options here:

I don’t think the scale filter will have any effect on the image size, and I may investigate more on this and add more options on this later.

Note that for JPEG there is a quality setting, which has a big effect on file sizes.

Could you open up an issue on GitHub so we can investigate a little if there are quality settings we could add (compression, 8 bit maybe).

3
4

Thank you for your answer.

I have opened a ticket at https://github.com/gohugoio/hugo/issues/4416

1 Like