12 ms·
JPEG Compression
- Beatlyze 7mo agoThanks for the sharing
- 7777777phil 7mo agoAlready posted here earlier: https://news.ycombinator.com/item?id=47376119 https://news.ycombinator.com/item?id=47376119
- NSPG911 7mo agoThe post you linked to was made after this post.
- 7777777phil 7mo agomy bad, I just saw 2 hours ago on this one - either way they could be merged
- vinhnx 7mo agoI think my submission about this post was selected to "second-chance" pool by HN Moderators. Hence it's being shown again. Thanks for the heads up!
- jbverschoor 7mo agoApplication error: a client-side exception has occurred (see the browser console for more information).
- tomalaci 7mo agoI usually have a script/alias cmd to automatically convert images to webp. The webp format has pretty much replaced jpg/jpeg (lacks transparency/alpha support) and png (no compression) formats for me. There is also AVIF format which is newer and better but it needs to still mature a bit with better support/compatability. If you are hosting images it is nice to use avif and fallback to webp.
- lifthrasiir 7mo agoIt is not that trivial, because there are tons of existing JPEG files and lossy recompression costs quality. (PNG does get replaced primarily because lossless WebP is kinda a superset of what PNG internally does.)
- Zardoz84 7mo agoJust re-encode it to Jpeg XL without loss of quality, and use less space.
- adzm 7mo agoThis is probably the neatest feature of JPEG XL. Although, creating a thumbnail by literally truncating the image bytestream is a close second in 'neat' factor.
- krick 7mo agoOn your last point: I find it super annoying when both lossy and lossless codecs have the same name, and, more importantly, file extension. I get it that internally they are "almost the same thing", just with one extra step of discarding low-impact values, but when I see a PNG/FLAC file I know, that if the file was handled properly and wasn't produced by Windows clipboard or something, it is supposed to represent exactly the original data. When I see JPEG/MP3, I know that whatever it went through, it is not the original data for sure. When I see WEBP, I assume it's lossy, because it's just how it's used, and I cannot just convert all my PNG files to a newer format, because after that I won't be able to tell (easily) which is the original and which is not.
- lifthrasiir 7mo agoAh, in that case you would be more annoyed to learn that lossy WebP and lossless WebP are completely distinct. They only share the container format and their type codes are different.
- 7mo ago
- NooneAtAll3 7mo ago> Application error: a client-side exception has occurred (see the browser console for more information). seems like website doesn't work without webgl enabled... why?
- maxloh 7mo agoThey use 3D graphs to show the Math.
- account42 7mo agoThat doesn't mean that it's a reasonable requirement for showing anything at all.
- Tempest1981 7mo agoIt is a nicely done interactive page, if you can get it to work.
- NooneAtAll3 7mo agoit's a blogpost there is no need for gpu to show text to read
- danwills 7mo agoHaving played a bit with Discrete FFT (with FFTW on 2D images in a Shake plugin we made at work ages ago) makes the DCT coefficients make so much more sense! I really wonder whether the frequency-decomposition could happen at multiple scale levels though? Sounds slightly like wavelets and maybe that's how jpeg2000 works?.. Yeah I looked it up, uses DWT so it kinda sounds like it! Shame it hasn't taken off so far!? Or maybe there's an even better way?
- fleabitdev 7mo agoThe discrete wavelet transform (DWT) compresses an image by repeatedly downscaling it, and storing the information which was lost during downscaling. Here's an image which has been downscaled twice, with its difference images (residuals): https://commons.wikimedia.org/wiki/File:Jpeg2000_2-level_wavelet_transform-lichtenstein.png https://commons.wikimedia.org/wiki/File:Jpeg2000_2-level_wav.... To decompress that image, you essentially just 2x-upscale it, and then use the residuals to restore its fine details. Wavelet compression is better than the block-based DCT for preserving sharp edges and gradients, but worse for preserving fine texture (noise). The DCT can emulate noise by storing just a couple of high-frequency coefficients for a 64-pixel block, but the DWT would need to store dozens of coefficients to achieve noise synthesis of similar quality. The end result is that JPEG and JPEG 2000 achieve roughly the same lossy compression ratio before image artefacts show up. JPEG blurs edges, JPEG 2000 blurs texture. At very low bitrates, JPEG becomes blocky, and JPEG 2000 looks like a low-resolution image which has been upscaled (because it's hardly storing any residuals at all!) FFmpeg has a `jpeg2000` codec; if you're interested in image compression, running a manual comparison between JPEG and JPEG 2000 is a worthwhile way to spend an hour or two.
- Cold_Miserable 7mo agoI found a jpeg2000 reference PDF somewhere. It may as well have been written in Mandarin. I got as far as extracting the width and height. Its much more advanced than jpeg. Forget about writing a decoder.
- meindnoch 7mo ago
- bambax 7mo agoSo the idea behind JPEG is the same as behind MP3: we filter out what we don't perceive. I wonder if other species would look at our images or listen to our sounds and register with horror all the gaping holes everywhere.
- masklinn 7mo agoGaping holes seems unlikely, more loss of detail or shifted colors. You can experience something like that by using plugins which simulate CVD / color blindnesses.
- Simran-B 7mo agoMy dog doesn't react to familiar voices over the phone at all. The compression and reproduction of audio, while fine for humans, definitely doesn't work for her animal ears.
- autoexec 7mo agoHave you tried it with uncompressed audio? Have all the times when your dog could recognize your voice also been times when you were within smelling range?
- toast0 7mo agoIt's pretty hard to avoid uncompressed audio. Even if it's PCM, there's almost always a lowpass filter, either explicitly in the input/output processing, by the sampling rate, or from the physical limits of the mic and speaker. Everything is tuned for human audible range, so dogs will miss out on the higher frequency stuff. Humans did ok with POTS@8kHz with a 300-3400Hz band pass filter though. The internet says dog hearing goes up to ~ 60 kHz; most audio equipment tuned for humans won't go anywhere near that, but probably cleanly carying high frequency up to the limit of the equipment would be better than psychoacoustic compression tuned for humans.
- Gigachad 7mo agoCould also be the speaker and volume.
- tmilard 7mo agoThanks for the sharing : I now understood more how sampling of image works. And going from RGB to lunimesence+chroma works. interesting and usefull
- chromakode 7mo agoThe DCT is a cool primitive. By extracting the low frequency coefficients, you can get a compact blurry representation of an image. This is used by preload thumbnail algorithms like blurhash and thumbhash. It's also used by some image watermarking techniques to target changes to a detail level that will be less affected by scaling or re-encoding. I made a notebook a few years back which lets you play with / filter the DCT coefficients of an image: https://observablehq.com/d/167d8f3368a6d602 https://observablehq.com/d/167d8f3368a6d602
- meindnoch 7mo agoWhat would happen if the Cr and Cb channels used different chroma subsampling patterns? E.g. Cr would use the 4:2:0 pattern, and Cb would use the 4:1:1 pattern.
- pornel 7mo agoIt is supported in JPEG! It can reduce color bleeding along the axis that each chroma channel controls. For example, if you make sharp Cr and low-res Cb, you'll get sharper red edges with some yellow bleeding instead of completely blurry red edges if Cr was subsampled.
- dipflow 7mo agoWhenever I see those 'blocky' artifacts on a low-quality image, I used to just think of it as 'bad tech.' After reading this, it's cool to realize you're actually seeing the 8x8 DCT grid itself. You're literally seeing the math break down because there wasn't enough bit-budget to describe those high-frequency sine waves. It’s like looking at the brushstrokes on a digital painting.
- netsharc 7mo agoThe default implementation of the decoding adds the artifacts. This tool uses more clever math to replace what's missing: https://github.com/victorvde/jpeg2png https://github.com/victorvde/jpeg2png
- axiolite 7mo agoIt just blurs out the details. I'd rather have a sharp image with artifacts.
- pxndxx 7mo agoThe details were destroyed long ago by the poor compression, you aren't getting them back either way.
- axiolite 7mo agoYou're talking utter nonsense. Get a picture of grass, save it as a JPEG at 15% quality... It still looks like grass. Then run it through jpeg2png... The output looks like a green smear. You might not even be able to tell that it's supposed to be grass. jpeg2png just blurs the hell out of images. Here's a side-by-side: https://ibb.co/99C0F34d https://ibb.co/99C0F34d
- crazygringo 7mo agoWhy? You're not seeing the actual details either way. The blurred version feels honest -- it's not showing you anything more than what has been encoded. The sharp image feels confusing -- it's showing you a ton of detail that is totally wrong. "Detail" that wasn't in the original, but is just artifacts. Why would you prefer distracting artifacts over a blurred version?
- petercooper 7mo agoI've been working on a pure Ruby JPEG encoder and a bug led me to an effect I wanted. The output looked just like the "crunchy" JPEGs my 2000-era Kodak digital camera used to put out, but it turns out the encoder wasn't following the zig-zag pattern properly but just going in raster order. I'm now on a quest to figure out if some early digital cameras had similar encoding bugs because their JPEG output was often horrendous compared to what you'd expect for the filesize.
- Gigachad 7mo agoQuite a lot of hardware devices have broken encoders. I noticed just how inconsistent it is if software will tolerate invalid files or work around it. Seems these days a there’s more of a preference to outright refuse invalid files since they could be exploit attempts.
- petercooper 7mo agoThe interesting thing about the situation I mentioned is that while the encoding algorithm was wrong, the actual output was valid JPEG that simply didn't look quite visually correct. But you're right, invalid encoding can be a problem too, and I have noticed during testing that a lot of decoders are quite forgiving of it.
- Gigachad 7mo agoAh yeah that is an interesting case. In my situation, a thermal camera I got was inserting an invalid frame at the start which likely got used by their proprietary program to store data. VLC would view it but most of Mac/iOS would refuse to play the video until I used ffmpeg to delete the invalid frame.
- krackers 7mo agoCan you post a screenshot comparison? I'm curious what these "crunchy jpegs" look like
- 7mo ago
- vanderZwan 7mo agoThis is a really great article, and I really appreciate how it explains the different parts of how JPEG works with so much clarity and interactive visualizations. However, I do have to give one bit of critique: it also makes my laptop fans spin like crazy even when nothing is happening at all. Now, this is not intended as a critique of the author. I'm assuming that she used some framework to get the results out quickly, and that there is a bug in how that framework handles events and reactivity. But it would still be nice if whatever causes this issue could be fixed. It would be sad if the website had the same issue on mobile and caused my phone battery to drain quickly when 90% of the time is spent reading text and watching graphics that don't change.
- lelandfe 7mo agoIt looks like there's some requestAnimationFrame call going on more than once per second. It's definitely an energy intensive tab. But for reference, keeping CNN.com open is more than double that memory pressure on my 5 year old Mac laptop, and it handles both fine. Do your fans really kick in for heavy sites?
- toast0 7mo agohttps://lite.cnn.com/ https://lite.cnn.com/ is the only version you should load :p
- vanderZwan 7mo agoI have an 8 year old laptop that works fine except as long as I don't bother with sites like CNN.com. Heck, I even have a 13 year old laptop that works fine on most sites. Absurd ad-tech and tracking technology is not a motivation for me to upgrade but to avoid badly coded sites.
- lelandfe 7mo agoHear hear.
- Gitechnolo 7mo agoI share this frustration. It's ironic that an article explaining compression and efficiency requires so much client-side overhead. I've been experimenting with a 'Zero-Framework' approach for a biotech project recently, precisely to avoid this. By sticking to Vanilla JS and native APIs (like Blob for real-time PDF generation), I managed to keep the entire bundle under 20KB with a 0.3s TTI. We often forget that for users on legacy devices or unstable 3G/Edge connections, a 'heavy' interactive page isn't just slow, it's inaccessible. Simplicity shouldn't just be an aesthetic choice, but a core engineering requirement for global equity.
- qy-mj 7mo ago[flagged]
- Alen_P 7mo agoReally enjoyed this. It's easy to forget how much engineering went into JPEG. The explanation of compression and quality tradeoffs was clear without oversimplifying. Impressive how well the format still holds up today. Curious how you think it compares to newer formats like AVIF or WebP in everyday use.
- vmilner 7mo agoThe weirdest thing to me is that the quantisation matrix isn’t symmetrical in the top left to bottom right diagonal.
- mdavid626 7mo agoJPEG still rules the world. Many new alternatives were developed, none of them really that much better than JPEG.
- atiedebee 7mo agoA lot of them are better in many areas. JPEG is just good enough (tm)
- yboris 7mo agoJPEG XL is a superior replacement for JPEG. It is better in basically every way to JPEG.
- jfoster 7mo agoExcept compatibility, but the biggest gap is browser support, which is in the process of getting closed. Chrome has shipped JXL support behind a flag. Firefox are in the process of implementing support. In Chrome you can enable JXL from here: chrome://flags/#enable-jxl-image-format You can track Firefox progress from here: https://bugzilla.mozilla.org/show_bug.cgi?id=1539075 https://bugzilla.mozilla.org/show_bug.cgi?id=1539075
- GuB-42 7mo agoThere is much better than JPEG, however, because still images are not really a problem in terms of bandwidth and storage, we just use bigger JPEGs if we need more quality. The extra complexity and breaking standards is not worth it. This is different for video, as video uses a whole lot more bandwidth and storage, it means we are more ready to accept newer standards. That's where webp comes from, the idea is that images are like single frame videos and that we could use a video codec (webm/VP8) for still images, and it will be more efficient than JPEG. That's also the reason why JPEG-XL is taking so long to be adopted. Because efficient video codecs are important, browsers want to support webm, and they get webp almost for free. JPEG-XL is an entirely new format just for still images, it is complex and unlike with video, there is no strong need for a better still image format.
- 7mo ago
- Paulo75 7mo agoThe part about green getting 58.7% weight in the luminance calculation is one of those details that seems arbitrary until you realize it's literally modeled on the density of cone cells in the human retina. The whole algorithm is basically a map of what human eyes can't see.
- fuoqi 7mo ago>it's literally modeled on the density of cone cells in the human retina It's related to it, but not "literally modeled" on it. This number is from experiments where people are asked to equalize perceived brightness of two lights with different colors. The results are than averaged out and interpolated using polynomials to create a color model [0]. [0]: https://en.wikipedia.org/wiki/Color_model https://en.wikipedia.org/wiki/Color_model
- tehjoker 7mo agoMaybe it's because I've read a few pieces on JPEG before so I have some prior knowledge, but I was looking to review this and this presentation was one of the clearest I've seen. Good job!
- 7xgames 7mo ago[flagged]
- Zamicol 7mo agoVery impressive work. Well done on the blog. This reminds of of the sort of work Nayuki does: https://www.nayuki.io https://www.nayuki.io
- greenavocado 7mo agoI would love to see this document extended to explain the optional arithmetic coding in JPEG
- momojo 7mo agoI've seen many a JPEG explainer, but this one wins for most aesthetic. The interactive visuals were also nice. My only criticism is the abrupt ending; should have concluded with the "now lets put it all together" slider.
- j2kun 7mo agoBeyond the content, I have to say I love the aesthetic vibe of this website.
- Babkock 7mo ago> Application error: a client-side exception has occurred (see the browser console for more information). Wtf? I can't read your blog because I use Qutebrowser?
- aanet 7mo agoJust a lil comment to say that the blog is impressive -- the aesthetics, the explanations, the visuals -- all look great. Kudos.
- vismit2000 7mo agoThe Unreasonable Effectiveness of JPEG: A Signal Processing Approach - https://www.youtube.com/watch?v=0me3guauqOU https://www.youtube.com/watch?v=0me3guauqOU
- account42 7mo ago> Application error: a client-side exception has occurred (see the browser console for more information). OK, but what does this have to do with JPEG compression.
- Sammapix 7mo ago[dead]