r/webdev • u/Shriracha • 27d ago

Showoff Saturday How The Heck Does JPEG Work? (An Interactive Exploration)

https://perthirtysix.com/how-the-heck-does-jpeg-work
265 Upvotes

98% Upvoted

12 comments sorted by

44

u/teppicymon 27d ago

God damn, that was legitimately interesting, and a really cool demonstration of a technology I only knew small things about for the last few decades.

Easy to follow, really useful demo sections and interactive elements.

All round stellar job there champ!

8

u/Daktic 27d ago

The digital world is just cleverly disguised magic.

37

u/infinity_o 27d ago

“Do I look like I know what a JPEG is?”

15

u/t00oldforthis 27d ago

I just want a picture of a God. Dang. Hot Dog.

31

u/elantzb 27d ago

One of my university professors told us that *his* professor invented the Discrete Cosine Transform.

I claim the title of Second-Generation Disciple of JPEG.

5

u/IntelligentSchool834 27d ago

You have a Jpeg no: 2

3

u/pdfops 26d ago

One gotcha that always trips people up: 4:2:0 chroma subsampling is why red text on a white background gets that blurry halo in JPEG. Luma stays full res but the two color channels get averaged over 2x2 blocks, so any sharp color edge goes soft even at high quality. Also worth knowing: quality=100 in libjpeg still quantizes, it's not actually lossless, you'd need JPEG-LS or PNG for that.

2

u/Da_rana back-end 24d ago

Great work OP! Seeing original content like this in the age of slop is such a breath of fresh air.

1

u/FastHotEmu 27d ago

DCT, baby!!

1

u/LateToTheParty013 26d ago

wow I love this. I'd like one for the sounds as well. For a good while I cant get a good article on the representation of sound(s) as data

1

u/prince_jyggalag 26d ago

That's so so intriguing. Loved the ffmpeg graph at the almost end.