Jake ArchibaldI think it's often overlooked that AVIF is also really good at flat colour & sharp edges.
Don't go straight for a lossless format just because it's the kind of image that would look bad as a JPEG.
Here's an 11kb image as an AVIF, vs JPEG XL.
So @eeeps pointed out that cjxl has a hidden 'modular' mode that fairs better for this kind of image. It's still pretty bad compared to the AVIF, but it's sharper than the previous example.
Here's the 11kb AVIF again vs the modular JPEG XL:
I generally prefer AVIF over JPEG XL for my web imagery use-cases, but this case is an extreme outlier.
My learning here is: You can throw pretty much anything at AVIF, whereas JPEG XL is more like WebP, in that you need to get a feeling for when to put it in its 'lossless' mode.
Samir@jaffathecake @eeeps well investigations score is up two points, I call that a win.
Account has movedWouldn't a PNG be the go-to for relatively flat graphics like that?
@alessandro no, that's what I'm saying - we need to get out of this old way of thinking. This would be ~60kb as a PNG. It would be 36kb as a lossless JPEG XL.
Trapper@jaffathecake I said "oh damn" out loud. Sharp as hell.
Eric Portis@jaffathecake I think this example shows a `cjxl` problem rather than a JPEG XL problem. Try forcing Modular mode, and don't be afraid to push the distance parameter, especially at 2x. https://codepen.io/eeeps/pen/zxKvROY
(AVIF might still outperform JPEG XL Modular on flat-color/hard-edged content. I have like half-a-memory of a conversation with @jonsneyers about that, after your AVIF article came out. But AVIF *definitely* outperforms VarDCT for such content).
Jon Sneyers@eeeps @jaffathecake for screen content, JPEG XL does have some good coding tools like Patches, but making an encoder that uses them effectively hasn't really been a priority yet.
This specific example though should really be served as HTML and SVG, not as any raster image format ;)
@jonsneyers @jaffathecake Turning a screenshot into an SVG is an act of re-creation, not transcoding. Similarly, it doesn't take much – a hint of texture, a particular drop shadow – for a logo or icon or illustration that looks pretty SVG-friendly to need a bitmap format to faithfully replicate. This type of content is important, and everywhere. And Modular's really good for it!
@eeeps @jaffathecake I agree with the general point though: it's no longer true that sharp edges and flat surfaces mean you have to use lossless raster formats, for web delivery. Lossy AVIF can do a good job on such images.
@jonsneyers @eeeps I'm pretty sure it'd be larger than 11kb in that case (even after brotli), given the browser logos.
You might be able to beat that by making simplified versions of the logos, but that's non-trivial compared to an image encoder.
@eeeps @jonsneyers cheers! I'll give it a spin and post an update
Scott Kellum@jaffathecake Also on my web images wishlist: progressive loading, or multiple optimized sources (like .ico) where only the resolution needed is streamed to a device. I would love for the format to handle more responsive image needs, rather than the website author.
@jaffathecake My dream is to export a full-resolution image in a single image format, embed it in an image tag, and have it render optimally on a website regardless of layout, screen size, and connection speed.
