Images Loaded with AJAX Not Displaying in Next-Gen Format

Hello,

Thank you for reaching out with your query.

It seems that Imagify isn’t able to update the code for images loaded via AJAX before it’s rendered. You can refer to this guide for more details: How to check if WebP image is displayed on your site.

Imagify does not automatically replace images with their WebP versions when using wp_get_attachment_image() or wp_get_attachment_image_src() during AJAX calls. However, there are a few ways to ensure that images are served in next-gen formats:

1. Direct WebP URL: You can directly reference the WebP version of the image in your AJAX response by appending “.webp” to the image filename. This way, you can directly serve the WebP format instead of the original format.
2. Rewrite Rules Method: In the Imagify settings, you can enable the rewrite rules method to deliver WebP images unless your site is on CDN/Cloudflare. This method modifies the image URLs to serve WebP versions automatically if the browser supports it.
3. Custom Function: You can create a custom function to check if a WebP version of an image exists. By getting the image source and appending “.webp” to the filename, you can conditionally load the WebP version if it exists. While Imagify handles the creation of WebP versions, implementing such custom logic would require a bit of custom coding. Unfortunately, I don’t have an example to share.

Implementing one of these methods should help ensure that images loaded via AJAX are served in the next-gen formats. Please let us know if you have any more questions or need further assistance.

Best regards,
Saransh

Hello,

Thank you for your fast response.

I created the following function which seems to be doing the job.

function get_nextgen_image($attachment_id, $size = 'full', $additional_attrs = array()) {
    // Get the image attributes for the requested size
    $image_src = wp_get_attachment_image_src($attachment_id, $size);
    $image_srcset = wp_get_attachment_image_srcset($attachment_id, $size);
    $image_sizes = wp_get_attachment_image_sizes($attachment_id, $size);
    
    // If no image is found, return an empty string
    if (!$image_src) {
        return '';
    }

    // Get the WebP version URL
    $image_webp_src = $image_src[0] . '.webp';

    // Check if the WebP version exists
    $webp_exists = file_exists(str_replace(get_home_url(), ABSPATH, $image_webp_src));

    // Prepare additional attributes
    $attr_string = '';
    foreach ($additional_attrs as $attr_name => $attr_value) {
        $attr_string .= sprintf(' %s="%s"', $attr_name, esc_attr($attr_value));
    }

    // Build the <picture> element only if WebP exists
    $image_html = '<picture decoding="async" ' . $attr_string . '>';
    
    if ($webp_exists) {
        $image_webp_srcset = str_replace(['.png', '.jpg'], ['.png.webp', '.jpg.webp'], $image_srcset);
        $image_html .= '<source type="image/webp" srcset="' . esc_attr($image_webp_srcset) . '" sizes="' . esc_attr($image_sizes) . '">';
    }

    // Fallback <img> tag
    $image_html .= '<img src="' . esc_url($image_src[0]) . '" srcset="' . esc_attr($image_srcset) . '" sizes="' . esc_attr($image_sizes) . '" width="' . esc_attr($image_src[1]) . '" height="' . esc_attr($image_src[2]) . '" alt="' . esc_attr(get_the_title($attachment_id)) . '" loading="lazy" decoding="async">';
    $image_html .= '</picture>';

    return $image_html;
}

However, am wondering if I can use any of Imagify function to check the availability of the .webp version instead of the manual approach I used in the code. Are there specific Imagify functions, hooks, or filters designed for this purpose?

thank you ,

Hello,

Thank you for sharing the function you’ve created. It looks well-constructed and should indeed serve the purpose of handling WebP images conditionally.

Currently, Imagify does not provide a dedicated public function for directly checking the existence of WebP files. The Imagify plugin primarily focuses on generating and serving WebP images based on its settings, but specific functions for checking WebP availability or paths aren’t exposed in a straightforward way.

I hope you understand.

Best Regards,
Saransh

Noted!

Thank you.