JPEG XL

Since a lot of people coming to the site will be iPhone users, there should be a section comparing it to HEIC,

I'm surprised nobody brings HEIC up, that's a pretty considerable format on those devices

at least in benchmarks

https://github.com/jxl-community/jxl-community.github.io/pull/37

left: before, right: after <@288069412857315328> did you make that pull request https://github.com/jxl-community/jxl-community.github.io/pull/36 ? something changed in the positioning/styling, I prefer how it was before...

it's just the background hero being behind the header right?

i hate hero banner so much

everything wrong with modern design

> I've taken it upon myself to refactor all the styling plus be able to slide it into a generator in the future. Great! It would be nice if we can separate content, styling and navigation better, that would make it easier to edit things and add new subpages.

I added a silly little hit counter at the very bottom of the main page, I hope that's ok

I will try turning it into a generator using hugo

Needs to be scaled for mobile. It's super huge there.

Apparently me neither!

the lists can be done in css instead of javascript

everything on this website can be done with css

everyone's gotta start somewhere :]

i'm fairly confident in my abilities to understand the DOM, considering the solution to this only took like 3 tries

It's learnable

<@245794734788837387> and I found a potential fix for the tiling. The problem is I'm away from my computer right now so maybe someone else can make the pull request.

actually you don't need CSS if you accept the raw HTML look

you don't need HTML if you accept the raw ascii text look

Why https://jpegxl.info/resources/distance-vs-effort-visualizer.html load only jxl images?

because why aren't you using software that supports jxl

it's pretty funny how most people won't be able to use that tool

but there's this fantasy that a buch of people will visit the site because Apple will mention JXL. presumably, those Apple ecosystems users will find something of enlightenment in the experience

actually, the tool is almost as functional while loading no images

most of the exposed encode space is trivia

<@288069412857315328> could you take a look at https://github.com/jxl-community/jxl-community.github.io/pull/36/files#r1750509533 ? I agree that it would be nice to keep the js to a minimum but there's some stuff in it that should be kept, I think you removed a bit too much by dropping that whole blob of js

Mostly because the losslessly recompressed Webp's were huge and we didn't want the hit to <@794205442175402004> hosting. And we were hoping we could eventually get them dynamically done on the page as discussed above. For now why don't we put a note that says you need a browser that supports it.

darn I guess it's one more thing to reverse engineer

automatically filtered by uBlock, easy

next, try adding a silly little crypto miner

i'll add something that re-encodes my holiday pictures at e11 in wasm using one encoder configuration per visitor

(just kidding, to be clear)

yeah, looks like most of it can be dropped but some nuggets of js will have to be kept I guess.

the carousel looks straightforward enough to make css

i will css everything

If <@206628065147748352> is going to add a jxl-oxide wasm decoder for a demo of progressive loading, we could also use that as a fallback decoder for the d-vs-e demo. One simple optimization that can be made: currently it loads different images if you slide the effort slider while distance is at zero. The lossless images are of course the same at all efforts so that's kind of pointless 🙂

Can you do it an pull in the JSON list without JS?

what uses json list?

All the image data for each tool is stored in JSON files so they can be added to independently.

there's a few json files in the repo, e.g. for the glossary, photocredits, news, and the various comparison tools

sounds like a job for the generator (doable)

im surprised those things werent already ~~static~~pre-rendered

They are pre-rendered

but why do they need the json

There is a whole bunch of metadata around each of those images. DDSIM, SSIMU2, Size, etc, etc.

pre-rendered as in the entire dom

Also I didn't realize this until it was too late, but there is a standard FAQ structured data schema from Google. We should probably migrate to it in hopes the answers get picked up more broadly by them: https://developers.google.com/search/docs/appearance/structured-data/faqpage

If we can do the json -> html in a generation step that only happens once per commit to the repo (instead of in javascript and thus client-side), that's better. And then annotating stuff so search engines can parse it better will also be more useful, since presumably they will pick up the html but not run arbitrary js while crawling.

hey uh a concern I have about the new website is the use of Ai/ML generated images. in the eyes of quite many people it's really not a good look and we probably don't want a percentage of the people coming to the site and rolling their eyes or getting a bad taste in their mouth. work should be done at some point to switch them all out out, currently from what I can tell there are 4 of these images present on the site: - Abstract HDR - Precision Machinery - Signature Dish - AI Swirling Purple Plants

this could probably work as a replacement for "Precision Machinery" https://unsplash.com/photos/a-factory-filled-with-lots-of-orange-machines-8gr6bObQLOI

Swirling purple isn't actually used. Was removed late in the design. It wasn't the machinery I was looking for in that shot necessarily. I was looking for something with super fine, small detail.

It was a struggle is find something appropriate.

this work? https://unsplash.com/photos/a-close-up-of-a-wooden-plank-on-a-beach-BipdTtwjiYs EDIT: here is the full quality version not ruined by reencoding https://images.unsplash.com/photo-1697393943650-9bdd3106ef20?fm=png&q=100&cs=origin&ixlib=rb-4.0.3&ixid=M3wxMjA3fDB8MHxwaG90by1wYWdlfHx8fGVufDB8fHx8fA%3D%3D

I wouldn't necessarily remove the AI images. We're going to be compressing a lot of them in the future… just add more images to have a smaller fraction.

agree, these should be removed

Sand is a bit un-optimal once it's scaled to the image size we need. Alhough they're saved at 2 or 3x on the test page.

Let's try to set up some generator code that automates doing the comparison encodings and metrics computation etc, and then it will be easy to switch up the images - and make a separate subpage that lets you compare way more images and using more of the screen area

yeah having all the results be generated from single source images would make switching out or adding new ones so much less of a hassle

We'll have to avoid doing that at every commit though.

Also the navigation bar used to be sticky, can you get that back?

could maybe be solved with a different scaling algorithm? unless you mean the browser side scaling which in that case things are quite a bit trickier and something less fine then sand might be needed like you suggest

No, I mean just generally. Things like sand aren't visually striking which was the thing I was going for. You have to crop in pretty tight as well. Like super tight to see the grains of sand and then it's just kind of… beige.

Also was looking for an image that compressed well for JXL

sticky or fixed?

I'd assume both? The bar staying at the top of the screen but the menu collapsing if you scroll

scroll down you mean? or have it only appear when not scrolling?

fixed + hiding when scroll?

sticky attaches to the hero at the top

Can it be made so the bar is a bit sticky in the beginning, then disappears as you scroll down, and whenever you scroll up a bit it comes back?

fixed + hiding when scroll(requires js) animation still done in css

I noticed your sizes are black instead of white. Is that just local on your dev environment?

i loaded it just now and it's white

no idea how it ended up like that in the video

iirc the CSS for the website is a bunch of duplicate stuff all overriding each other so I wouldn't be surprised if the load order ended up different when you where recording or something

are we able to setup redirects from older locations to their new equivalents? for example `https://jpegxl.info/test-page/` is now dead, it should redirect to `https://jpegxl.info/resources/jpeg-xl-test-page.html` so that old links on bug trackers and various other places aren't invalid

and pages that don't have a modern site equivalent could probably just be pointed to the old site archive

I only just realised...

The files, or at least the numbers, are swapped at the lowest settings

No, wait... This is why I shouldn't fact check a site at 2am

I know that feeling...

im making this generator and was going to fix the links back

The menu on narrow viewports needs a bit of fixing in case the menu is taller than the viewport. You cannot get to the menu items below the fold because scrolling down makes the menu disappear.

Yo I noticed the new site is up. I think it would look better if we used sentence case for the headings instead of title case. Is it cool if I make a PR for that, or does everyone disagree?

Not sure what looks best. Perhaps keep title case for the big headings (in white) and only change the smaller headings (the ones in teal)?

I think it'd be best to keep it consistent everywhere

I mean, the big headings are effectively titles while the small headings act more like a highlighted first paragraph. I think title case makes sense for the former but less so for the latter.

Ah, I understand how you're thinking now. I think that can work

I just got two reports of a broken History page on Safari, but I can't reproduce. Mine looks fine:

(Desktop Safari)

broken in what way?

seems to work fine on my end (Firefox/Gecko ESR115 based browser)

looks like the text is too low on the page compared to the timeline

I can confirm it's broken on Safari

in Chrome it looks fine though

On the JPEG vs JPEG XL umbrella comparison, my friends jxl side is oversaturated but the jpg is fine. It looks fine on my side. His browser does not support jxl and mine does. How does that comparison work? Is he being served a really bad png or something?

https://cdn.discordapp.com/attachments/967819421173289053/1283153828384083978/image.png?ex=66e1f5a0&is=66e0a420&hm=aced13279081cb32f655645dc905ba53995fa065c31b9a8c78c5283ffea72dda&

mine for comparison https://u.drkt.eu/FZhH9C.png

that comparison uses lossless webp as a fallback when jxl is not supported

so the webp file is oversaturated?

nah the webp is fine

https://jpegxl.info/ComparisonImages/guy-stevens-dEGu-oCuB1Y-unsplash.png.d1.2.7.jxl

https://jpegxl.info/ComparisonImages/guy-stevens-dEGu-oCuB1Y-unsplash.png.d1.2.7.jxl.webp

they look identical

the JPEG side uses an actual JPEG while the JPEG XL side uses a JXL with a WebP fallback

so uh that means some stuff is up to browsers doing different color handling between different formats....

He's likely mistaking the desaturated JPEG as the correct color, since the image is very saturated to start

https://jpegxl.info/ComparisonImages/guy-stevens-dEGu-oCuB1Y-unsplash.png.q84.jpeg is the jpeg

<@838222784752648192> what browser does your friend use?

But the comparison is fine on my side, neither of them looks particularly over or under saturated relatively He's on Firefox 128.0.3

Hmm, right...

what OS(es) between the both of you?

I'm on Debian 12 he's on PopOS

firefox has a tendency to just send pixels straight to the display without any color management

yeah that's what is happening here. the JPEG has a embeded ICC profile while the WebP doesn't

Yeah well it's almost certainly a him-issue so I don't care He doesn't care He only knows what a jxl is because I keep yapping at him about it

whoever encoded the WebP fallbacks forgot to specify `-metadata icc`

actually neither of them have an icc profile

so they're both just implicitly sRGB

but it's possible that firefox (at least in some version / configuration) renders the jpeg correctly (color managed to convert it to the display space) while it just sends the webp pixels straight to the display

the JPEG definitely has a icc attached

ah you're right, I have to stop relying on `identify -verbose` to check if there's a profile

so yeah that's a firefox bug, basically

it's supposed to treat untagged images as sRGB

all the lossless WebPs have to be reencoded with `-metadata icc` I guess or messed around with webpmux though just reencoding the files would probably be less effort

it's still really dumb that cwebp defaults to dropping icc

That's odd. My command line default was `cwebp -blah -blah -metadata all…`

It was really obvious on the non sRGB ones, which I specifically picked a few of.

not on pc rn to check, but apparently the default value for `gfx.color_management.mode` is still `2`, i.e. only tagged content is color managed (need to set it to `1` to treat untagged as sRGB)

huh yeah it seems like some of the WebPs do have icc profiles attached but after doing checking on random ones it seems like only the AVIF ones have profiles attached?

See image. The webp stuff is pushed way down two more years instead of at the top

ah. well I can't see to reproduce what's happening in the provided image on pretty much any browser I try such as: - older Firefox (ESR115) - Palemoon - WebKit

I prefer sentence case too, but I was trusting the marketing people here. On consistency, might consider addressing the fact a couple headings end in period.

The last time I ever talked to a marketing person about that was 10 years ago.

Honestly, it's just a matter of preference. We tested both ways and preferred the title case. We should be consistent. Periods removed. I left it on the first one though: *Smaller Files, Higher Quality, Faster Downloads.* Felt like it needed it, but if others disagree…

Also I updated one of the answers in the FAQ which had a code block and it broke the renderer: I'll undo it for now but we should fix the JS rendered (again) <@207980494892040194>

How is it going? Looking forward to such a refactor/cleanup...

it's going, I'm doing it here <https://github.com/wwww-wwww/jxl-community.github.io> gave up on go and am using elixir as usual <https://jpegxl.grass.moe>

While you're at it, can you add the zoom functionality back in? The Figma file looked like this:

There is no javascript shenanigans here, just some wacky html logic. Ideally this would be done in css, but I know nothing about it 😅 . So I wrangled html code in the .md file instead. It should work for now until somebody with more css skills implements a proper fix.

will do it in the new one

I'll leave the title case alone then and fix some other small stuff.

Metadata for the site is here. Feel free to edit before I push live later today: https://docs.google.com/document/d/1A1ISKV4NpnkmuxRroP6Z189RSj3KzdMX-iIHzCP_njY/edit?usp=sharing

the website crashes on the waterfox beta for some reason

This is now live, so any edits can now be done directly.

would be neat to have RSS feed support setup for the "Newsroom" at some point

The image examples I see here lack details. For example, I want to see any saturated thin line over a neutral background somewhere in an image. The moment I notice a desaturation in a skinny line of saturated pixels is crucial for the evaluation. The photos I see as examples would force me as a user to do the testing myself. I'm not too fond of WebP desaturation of thin saturated lines and prefer JPGs. That's a no-go for any fashion e-commerce product PDP pages. Anyway, regarding image comparison, there is this website where you can drag 2 identical images and compare them. Could the website create a similar or upgraded solution that users could use with their own photos? https://www.diffchecker.com/image-compare/

Down the road we're hoping to have a live comparison with JXL encoding in the browser, to compare against other formats. Similar to https://squoosh.app/ but that libjxl version hasn't been updated in years

I’m guessing we have the integrity to keep the other encoders up-to-date

This was mentioned up above for image comparison as well. I like that it also allows comparison to an original. https://storage.googleapis.com/demos.webmproject.org/webp/cmp/2024_09_04/visualizer.html?bimg=..%2Fclic_validation_2021_2022_2024%2Fimages%2Fcasey-fyfe-999.png&btxt=original&rimg=encoded%2Fcasey-fyfe-999.444e8q034.jxl.png&rtxt=JPEG+XL+4%3A4%3A4+effort+8&limg=encoded%2Fcasey-fyfe-999.444e6q033.avif&ltxt=AVIF+4%3A4%3A4+speed+6

Somehow, I never trust the "original" unless it says explicitly PNG loseless 😉

Nice comparator !

Where is the link to GitHub?

activated google search console for jpegxl.info, at least the top query spells it correctly 🙂

Going to go search jpeg-xl and click the link just to annoy this server

JPGXL is even more annoying

How the heck

My friend used JPXL

still think this should be the official logo

https://embed.moe/https://cdn.discordapp.com/attachments/1256302117379903498/1284874117623058493/Screenshot_2024-09-13_at_18.16.32.jxl?ex=66e837c5&is=66e6e645&hm=6d9c63b36f11f9f3fd195934e177cb000435dedd6ac0016d3dd9b90690a01187&

Since JPG is the common file extension for jpeg images, I'm not surprised that people would just type in the extension they know followed by XL.

like JP(e)GXL?

Yes, I've worked in marketing for decades and everyone just knows them as JPGs. I've even had many get confused when they hear JPEG or see something.jpeg. It happened just this year that someone asked me what a .jpeg was.

I have a friend who uses a bluejay as their avatar, took me 5 minutes of staring at the image to think "Jay" instead of their name

https://bitmovin.com/wp-content/uploads/2020/03/Do-I-look-Like-I-know-What-A-JPEG-Is-1.jpg

why can't we just use `.jxl`

im going to name my files `image.joint_photographics_experts_group` just to confuse people

Don't, you'll make that guy come back again

Many scripts are also set up to only allow up to about 5 characters or filter out any extensions longer than that so it might cause problems on some servers/software.

image.joint 😅

<:kekw:808717074305122316>

Surprise them with `.jfif`

`.jng` supremecy

Unfortunately the few people using mac often send .heif and they constantly have to send them to me because they can't be opened on Windows.

maybe affinity photo outputs weird jxls

https://embed.moe/https://cdn.discordapp.com/attachments/1256302117379903498/1284877114323107901/jpegxl.jxl?ex=66e83a8f&is=66e6e90f&hm=4e1043c2c6d1a3a73c8a367f8bd4840fa94f7158c4bdbd8e01ce1d4d1bf96de2&

No, it is just fine

when i used djxl it came out sideways

just don't use extensions, what's the point

`my_file`

The bot seems to have a very high cooldown between requests, I've seen it happen every time someone already used the command only a few minutes before

Makes sense since it's only run by <@288069412857315328> if I recall

if nobody has used it in a while it goes to sleep

i used it 8 minutes ago

with the bird-clothes pegs-spreadsheet image

It almost seems like the opposite, it tends to be very responsive and then lock up after the first request

is it a modular image?

could just be it's really slow

because jxl uses a ton of memory

hang on im going to do a test

nobody try to embed these

other than me

ok?

yeah, must just be some kind of cooldown

https://embed.moe/https://cdn.discordapp.com/attachments/1256302117379903498/1284878404646338572/Screenshot_2024-09-16_at_00.07.09.jxl?ex=66e83bc3&is=66e6ea43&hm=416e096aa38416e0e996dfae9acfc13356ab25262e19afa87ae1de9291303957&

when it sends the thinking message it already responded

nevermind?

https://embed.moe/https://cdn.discordapp.com/attachments/1256302117379903498/1284878400091066444/Screenshot_2024-09-16_at_00.07.07.jxl?ex=66e83bc2&is=66e6ea42&hm=eea5f0e624bed3a3eea7519488293882839b39ed856fd327924acbf2f792630d&

doing it again seems to fix it

Looking at the irfanview screenshot, yeah, it's modular. And that reminds me, I was going to say some stuff about the memory usage earlier

affinity photo decided to use modular for that image?

Well it's lossless

And 32bit at that

i set it to 85 quality

it's not meant to be :/

the bot only has like 100mb of memory or something like that

a 4mp image uses like 20gb of ram

Wtf lol

Are you sure?

jxlinfo.exe -v "Screenshot 2024-09-15 at 23.57.53.jxll" JPEG XL image, 2572x1906, (possibly) lossless, 8-bit RGB+Alpha num_color_channels: 3 num_extra_channels: 1 extra channel 0: type: Alpha bits_per_sample: 8 alpha_premultiplied: 0 (Non-premultiplied) have_preview: 0 have_animation: 0 Intrinsic dimensions: 2572x1906 Orientation: 1 (Normal) Color space: 4196-byte ICC profile, CMM type: "lcms", color space: "RGB ", rendering intent: 0

jxl 🤷

https://embed.moe/https://cdn.discordapp.com/attachments/1256302117379903498/1284876373382529094/Screenshot_2024-09-15_at_23.57.53.jxl?ex=66e839df&is=66e6e85f&hm=9601c29c5a79a6adcbb00ff357f2624a3e19fe7209e25ba86519c0adb2fffbb5&

Now it works?

(Embedding the original 374 kb)

A 240MP ~~8 bit~~ image was using 2.7 GB of RAM earlier on both djxl and jxl-oxide, although weirdly it didn't change at all using cropped decode or a single thread

Yeah the bot seems to fail the first time and then it works

First time has to generate the proxy image, second time just sends the link?

Like cache hit?

it always sends the link

it just doesnt until it knows it's in the cache

However decoding it to png and encoding to jxl again gives this cjxl -d 0 1.png 1.jxl JPEG XL encoder v0.11.0 4df1e9e [AVX2,SSE2] Encoding [Modular, lossless, effort: 7] Compressed to 1953.8 kB (3.188 bpp). 2572 x 1906, 13.255 MP/s [13.26, 13.26], , 1 reps, 32 threads. So I'm not sure, lossy modular?

it should update the message when it's finally in the cache

but it's just too long

because jxl modular is the slowest image format ever

Do we know if affinity photo uses libjxl

yeah it's faster

Can we optimise JXL modular or is it slow by design

No cjxl -d 0.5 -m 1 1.png 1.jxl JPEG XL encoder v0.11.0 4df1e9e [AVX2,SSE2] Encoding [Modular, d0.500, effort: 7] Compressed to 342.8 kB (0.559 bpp). 2572 x 1906, 2.883 MP/s [2.88, 2.88], , 1 reps, 32 threads. jxlinfo.exe -v 1.jxl JPEG XL image, 2572x1906, lossy, 8-bit RGB+Alpha num_color_channels: 3 num_extra_channels: 1 extra channel 0: type: Alpha bits_per_sample: 8 alpha_premultiplied: 0 (Non-premultiplied) have_preview: 0 have_animation: 0 Intrinsic dimensions: 2572x1906 Orientation: 1 (Normal) Color space: RGB, D65, P3 primaries, sRGB transfer function, rendering intent: Perceptual

Maybe compile the MA tree JIT?

How does it know it’s not lossless?

I guess the modular quantisation signalling probably gives it away

Idk, maybe Jon knows

Jon know how to tell, or Jon know each and every image?

there's no way to tell

lossy modular does XYB and it's always lossy

it will be the usual

"lossless" means nothing

Oh, and that

Doesn’t lossy modular use quantised residuals as well?

I remember Jon saying something about that

jxlinfo just says it's lossy whenever XYB is used

But for the original file it says (possibly) lossless, despite it is lossy. Just curious what confuses jxlinfo in that file

if it's not XYB, it will say it's possibly lossless 🙂

Technically I can take a terribly compressed JPEG, convert it to PNG and then convert it JXL at -d 0

I mean - how non-XYB lossy file can be produced?

That would be “lossless”

Does lossy modular force XYB?

Do not summon that .jxl.lossless guy

recompressing a lossy JPEG will produce something that is not XYB but lossy. jxlinfo will call it "possibly lossless" but you'll see by the `jbrd` box that it's an ex-jpeg

you can also in principle do lossy modular or vardct without using xyb, e.g. using ycbcr or ycocg

Can’t it assume if DCT is used it’s not lossless?

Not the case, it is containerless file

it doesn't know if DCT is used or not, that's a frame header field that is not exposed by libjxl

you can take a recompressed jpeg and strip everything except the codestream, that is still a valid file, just not reconstructible into jpeg

Like it’s a raw code stream, no header?

It is impressive 👍

I was slightly disappointed when figured that jxlinfo can't say whether the jxl is DCT or modular 😔

this could in principle be added, but it still won't tell you if it's lossy or lossless

Not a real necessity, just curiosity

Sure, it was curiosity about compressing method

There's a way to compile a libjxl that spews all kinds of verbose output — it's not in the default/release builds since that adds a lot of unncessary strings to the library, and you don't want to have a library that prints lots of stuff to stdout or stderr all the time 🙂

also I think jxl-oxide and/or jxlatte probably have a verbose output mode where they can give all kinds of details on a bitstream

You are right. I missed that jxl-oxide has precompiled binaries 🤦‍♂️

Aand: jxl-oxide.exe -I "Screenshot 2024-09-15 at 23.57.53.jxll" JPEG XL image (BareCodestream) Image dimension: 2572x1906 Bit depth: 8 bits Color encoding: Embedded ICC profile (4196 bytes) Frame #0 (keyframe) VarDCT (lossy) Frame type: Regular 2572x1906; (0, 0)

So VarDCT but no XYB, That's why jxlinfo thinks it is lossless?

Makes sense

If yes, then it seems there is a question to Affinity..

Unrelated, but you add `--with-offset` to get group info too

Do you think they use libjxl?

Or some custom implementation

I mean that they used VarDCT without XYB, not what it is meant, I believe

wait not xyb nor ycbcr? is it doing rgb vardct

That’s a thing?

Someone should check what’s in that ICC profile

does jxl-oxide say something if it's XYB or YCbCr?

rgb vardct sounds like a bad idea, but it could be just a jpeg (ycbcr) recompressed without the reconstruction data...

About XYB - yes: jxl-oxide.exe -I 1.jxl JPEG XL image (BareCodestream) Image dimension: 2572x1906 Bit depth: 8 bits XYB encoded, suggested display color encoding: Colorspace: RGB White point: D65 Primaries: P3 Transfer function: sRGB Frame #0 (keyframe) Modular (maybe lossless) Frame type: Regular 2572x1906; (0, 0)

Actually it could be

That would explain why it can’t output HDR JXL

For YCbCr too, but I dont't have jpg-in-jxl with container stripped

yeah it checks `xyb_encoded` and `do_ycbcr`

does libjxl allow creating RGB VarDCT files?

Not sure if there's a way to do that, besides recompressing RGB jpegs

It's a stretch... But what if you export in both JXL and jpeg at the same quality setting <@386612331288723469> ?

Oh actually...

Okay, so it is an actual VarDCT encoded file

What program did you use to do that?

jxlatte

It can do that?

Huh

benchmark_xl used to be able to, but most of it's debug output is broken

The ICC is RGB colorspace with `Display` and `Colour LCD` in the description

Oh, it’s the Mac internal ICC

Idk where is an appropriate channel for it, so as <@206628065147748352> is here, could you please tell me what went wrong? `jxl-oxide.exe 0905.jxll -o 0905.png` djxl produces untagged (and working) file, as it should, because original png that became 0905.jxll was untagged

The original image was a screenshot so Affinity just copied it over

by default it copies icc profile if the original jxl has one

it seems to have an ICC profile of ~4kB

`--target-colorspace srgb` will force convert to sRGB

I think there’s 2 different image

Well, not exactly. This jxl file does not have profile at all, but I also tried to decode jpg-in-jxl that has profile, and it also can't be opened by PS

ooh

jxl-oxide generates icc profile on its own

Yeah, I see that there is iCCP0, but..

not sure why photoshop says it's invalid though

Wel, PS refuses to open any file produced by jxl-oxide, it seems. Just tried `cjxl -d 0 input.png output.jxl` `jxl-oxide output.jxl -o output.png`. output.png can't be opened by PS (yes, it is just white rectangle)

Also... How did we end up here in the channel for the website? xD

😔

There's also <#1065165415598272582> if you need to find info in future

Thank you, I missed it

I have a solid theory as to why the CSS for the site is filled to the brim with duplicate classes all with slightly different values (leading to a bunch of values overriding each other). I think whatever was used to generate/edit the CSS would just append whatever changes where done to the file as entirely new classes but with the same names without deleting previous ones

Either that or each page has its own CSS and it just concatenates it

If you want I could probably go through and remove the duplicated CSS

It’s the bottom most one that’s actually applied, right)

?

I went and took a close look at some of the duplicate classes and it really looks like what you would see if you looked at a like a change journal of sequential tweaks

uh not sure I haven't checked what the load order/priority is like in browsers

though even if the most recent entries have priority it still doesn't solve the fact that any "removed" elements get inherited by the recent editions of classes

sooo yeah I'm pretty confident I've solved the "mystery" of the messy CSS

A code refactor is in progress, you can check it out here: https://discord.com/channels/794206087879852103/1256302117379903498/1283533229017665598

It's not broken, you now have to define JXL_DEBUG_AC_STRATEGY. Of course, it's only written for the encode path.

Looks like some peninsula

https://cdn.discordapp.com/attachments/1187313089612369991/1214411826545037373/Screenshot_from_2023-01-23_20-24-31.png?ex=66e8f526&is=66e7a3a6&hm=78cde4076f95909d2f6ba1048ead8abd79b33e2708478afee959f57d218b68e9&

Sexy

are you experimenting with patches, <@263300458888691714> ?

A little bit ...

I was away from my computer for 6 weeks and when I came back I deleted my old progress without recognizing the folder.

I don't know if this is already known, but the slider only shows the first image if the browser viewport is somewhat narrow

I'll explain in a bit. Have client meetings right now.

You aren't running the beta? I'm wondering if that's why I'm not seeing an issue. Maybe if people update to macOS 15 today, let us know if that fixes it

safari will always be the odd browser

also everything should be flex

I just can't figure out why I can't reproduce it in Safari.

OK, some info about the weirdness the CSS. Site was designed in Figma and built in Webflow. All the styles were set up in Webflow initially. We wanted to do all the mobile responsive stuff in Webflow to make our lives easier. All the custom code was done by hand to inject back into the Webflow pages. To work with the current styles, we exported pages so the custom code could reference them locally. The idea was that when it was moved back onto the live page, we'd get rid of the duplicate CSS as required.

As mentioned above, we though we had another week or two to go, but then has to rush it out the door to hit the Apple announcement, so we didn't have time to do any of the cleanup we thought we'd get to.

We were tracking things in Notion that needed to get done. I've moved them to a doc and created a web link out of them: https://fractionalxperience.notion.site/JPEG-XL-Community-Site-to-Do-List-6162820f128a4e7f97e4daa7abe65345

If we want to migrate this to another tool, happy to.

And as noted in the doc, I was wondering if we should use something like [Docusaurus](https://docusaurus.io/) for the second level, technical details that the marketing site points to.

Randomly, this site uses it: https://wiki.x266.mov/docs/images/JXL

(and yes, I've done a pull request to fix all the JPEG-XL references)

<@288069412857315328> are you still working on the website refactoring?

He live streamed the refactoring of the FAQ page a couple days ago. We were in a discord vc talking about the website and I think it's coming along nicely.

Nice! Looking forward to that, should make things a lot cleaner to edit, and to add new pages.

Maybe pin his repo in the chat? The more help the better I think.

I run this site, I can recommend docusaurus. Lemme look into your PR

You’re the one from av1 for dummies?

yeah!! You are familiar!! :)

That's crazy. I stumbled across the site when I was looking for examples of sites using Docusaurus.

it's quite cool how many image compression nerds are on this discord

For sure :) this is a lovely place to hang out

# My JPEG decodes differently when converted to JPEG XL! How is this lossless? JPEG to JPEG XL transcoding is always lossless. However, due to slight differences between how JPEG and JPEG XL show the image, the image may decode slightly differently. This is completely normal. The orignal JPEG specification left some wiggle room to the decoder, so you may see differences even between different JPEG decoders. Don't worry, your JPEG is still stored within the JPEG XL, and if you extract the JPEG back out, it will be the exact same.

just wrote this

Is this good?

people might get the wrong idea from "due to slight differences between how JPEG and JPEG XL treat the compressed data"

hmm maybe adding something like "when viewing it" would that part more clear?

clear and concise

more words -> more confusing

Made an edit

Ôn thế tốpic of lossless JPEG Trấnscoding, hớw well đớes ít cộmpare to DropBox’s Léptôn

Ok what the actual heck

On the topic of lossless JPEG transcoding how well does it compare to Dropbox’s Lepton?

Can we get the hyphens removed from the JPEG XL article? I’ll send in a PR

if your going to replace it then replace it with a non-breaking space

&nbsp; ?

uh I think that might be how you do it via HTML or something? I assume just using the raw unicode char would work

in 2024 it should work indeed 😄

just checked there is already a pr

https://github.com/av1-community-contributors/codec-wiki/pull/51

although not sure if they used NBSPs or standard spaces

this is how I check https://www.babelstone.co.uk/Unicode/whatisit.html though be careful because I think some programs *might* convert to normal spaces when doing copy and paste stuff

maybe we should try to make the layout engines that decide where to put line breaks more clever. If they can figure out things like not splitting between "Mr." and "Bean", they should also be able to figure out that it's better not to split between "JPEG" and "2000" or "XL".

or maybe we should rename JPEG XL so that a newline is in fact mandatory

JPEG\nXL

“Please add JPEG XL support back to Chrome”

what about windows support? we also need JPEG\r\nXL for Windows compatibility

how about `JPEG\r\n\x87\nXL`

`‡`?

(the 4-byte sequence is used within jxl container signature)

just rename the format to `ftypjxl `

Yeah for sure

Oops. No.

I was thinking a fun article to write for the site would be about how much space the average person would save by transcoding JPEGs to JXL. As a Mac user, I did this to calculate just the files in my Photos library: `find '~/Pictures/Photos Library.photoslibrary' -type f -iname "*.jpg*" -o -iname "*.jpeg*" -exec du -ch {} \; | awk '/total$/{total += $1/1024/1024} {print} END {print "Full Total:", total, "GB"}'` Everyone always rewrites these when I post, so is there a better way to do it? (Mine came to `24.2072 GB` btw. Would so love almost 5GB back).

I think "average person" is a hard statement to make personally, I know people who take pictures of everything, and people who take pictures of next to nothing.

One thing I wanted to do, was make a firefox extension that would save every single picture that I come across, then do a batch encode of them so as to make a "how much bandwidth would be saved" article

Well, someone who would be interested enough to come to the website and then check…

you know, that's actually really fair lmao

I think another point is timespan and age. Older people are less likely to take many photos, a lot of the younger people take a few dozen a day, but the older audiance have decades over the new

a few questions. what CPU do you have? and does the crash happen with Floorp for you or just the Waterfox beta?

I have noticed ESR128 based Firefox forks with restored JXL support getting strange crashes that only happen on some computers and not others so I'm trying to get some data to try and find out what's happening

current working theory with almost no data is that maybe the dynamic dispatching in Highway is causing the crash when it sees a newer CPU

as in only the tab crashes

im on apple m3 max

I know it's the tab (well more specifically whatever process is holding the tab), I just couldn't think of a shorthand way to say that so I just simplified to "crash"/"crashes"

is there a debugger

i can check logs if i can find them

If you have homebrew maybe you could try strace

Sorry, answered the wrong message

which message is that for?

also strace only works on Linux through Homebrew ``` The 4.3.23 changelog can be found at: https://github.com/Homebrew/brew/releases/tag/4.3.23 strace: Linux is required for this software. linux-headers@5.15: Linux is required for this software. glibc: Linux is required for this software. Error: strace: Unsatisfied requirements failed this build. ```

No wait it was the right one. Sorry slept much too little

wat

Thought I'd check, there are plans for a zoom setting on the image comparisons, but could it show the original when clicked/held too? I've got a friend who's adamant AVIF is better than JXL on the rooster photo, but without a baseline it's hard to make a case in either direction

Yeah, when we originally tossed around the idea, we thought having an original would be good. When we tried it out, we thought it was getting a bit too much for a landing page (at the design stage, not coding)

Then we thought maybe there was some clever way to hide it so it didn't affect the interface - like holding down the shift key shows the original

Didn't make it that far in dev obviously

Since it's a slider, my thought was clicking and holding on the image either side, or pressing on mobile to show the original, but at least on mobile that could obscure a fairly large region too

We had the slider jumping to the point if you click on the image so that would need to be overridden.

I also have to say that a photographer friend swore up and down there was something weird with my originals. I downloaded the largest versions available, in Affinity Photo cropped to the final size and saved out to PNG. He thought there were weird sharpening artifacts in them. I'm not sure what algorithm A.P. uses for the resize in the crop tool…

It wouldn't be unusual if they do some amount of sharpening during downscale, I think Photoshop also does that (or can do that, depending on settings)

I think it defaults to cubic

But you can check in the export persona

There is a dropdown of scaling modes you can select

I didn't export with it. I used the crop tool which doesn't have the modes (that I can see)

And exported the PNG at100%

I don’t think crop does scaling

Then it should not be scaling anything

Crop tool definitely does scaling.

Just set the mode to Resample

Forgot that existed

Oops

They all had to be the exact same pixel dimensions, so I thought that was easier.

Looked at the affinity website. Apparently resample doesn’t up/diwnscale, it just changes that layers assigned DPI

Odd, definitely looks like it does.

Anyway, I know someone wanted to redo them all anyway…

They were also done at the end of May, so newer cjxl's may perform better…

So I created some fallback images for the test page:

What should we do for the Distance vs Effort Page? I could do a fallback image that's the same for every single JXL. Maybe something that says "You can't see this image, use a browser that works, but the numbers below are still relevant…"

"Your browser is outdated. Switch to another that supports JPEG XL."

Your browser sucks.

Safari’s broken

"Why are you here?"

“Lousy browser”

Would it be nice to make it an SVG with a clickable link at the bottom that leads to <https://jpegxl.info/resources/supported-software.html>?

personally id go with "dont see this image? click here to download it" its a big enough crisis finding jxl files to try in say image viewer apps, situation was always 'generate your own or get lost'

if sites like photobucket simply made the files downloadable, its a good way to bypass browser support. users only need a preview, an idea of what the image is supposed to look like to decide

can't wait until we can say "Don't see this image? Update to an up to date browser like safari or firefox, or click here to download the image"

Dammit, does anyone have time to fix that today? I'm in client meetings most of the day. I was testing with THorium & Chrome. That will teach me…

Never mind, I fixed it

Yeah it works

can we get some fallback formats for browsers that don't support <:JXL:805850130203934781> yet for this? https://jpegxl.info/old/art/

We should probably migrate the art page to the new site

and get some of the new art. old is not quite impressive compared to newer attempts leveraging https://jxl-art.surma.technology/

maybe even maintain a collection of really good wallpaper-ready art? could be handy for website backgrounds in place of simple colors and css tricks

Is there a way to do that without JS? I keep using JS and everyone says you can do it just with CSS!

Why do people hate JavaScript

It destroys UX on Lynx

Hurts SEO in some cases…

It's evil

It's Turing complete, while css isn't. So js needs fancy JIT compilation in a sandboxed way, which hurts performance a bit, while css can be implemented more efficiently.

well iirc CSS can do Rule 110 using variables and counters, so it's *theoretically* Turing-complete, but yeah CSS is less complex than JavaScript and doesn't need JIT or something

using js to render the website is bad

using it to enhance a static website is fine

Can you write an infinite loop in CSS?

I've just googled it, and it seems that a user need to keep interacting with HTML (which acts as a loop) to run the automaton so it's not really Turing-complete

So HTML+ CSS is Turing complete

More like HTML + CSS + human

So like how PowerPoint is Turing complete, human required

or like https://ideas.lego.com/projects/10a3239f-4562-4d23-ba8e-f4fc94eef5c7 which requires a human to turn the handle

If people wonder how jpegxl.info looks like on Lynx

Browsers tend to have fairly performant CSS rendering engines because CSS can easily be optimized

v8 JavaScript has to be run on one thread and it's a slow, dynamic language

doing random nits and bits in JS isn't what people dislike - what people dislike is these websites that use webpack to bundle the entire site into a big JS file that renders and loads very slowly

I can't understand these stars

Like the ratings are off? Not sure what you mean.

They don't really reflect the rankings below

https://cdn.discordapp.com/emojis/1000126798161518663.gif?size=48&quality=lossless&name=marioStar

🌟

seems something wrong with the AVIF ratings: for lossy non-photo, AVIF is actually quite good, probably even better than JXL with the current encoders

also for mixed photo/nonphoto AVIF is good

if someone feels like turning that table into HTML so it's easier to edit, that would be nice. We can then also add some tooltip explanations or something to explain some of the ratings...

You would probably need a lot of CSS as well

Or is that assumed

not actually that many

you can also make it SVG to turn it interactive without requiring JS at all

What VCS does the website use?

i became unmotivated with the rewrite...

what state is it in?

is there anyone who wants to continue? It would be good if we can get the site in a cleaner and refactored state before adding new stuff...

something like 3 pages are done

With those as examples, I could try to a few more pages

so I guess there are two somewhat orthogonal things here: one is cleaning up the CSS and JS (and converting some JS things to CSS where possible), and the other is to get some simple generator working so the navigation stuff (and the footer) can be factored out so we can add new pages or adjust the menu layout without having to update all the html pages

the root template - nav header, footer is set up

I did the FAQ page so there's an example of css dropdowns and code to html generator

cool, can you get motivated to make a PR for that? 🙂

If I want to work on the site what is the best way to deploy it locally

I just do `python3 -m http.server` in the root folder, then browse to http://[::]:8000/

yeah, that or `darkhttpd` is an option

hey, can i request additions to be added to the list of supported software on the site?

sure, just make a pull request: https://github.com/jxl-community/jxl-community.github.io

https://jpegxl.info/resources/battle-of-codecs.html "General loss" should be "Generation loss"

Swear to god I fixed that already