Page Title Banner Image Issue

Hello,

We checked your issue and see that it is likely related to image optimization in the WebP format. In particular, the file Greenway-Camping-Package-title-bg.webp already shows some blurriness after conversion.
To confirm that the WebP optimization is indeed the cause, could you please test the display using the original JPG or PNG version of the image?

Kind Regards

We investigated the situation in more detail, and the issue with blurry images is related to how WordPress processes media files. By default, when resizing or cropping images, WordPress automatically applies compression. Because of this optimization, some quality may be lost even if the original file has high resolution or minimal compression.

To preserve maximum quality for all generated image sizes, please add the following code to the functions.php file of your child theme:

add_filter('jpeg_quality', function () {
    return 100;
});

add_filter('wp_editor_set_quality', function() {
    return 100;
});

After adding this code, you also need to regenerate all image sizes. You can do this using the Regenerate Thumbnails plugin.

Could you please send us your FTP access? Also, please turn off the cache on your website temporarily.

We thoroughly inspected the issue with the Page Title banner and confirmed that the main cause lies in how the image is displayed on the frontend.

At the moment, the height of the Page Title area is significantly larger than the actual height of the uploaded image. Because of this, the browser is forced to heavily stretch the image to fill the available space, and CSS properties such as object-fit: cover amplify this scaling even more.

When we temporarily disabled the CSS responsible for stretching the image
screenshot: https://monosnap.ai/file/Wvh0dXf4MukTo8WBTrcMOnbL8CvrPb
it became clear that the Page Title area is nearly twice as tall as the image itself. As a result, with such enlargement, the image inevitably loses sharpness.

To avoid this problem, there are two options:

1. Reduce the height of the Page Title banner so the image does not need to be stretched beyond its actual resolution.

2. Upload an image with a greater height, so it can properly fill the Page Title area even on screens around 1500px wide without quality loss.

Kind Regards

It’s practically impossible to achieve a high LCP score when using a background-image, because the browser cannot prioritize the loading of such images. Therefore, to maintain a good LCP, you must use an <img> tag.
However, we see that when using <img> with srcset, a reduced version of the image is loaded on smaller screen sizes, and this variant is not suitable for you.
For that reason, we can suggest a solution: disable srcset specifically for the Page Title image, so that the same image version is loaded on all screen resolutions.

add_action( 'wp', function() {
    $image_id = false;
    $page_image = get_post_meta( get_the_ID(), '_woodmart_title_image', true );

    if ( ! empty( $page_image['id'] ) ) {
        $image_id = $page_image['id'];
    }

    add_filter( 'wp_calculate_image_srcset', function( $sources, $size_array, $image_src, $image_meta, $attachment_id ) use ( $image_id ) {
        if ( $image_id == $attachment_id ) {
            return false;
        }

        return $sources;
    }, 10, 5 );
});

This ensures that one single image file is loaded across all screen sizes, preventing the browser from substituting it with a smaller, lower-quality variant.