I am using the WebP Express plugin in WordPress, and it correctly replaces elements with tags when the page loads initially. However, when I load additional content via AJAX, the newly added images remain in their original format (.jpg or .png) and are not converted to WebP.

What I have tried:

1. Manually triggering WebP Express after AJAX:

setTimeout(() => {
    document.dispatchEvent(new Event('DOMContentLoaded'));
}, 200);

2. Using apply_filters('the_content', wp_get_attachment_image(...)) in PHP:

echo apply_filters('the_content', wp_get_attachment_image($pic['ID'], 'medium_large'));

How AJAX works in my setup:

• My WordPress AJAX function (wp_ajax_loadmore_reviews) returns pre-rendered HTML, which is then appended to the page via JavaScript.

• WebP Express correctly converts images when the page is initially loaded, but does not process images appended dynamically.

My Question: How can I ensure that WebP Express processes dynamically loaded images after AJAX? Is there a way to force WebP Express to recognize and convert newly loaded images without manually modifying src attributes in JavaScript?

Any guidance would be greatly appreciated!

I am using the WebP Express plugin in WordPress, and it correctly replaces elements with tags when the page loads initially. However, when I load additional content via AJAX, the newly added images remain in their original format (.jpg or .png) and are not converted to WebP.

What I have tried:

1. Manually triggering WebP Express after AJAX:

setTimeout(() => {
    document.dispatchEvent(new Event('DOMContentLoaded'));
}, 200);

2. Using apply_filters('the_content', wp_get_attachment_image(...)) in PHP:

echo apply_filters('the_content', wp_get_attachment_image($pic['ID'], 'medium_large'));

How AJAX works in my setup:

• My WordPress AJAX function (wp_ajax_loadmore_reviews) returns pre-rendered HTML, which is then appended to the page via JavaScript.

• WebP Express correctly converts images when the page is initially loaded, but does not process images appended dynamically.

My Question: How can I ensure that WebP Express processes dynamically loaded images after AJAX? Is there a way to force WebP Express to recognize and convert newly loaded images without manually modifying src attributes in JavaScript?

Any guidance would be greatly appreciated!

• php
• ajax
• wordpress
• webp

• What does the wp_ajax_loadmore_reviews look like? It would help if we could see the JSON being returned by the AJAX call. Also, are there any other plugins in use? Have you replicated this bug with only the relevant customizations and no other plugins installed? – admcfajn Commented Feb 14 at 15:56
• 1 Thank you for your help! After further testing, I realized that WebP Express is actually working fine even without the <picture> tag. The plugin handles the conversion at the server level, so even though the HTML still shows .jpg, the browser is actually loading .webp files correctly. Since everything is working as expected, I don’t need to make any further changes. Thanks again for your time! – Sergey Pervushin Commented Feb 14 at 16:32
• 1 @SergeyPervushin: May I suggest you answer your own question? See stackoverflow/help/self-answer – hakre Commented Feb 14 at 17:25

1 Answer 1

I found that WebP Express works correctly even without the <picture> tag. The reason is that my server is running Nginx with specific rules that serve WebP images directly at the server level, so WebP Express does not need to modify the HTML.

How WebP Express Works on My Setup

• I'm using an Nginx server with custom rewrite rules that detect if the browser supports WebP and serve .webp images accordingly.
• The "Alter HTML" option in WebP Express is completely disabled, meaning the plugin does not modify the HTML to use tags.
• Even though HTML still references .jpg/.png, browsers actually receive .webp files due to server-side handling.

My Nginx WebP Rewrite Rules

# WebP Express rules
# --------------------
location ~* ^/?wp-content/.*\.(png|jpe?g)$ {
    add_header Vary Accept;
    expires 365d;
    if ($http_accept !~* "webp"){
        break;
    }
    try_files
        /wp-content/webp-express/webp-images/doc-root/$uri.webp
        $uri.webp
        /wp-content/plugins/webp-express/wod/webp-on-demand.php?xsource=x$request_filename&wp-content=wp-content
        ;
}

# Route requests for non-existing webps to the converter
location ~* ^/?wp-content/.*\.(png|jpe?g)\.webp$ {
    try_files
        $uri
        /wp-content/plugins/webp-express/wod/webp-realizer.php?xdestination=x$request_filename&wp-content=wp-content
        ;
}
# ------------------- (WebP Express rules ends here)

How I Verified This

• Checked the browser network requests (DevTools → Network → Img) - the HTML still shows .jpg/.png, but the browser actually loads .webp.
• Tested in a browser that does NOT support WebP (e.g., Safari on iPhone 8) - the server correctly serves .jpg/.png when WebP is not supported.