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.
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.