I have a thumbnail resizer that varies the output on the basis of the accept header value, to invariably serve webp instead of JPG or PNG.

I did not get great results from AVIF but I am good with webp.

The trick to it is that if a JPG is requested then you can serve whatever format you like so long as the browser can read it. It is the image header that is read, not the file extension.

To get the colours right I do things with the profile so that everything can be done in Adobe with it working out alright on all devices with sRGB assumed.

I use VIPS to achieve this and in a resize for a thumbnail I go from the big originals supplied by the artist, use the VIPS resize algorithm, turn off colour sub sampling for small thumbnails, selectively trimming the whitespace.

By going from a big JPG to a smal webp I am not using an intermediate step of a small JPG that gets converted. By doing the resize and format conversion in one hit I get better image quality and better compression.

I use a commercial CDN to access my origin server which has its own cache. This is really fast on an empty cache, and all the headers are stripped away with the images served as immutable.

Bandwidth is not always the bottle neck. I go for image quality and serve images at 1.5x pixels to make them always Retina-ish as most people seem to have 1.5x pixels on their screens these days, for example a 1920 Full HD shows up as 1280 in the nerd stats.

If a browser has the data saving flag on then I respect that and crank up the compression. The images look fine but they are 20% the size of the JPG.

If someone right clicks and saves an image it actually goes back to the server to get the JPG rather than a webp.

I make the JPGs special too by using the Mozilla JPEG encoder. This is the one Mozilla wrote for Instagram. The file sizes are smaller, however, the image quality is where it is at, the look up tables are designed for high DPI digital screens, not analog CRTs. Hence better.

Even though my JPG optimiser is awesome I am not interested in legacy formats, I have got my nginx proxy serving and CDN dialled in. As mentioned, bandwidth is not the problem for people on fast connections and image quality is a much more interesting goal.

The thing about removing defects in images is that nobody notices. I did some tests with people where one page had the blurry thumbnails and the other had the crisp and vibrant thumbnails. It only works subliminally, with more clicks. The untrained eye does not have the comparison to make, but they might click through that bit more.

Along the way I also learned that there is no such thing as a quality setting on a JPG image. It is not part of the file specification. But if exporting to JPG you expect that quality slider. Really you need to have the fine control VIPS or MozJPEG gives you over the colour encodings and look up table.

I am afraid to say that these image optimisers that fiddle around with headers to shave a few bytes are a waste of time. On your server you need to keep control of your images and just keep the originals you need in highest quality, with nginx/VIPS and a CDN serving modern formats that look better and reduce bandwith not just with image format choice but also doing the 'all in one resize and convert' and serving cookieless from a CDN.