search

GoogleChromeLabs / squoosh

Make images smaller using best-in-class codecs, right in the browser.
https://squoosh.app
Apache License 2.0
21.83k stars 1.53k forks source link

Reduce palette - alpha only #819

Open jakearchibald opened 4 years ago

jakearchibald commented 4 years ago

WebP and JPEG-XL encode alpha data 'losslessly'. I'm not 100% sure with JPEG-XL, but WebP's compression benefits from palette reduction.

It'd be good to add a toggle to palette reduction that makes it only act on the alpha channel of the image.

jakearchibald commented 3 years ago

This can reuse the current palette reducer, but before it's called, create a copy of the image and set all the RGBs to a single color. Then apply the alpha channel of the result back to the original image.

Csabesz07 commented 10 months ago

Hi! Is this still in game? I'd like to pick it up if possible.

surma commented 10 months ago

Yeah absolutely! It should probably be added as a new option to the ImageQuant codec. If you wanted to take a stab at that, I’d be happy to review a draft PR.

jakearchibald commented 10 months ago

Agreed. An "alpha only" toggle on "Reduce palette". Implementation-wise, create a single-color version of the image with alpha preserved, pass it through imagequant, then apply the alpha of that result back to the input image.

Csabesz07 commented 10 months ago

I'll make a draft PR as soon as possible, thank you for the hints, I'll keep those in sight.

Csabesz07 commented 10 months ago

Hi!

I was finally able to start working on it yesterday, but I'm having a tough time setting up the project. Based on the README it should be 3 easy steps right? (Sorry if I missed anything) I installed node modules without any trouble, but than the problems begun.

I was using node version 18.14.2, and when I run npm run build I get this error:

[!] (plugin css) Error: Could not load css:/Projects/squoosh/src/shared/prerendered-app/colors.css (imported by initialCss): Cannot find \Projects\squoosh\src\shared\prerendered-app\colors.css in pathToResult Error: Could not load css:/Projects/squoosh/src/shared/prerendered-app/colors.css (imported by initialCss): Cannot find \Projects\squoosh\src\shared\prerendered-app\colors.css in pathToResult at Object.load (N:\Projects\squoosh\rollup.config.js:552:17) at N:\Projects\squoosh\node_modules\rollup\dist\shared\rollup.js:18971:25

Okay no problem, after a little bit of searching I found this issue: #1204 It says that with node version 14 there should be no problem, and it really worked with 14.21.3

Next step is npm run dev. I had some issues which I think is related to windows, because some commands here were not recognised couse I had this error message:

squoosh@2.0.0 dev DEV_PORT="${DEV_PORT:=5000}" run-p watch serve DEV_PORT' is not recognized as an internal or external command, operable program or batch file.

So I overwrote the command manually and ended up with this:

set DEV_PORT=5000 npm run watch & npm run serve`

Watch runs fine, finds 0 errors, but hosting a dev server fails on multiple errors. Firstly it couldn't find --listen=$DEV_PORT (Even tho it was there, but the value was always null) ERROR: Unknown --listen endpoint scheme (protocol): null

dev would run this command: serve --listen=$DEV_PORT --config ../../../serve.json .tmp/build/static I had to add "ng" in front of serve to get his working, but now it says that in order for Angular CLI to work I need at least node version 16. Okay, switching back to node version 18 useing NVM. But now it says

Error: This command is not available when running the Angular CLI outside a workspace.

Do you know anything about these errors? If you need any details please let me know. I'm sorry if anything of this is my bad, i'm new to github and this will be my very first open-source project contribution.

Thanks in advance!

surma commented 10 months ago

You are right, it should be 3 simple steps. On Node 20.8 on a Mac, the following sequence works for me on a fresh clone:

$ npm i
$ npm run build
$ npm run dev

So, definitely don’t downgrade Node. Node 18 is almost end-of-life, so I’d rather go the other way towards Node 20.

Don’t use ng serve or anything. That’s Angular tooling and this is not an Angular app.

Are you using WSL? Because if not that might be the cause of these errors. I am not sure that we ever tried to make Squoosh dev server work in Powershell.

Csabesz07 commented 10 months ago

Yes, you were absolutely right! Using WSL and node version 20.8 solved all the errors I mentioned above. Thank you for your help.

Csabesz07 commented 7 months ago

Hi! @surma @jakearchibald I'm sorry for this taking so long. I only had the time to start working on it this monday, but i finally finished. I created a draft PR (#1401 ) You were right, WebP does benefit a lot (additional 10% avr.) from this option, not like JPEG-XL (additional 1% avr.).