WebP is Google's replacement for PNG. It comes in both lossy (like JPEG) and lossless (like GIF/PNG) formats. It is now supported by all major browsers, although Safari support is recent. Note that IE is no longer considered a major browser, although Edge is. Its lossy format is about 30% better than JPEG (for the same quality rating) and lossless is about 30% better than PNG (which is itself better than GIF).
AVIF is from the Alliance for Open Media (which includes Netflix, Amazon, and Google), also supporting lossy and lossless. It has lousy browser support, just Chrome and Firefox. Netflix claims that it produces superior images to JPEG at the same compression quality. While this may be correct, AVIF's lack of Safari, Edge, and mobile support make it not ready for most web applications. Maybe in five or ten years.
It may be reasonable to replace JPEGs and PNGs with WebP images. This will produce an incremental improvement. Note that for JPEGs, you have to go back to the original source image. If your camera produces JPEGs natively, you may not be able to achieve the full advantages of WebP. Because converting from JPEG to WebP will lose quality from the JPEG. That's the nature of lossy formats. They can't add quality. They only take it away.
For a certain kind of image (i.e. not a photo), an SVG can be even more efficient. But you can't really convert to SVG. You typically make them from scratch. Great for logos and things like that.
More generally, you might consider just using lower resolution images. Because images are often more detailed than they need to be for the application. WebP (and AVIF, when ready) attempt to produce smaller images with fewer compression artifacts. This makes them look better at smaller resolutions. A lossy format is often better at this than downsampling a lossless format. So if you are currently using a high resolution lossless image (e.g. PNG or GIF), you may find that a JPEG or lossy WebP version may still be more visually appealing at a smaller size.
Rainer's
KISS IT produces thumbnail images that are the same resolution as the viewport. If you have large resolution images, these thumbnails will be considerably smaller regardless of format. If you choose lossy WebP as the thumbnail format (or even JPEG), this can produce a high quality but smaller image that will load quickly on the index page. Meanwhile, you still have the full resolution (possibly lossless) version for the image pop-up. I think that Preston has an
add-on for zooming those.
As best I can tell Phoenix has always supported WebP for product images, because Phoenix does not limit product image format. Burt allowed it for store logos when he Bootstrapped that page. But I would recommend using Rainer's KISS IT rather than WebP alone. Because thumbnailing provides more of a benefit than converting to WebP. If using KISS IT, it makes sense to use WebP for thumbnails.
It's a bit misleading to talk about "more compressed". Lossless compression formats produce, on average, images that are as large or larger than the original. It's just that for most images that we actually want to display, they end up smaller. They aren't guaranteed to make things smaller (on average, they're guaranteed not). It's often better to think not about compression but about encoding. Lossless encodings can restore the original encoding. Lossy can not. For the images about which we care, either type of encoding can produce smaller but still understandable and attractive images. So we refer to them as compression encodings, even though what they really are is alternate encodings.
Additional reading (not Phoenix specific):
https://wpmudev.com/blog/best-image-for ... -gif-webp/