Since all modern browsers support AVIF, I'd skip WEBP and just use AVIF (possibly with a fallback for JPG/PNG).
Encoding is a pain, to be sure; I ended up creating a workflow where my source would save things as PNG files (giant, but lossless) then running a avifenc (https://github.com/AOMediaCodec/libavif) to produce the avif, and trashing the PNG.
Decoding though, all browsers have support, it's great.
I don't delete my original source images, in case if I want to change the encoder parameters later, or if a newer encoder version improves quality.