test-webp

function supportsWebP() {
        if ('_result' in supportsWebP) {
            return supportsWebP._result;
        }

        // memoization
        supportsWebP._result = false;

        const canvas = document.createElement('canvas');

        if (canvas?.getContext('2d')) {
            // Try to get WebP representation
            supportsWebP._result = canvas.toDataURL('image/webp').indexOf('data:image/webp') === 0;
        }

        return supportsWebP._result;
    }

    if (document && !supportsWebP()) {
        const { classList } = document.documentElement;

        classList.remove('webp');
        classList.add('no-webp');
    }

 function supportsWebP() {
        if ('_result' in supportsWebP) {
            return supportsWebP._result;
        }

        // memoization
        supportsWebP._result = false;

        const image = new Image();
        image.src = 'data:image/webp;base64,UklGRiQAAABXRUJQVlA4IBgAAAAwAQCdASoBAAEAAwA0JaQAA3AA/vuUAAA=';

        return new Promise((resolve) => {
            image.onload = () => {
            supportsWebP._result = true;
            resolve(true);
        };

        image.onerror = () => {
            supportsWebP._result = false;
            resolve(false);
        };
       });
    }

    supportsWebP().then((result) => {
        if (document && !result) {
            const { classList } = document.documentElement;
            classList.remove('webp');
            classList.add('no-webp');
        }
    });