And pray tell how much of the waiting for page is used on decoding image (vs transferring) and how much faster the image gets on the machine when it's 20% smaller on average connection?
My guess is that time saving from bandwidth decrease more than compensates for that
And if you're displaying a cached image, the bandwidth use is zero, but the decoding still happens.
When on celular, even 5g, I am pretty often below that.
Taking bike.jpg and bike-repackaged.jxl in that demo, on my Pixel 10 Pro in Firefox Nightly, the size and decoding times are:
bike.jpg - 147 kB - 10ms
bike-repackaged.jxl - 126 kB - 33ms
So, I save 21 kB, but pay 23ms.
That extra 21 kB isn't part of a new request, so when it comes to download performance, we're talking about an active response. At 3g speeds, in 23 ms you can download somewhere between 20-118 kB, so at best, it evens out.
If it's a lower end device, the decode delta increases. If it's a faster connection, the 21 kB saving matters less. If the image was cached, then I'm just paying the decode overhead.
All that to say, "I save 21 kB, but pay 23ms"? You'll save more if you stop sending your favourite web font over with your page and use the system fonts, and trim down your site's JS.
But then less stuff fits in my cache, so I'm transferring even more data.
Also, not everybody has unlimited/unthrottled data plans. I really wish websites would respect my resource tradeoff preferences at least somewhat.