search

hackclub / putting-the-you-in-cpu

A technical explainer by @kognise of how your computer runs programs, from start to finish.
https://cpu.land
MIT License
4.68k stars 142 forks source link

PNG image optimization #36

Open FazlyMR opened 10 months ago

FazlyMR commented 10 months ago

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?

kognise commented 10 months ago

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?

FazlyMR commented 10 months ago

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.

kognise commented 10 months ago

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

FazlyMR commented 10 months ago

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

FazlyMR commented 10 months ago

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.

kariyum commented 10 months ago

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.

haneenmahd commented 10 months ago

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

kognise commented 10 months ago

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.

haneenmahd commented 10 months ago

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?