putting-the-you-in-cpu icon indicating copy to clipboard operation
putting-the-you-in-cpu copied to clipboard

PNG image optimization

Open FazlyMR opened this issue 1 year ago • 9 comments

I'm currently working on optimizing PNG images used for the website by lossy (not the JPEG kind) means of converting each from RGB to indexed colors, and reducing it's total unique colors to 1/3 of the original since it's going to be downscaled by the browsers anyway to a lower resolution, thus interpolating the colors lost by that lossy optimization process.

As a trial, I managed to trim off a total of ~128 KBs (kilobytes) from all 6 images used in chapter 1.

This is a sample of one of them: syscall-architecture-differences-indexedlossy-o

And this is the unoptimized version currently used: syscall-architecture-differences

Should I continue ahead and later submit a pull request for that?

FazlyMR avatar Aug 14 '23 21:08 FazlyMR

I definitely want to optimize the images. Ideally this would be done automatically, however, perhaps with a script. Would you be interested in working on that?

kognise avatar Aug 15 '23 19:08 kognise

Hmm, sadly I don't really have any coding/scripting experience (and no idea where to start to make that script to automate it and find the equivalent tools that I use)...

The way I did it is manually using GIMP, to convert from RGB to indexed colors and reduce the colors used, and ZopfliPNG (as part of Zopfli) as a last process to optimize the resulting PNG file itself.

FazlyMR avatar Aug 16 '23 02:08 FazlyMR

No problem at all! I will look into it and see what I can do to replicate that process.

kognise avatar Aug 16 '23 13:08 kognise

But in the meanwhile, would it be fine to submit a PR for my manual optimizations, which would still include the originals?

FazlyMR avatar Aug 17 '23 05:08 FazlyMR

No problem at all! I will look into it and see what I can do to replicate that process.

After some searching, I did found a library/CLI program called pngquant that did the same things that I did manually (I also realized that what I did is to quantize the colors, didn't know that terminology before or I just forgot). Not sure how to automate it though.

FazlyMR avatar Aug 19 '23 20:08 FazlyMR

ffmpeg is a great tool to consider. It is possible to make a bash script that will take a directory as an input that is full of images and produce another one with the same images but compressed. ffmpeg is known to be very useful in image compresseion and especially in video compression with very low/unnoticeable loss in quality.

kariyum avatar Aug 27 '23 07:08 kariyum

I definitely want to optimize the images. Ideally this would be done automatically, however, perhaps with a script. Would you be interested in working on that?

You can use imgbot GitHub app to automatically optimise the images for you.

See GitHub marketplace: https://github.com/marketplace/imgbot

haneenmahd avatar Sep 01 '23 17:09 haneenmahd

imgbot is great but i don't think it does as much as @FazlyMR was doing manually! would definitely be down to write a script.

kognise avatar Sep 01 '23 17:09 kognise

I'm interested in writing that script this weekend. If you had any ideas in your mind earlier about optimising it, can you brief it?

haneenmahd avatar Sep 01 '23 17:09 haneenmahd