3 ms·

Show HN: I built an image optimization tool based on Google's new Jpegli encoder

11 points by wojtek1942 2y ago

wojtek1942 2y ago
Hey HN, I’m a CS student studying in Amsterdam. Usually, I like making native apps as side projects but here is a small web app for a change. Recently, Google released Jpegli [1]. You might have seen their blog post posted here on HN ~1 month ago [2]. It’s a new JPEG coding library that can compress high-quality images 35% more than traditional JPEG codecs. When I searched for a tool to try this new technique, I was surprised to find nothing. That is why I created this website. The encoder runs on WebAssembly making it possible to do all the image processing in the browser. This allows for fast results and optimal privacy since images are never sent to my server or anything like that. Please let me know what you think or if you have any questions! [1] https://opensource.googleblog.com/2024/04/introducing-jpegli-new-jpeg-coding-library.html https://opensource.googleblog.com/2024/04/introducing-jpegli... [2] https://news.ycombinator.com/item?id=39920644 https://news.ycombinator.com/item?id=39920644
- niutech 2y ago
  Cool, thanks! Could you elaborate on advanced options? How does basic progressive rendering differ from enhanced? How many scans do they provide? How does the first scan look like? How much does DCT method affect compression and quality? What's the difference between slow & fast integer? Where is the option to use JPEG XL's XYB colorspace (ICC profile)?
  - wojtek1942 2y ago
    It took a bit of time for me to respond because I wanted to make sure I wrote down the info in a nice detailed way. I will update the descriptions on the website to include the information I am proving here to give visitors a better understanding of the options. To be clear, I am not an expert on all this image coding stuff. I just wanted to make a simple tool to let people try out Jpegli because I thought it was interesting even though I don't know so much about the topic. Progressive Rendering There are 3 options on the website. None, Basic and Enhanced. There correspond respectively to options 0, 1 and 2 for the JXL_ENC_FRAME_SETTING_PROGRESSIVE_DC option [1]. "Set the progressive mode using lower-resolution DC images for VarDCT. Use -1 for the encoder default, 0 to disable, 1 to have an extra 64x64 lower resolution pass, 2 to have a 512x512 and 64x64 lower resolution pass." So "Basic" provides 1 scan and "Enhanced" provides 2 scans. Here is a detailed description on progressive loading: https://www.thewebmaster.com/progressive-jpegs/ https://www.thewebmaster.com/progressive-jpegs/ DCT Method I can't really find documentation about DTC Method in libjxl but the options seems to be very similar to the options offered in mozjpeg [2]. They have a detailed explanation on that page I referenced which I won't all copy here. Seems like slow integer is the preferred method as the others are marked as legacy. Maybe I should just remove the options? From my testing the slow integer method has slightly worse compression but it is accurate. XYB colorspace TBH, the library I am using only supports a few color spaces and it does not include XYB and I have not looked into it much further. Also as you can see I did not really bother to add colorspace settings in general but I might do it later. [1] https://libjxl.readthedocs.io/en/latest/api_encoder.html#_CPPv4N24JxlEncoderFrameSettingId36JXL_ENC_FRAME_SETTING_PROGRESSIVE_DCE https://libjxl.readthedocs.io/en/latest/api_encoder.html#_CP... [2] https://github.com/mozilla/mozjpeg/blob/6c9f0897afa1c2738d7222a0a9ab49e8b536a267/usage.txt#L168 https://github.com/mozilla/mozjpeg/blob/6c9f0897afa1c2738d72...
kurtextrem 2y ago
Really cool stuff!
beardyw 2y ago
> your images are never seen by us or sent to our servers Needs to be on the front page. Great domain name by the way.
- wojtek1942 2y ago
  Thanks! I will try to find a nice place to put it on the home page.
  - wojtek1942 2y ago
    It's on there now
    - ohasten 2y ago
      I think it would be better as a subheading for your actual headline, maybe inside a badge or something. Really great work! How long did you work on it?
      - wojtek1942 2y ago
        I'm not so great with design so I didn't really know how to do it near the headline since there is already a subtitle there. Took me about 2 days to make everything from start to deployment. Main thing was to get the WASM stuff working but that didn't take too long. I found this git repo [1] that already compiled the stuff I needed to WASM. UI took the most time in the end. [1] https://github.com/gen2brain/jpegli https://github.com/gen2brain/jpegli
beardyw 2y ago
Looks perfect on my phone. Good work.

11 points by wojtek1942 2y ago

wojtek1942 2y ago

Hey HN, I’m a CS student studying in Amsterdam. Usually, I like making native apps as side projects but here is a small web app for a change. Recently, Google released Jpegli [1]. You might have seen their blog post posted here on HN ~1 month ago [2]. It’s a new JPEG coding library that can compress high-quality images 35% more than traditional JPEG codecs. When I searched for a tool to try this new technique, I was surprised to find nothing. That is why I created this website. The encoder runs on WebAssembly making it possible to do all the image processing in the browser. This allows for fast results and optimal privacy since images are never sent to my server or anything like that. Please let me know what you think or if you have any questions! [1] https://opensource.googleblog.com/2024/04/introducing-jpegli-new-jpeg-coding-library.html https://opensource.googleblog.com/2024/04/introducing-jpegli... [2] https://news.ycombinator.com/item?id=39920644 https://news.ycombinator.com/item?id=39920644

niutech 2y ago
Cool, thanks! Could you elaborate on advanced options? How does basic progressive rendering differ from enhanced? How many scans do they provide? How does the first scan look like? How much does DCT method affect compression and quality? What's the difference between slow & fast integer? Where is the option to use JPEG XL's XYB colorspace (ICC profile)?
- wojtek1942 2y ago
  It took a bit of time for me to respond because I wanted to make sure I wrote down the info in a nice detailed way. I will update the descriptions on the website to include the information I am proving here to give visitors a better understanding of the options. To be clear, I am not an expert on all this image coding stuff. I just wanted to make a simple tool to let people try out Jpegli because I thought it was interesting even though I don't know so much about the topic. Progressive Rendering There are 3 options on the website. None, Basic and Enhanced. There correspond respectively to options 0, 1 and 2 for the JXL_ENC_FRAME_SETTING_PROGRESSIVE_DC option [1]. "Set the progressive mode using lower-resolution DC images for VarDCT. Use -1 for the encoder default, 0 to disable, 1 to have an extra 64x64 lower resolution pass, 2 to have a 512x512 and 64x64 lower resolution pass." So "Basic" provides 1 scan and "Enhanced" provides 2 scans. Here is a detailed description on progressive loading: https://www.thewebmaster.com/progressive-jpegs/ https://www.thewebmaster.com/progressive-jpegs/ DCT Method I can't really find documentation about DTC Method in libjxl but the options seems to be very similar to the options offered in mozjpeg [2]. They have a detailed explanation on that page I referenced which I won't all copy here. Seems like slow integer is the preferred method as the others are marked as legacy. Maybe I should just remove the options? From my testing the slow integer method has slightly worse compression but it is accurate. XYB colorspace TBH, the library I am using only supports a few color spaces and it does not include XYB and I have not looked into it much further. Also as you can see I did not really bother to add colorspace settings in general but I might do it later. [1] https://libjxl.readthedocs.io/en/latest/api_encoder.html#_CPPv4N24JxlEncoderFrameSettingId36JXL_ENC_FRAME_SETTING_PROGRESSIVE_DCE https://libjxl.readthedocs.io/en/latest/api_encoder.html#_CP... [2] https://github.com/mozilla/mozjpeg/blob/6c9f0897afa1c2738d7222a0a9ab49e8b536a267/usage.txt#L168 https://github.com/mozilla/mozjpeg/blob/6c9f0897afa1c2738d72...

kurtextrem 2y ago

Really cool stuff!

beardyw 2y ago

> your images are never seen by us or sent to our servers Needs to be on the front page. Great domain name by the way.

wojtek1942 2y ago
Thanks! I will try to find a nice place to put it on the home page.
- wojtek1942 2y ago
  It's on there now
  - ohasten 2y ago
    I think it would be better as a subheading for your actual headline, maybe inside a badge or something. Really great work! How long did you work on it?
    - wojtek1942 2y ago
      I'm not so great with design so I didn't really know how to do it near the headline since there is already a subtitle there. Took me about 2 days to make everything from start to deployment. Main thing was to get the WASM stuff working but that didn't take too long. I found this git repo [1] that already compiled the stuff I needed to WASM. UI took the most time in the end. [1] https://github.com/gen2brain/jpegli https://github.com/gen2brain/jpegli

beardyw 2y ago

Looks perfect on my phone. Good work.