3 ms·

Wow, this feels like the most efficient way I could possibly have ever learned how JPEG compression works. Well done! Now I wonder how color channels are added

• kreelman 5y ago
  Yep, this is a great little demo. I love these little bite-sized pieces of instruction. Well done.
• edflsafoiewq 5y ago
  Color comes from two additional "chroma planes", which are also monochrome images that are compressed the same way. Example of an image split into three planes: https://upload.wikimedia.org/wikipedia/commons/d/d9/Barns_grand_tetons_YCbCr_separation.jpg https://upload.wikimedia.org/wikipedia/commons/d/d9/Barns_gr... Often the chroma planes are stored at a smaller resolution and scaled up when decoding, since details in chroma don't matter as much as details in brightness.
• unfocussed_mike 5y ago
  Yep -- superb work and it makes it much more concrete. I was (maybe quite unusually for a CS degree at the time) taught about JPEG compression in 94/95; I've carried a sort of bare-minimum working knowledge of how it works along with me through web development and semi-pro photography, and it can be quite useful knowledge (e.g. when optimising "retina" images for the web). But I'd have loved an interactive tool like this at the time, because it is not the easiest thing to absorb.
• WithinReason 5y ago
  You have 2 chroma channels [1] at half resolution (4:2:0) or full resolution (4:4:4): https://en.wikipedia.org/wiki/YCbCr#/media/File:CCD.png https://en.wikipedia.org/wiki/YCbCr#/media/File:CCD.png It's almost always 4:2:0. Then you compress the chroma channels the same way as the luma. [1]: https://en.wikipedia.org/wiki/Chroma_subsampling#Sampling_systems_and_ratios https://en.wikipedia.org/wiki/Chroma_subsampling#Sampling_sy...