Gallery not serving .webp

Hey envis,
You should upload only the webp images and add them to the galleries and other elements. I tested this on the different galleries, masonry, featured images, color section background image, blog post element, ect. There is no need to upload two versions of each image, just use the webp format directly.
Assuming that you are only uploading jpg images and then using a plugin to convert them to webp copies, you could add this code to the end of your child theme functions.php file in Appearance ▸ Editor to show the webp version if the file name and location is exactly the same, the draw back to this approach is that you have twice as many images on your server with only half being used. This also won’t rewrite CSS background images in external CSS files — only inline styles and HTML output, so if you are using CSS File Compression And Merging, or another caching plugin and have background images such as a background image in a color section or a masonry element it may not work. In my tests once I cleared the css and cache it worked for me except the gallery short code like [gallery link="file" columns="5" ids="4350,870,868,864,862"] the gallery and other elements did work.

add_filter('wp_get_attachment_image_src', function($image, $attachment_id, $size) {
    $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', get_attached_file($attachment_id));
    $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $image[0]);

    if (file_exists($webp_path)) {
        $image[0] = $webp_url;
    }

    return $image;
}, 10, 3);
//for background images
// Replace image URLs with .webp if the .webp version exists
function enfold_replace_with_webp($buffer) {
    // Replace src="...jpg|png" and url('...jpg|png') with .webp if available
    return preg_replace_callback(
        '/(?:src|url)\s*=\s*["\']([^"\']+\.(?:jpe?g|png))["\']|url\(\s*["\']?([^"\')]+\.(?:jpe?g|png))["\']?\s*\)/i',
        function($matches) {
            $original_url = $matches[1] ?: $matches[2];
            if (!$original_url) return $matches[0];

            $parsed_url = wp_parse_url($original_url);
            if (empty($parsed_url['path'])) return $matches[0];

            $img_path = $_SERVER['DOCUMENT_ROOT'] . $parsed_url['path'];
            $webp_path = preg_replace('/\.(jpe?g|png)$/i', '.webp', $img_path);
            $webp_url = preg_replace('/\.(jpe?g|png)$/i', '.webp', $original_url);

            if (file_exists($webp_path)) {
                // Return updated string (preserving whether it was src= or url())
                if ($matches[1]) {
                    return str_replace($original_url, $webp_url, $matches[0]);
                } else {
                    return 'url("' . $webp_url . '")';
                }
            }

            return $matches[0];
        },
        $buffer
    );
}

// Start output buffering early
function enfold_start_webp_buffering() {
    ob_start('enfold_replace_with_webp');
}
add_action('template_redirect', 'enfold_start_webp_buffering');

Please ensure to copy the code from the forum and not an email notification so the symbols are not converted.
Also note that your server media handling editor needs to also support webp files, mine is WP_Image_Editor_GD, which is default for WordPress:

If you are not able to directly use the webp images in your elements, this could be the cause.

Best regards,
Mike