1. Add the img_support.js script before your cloasing 'head' tag and css styles.

2. In your css code, add 2 classes .webp and .avif before your main image container class

Example:

                    .img_container {
                        background-image: url(/img/example.jpg);
                    }
                    
                    .webp .img_container {
                        background-image: url(/img/example.webp);
                    }
                    
                    .avif .img_container {
                        background-image: url(/img/example.avif);
                    }
                

This will make the jpg, png, etc. formats load in case the browser doesn't support avif or webp.

If the browser supports WEBP but not AVIF, it will only download de WEBP image

If the browser supports AVIF, it will only download de AVIF image

WARNING: the order is important, if the browser supports avif and you add the .avif class before the .webp class, the browser will use .webp instead of .avif