How to Add AVIF Support to the Elementor Lightbox

Here is a bug that cost me more diagnosis time than it should have. I converted a client's gallery to AVIF for the file-size win, everything looked sharp on the page, and then a visitor clicked an image to zoom it. Nothing happened. The Elementor lightbox flatly refused to open the AVIF files. If you have landed here because your Elementor lightbox will not open AVIF images, this is the fix I now drop into every site that serves AVIF.

Why the Elementor lightbox ignores AVIF

Elementor decides which images are zoomable using a hardcoded list of file extensions baked into its compiled frontend JavaScript. That list reads svg|webp, alongside the usual jpg and png. AVIF was never added to it, so when the lightbox script sees a .avif source it treats it as "not an image" and skips the overlay entirely. Because the check lives inside frontend.js and frontend.min.js in the plugin folder, there is no toggle in the Elementor UI that fixes it.

The obvious move, editing those two files by hand, works for about a week. The next Elementor update overwrites both files and your AVIF support quietly disappears again.

The fix: patch the files on every load

My snippet runs on init, reads both frontend script files, and adds avif to the extension list if it is not already there. Because it checks for |avif before writing anything, it is safe to run on every request and costs nothing once the files are patched. And since it runs on every load, it automatically re-applies the patch the moment an Elementor update overwrites the originals.

add_action('init', function () {
    $plugin_path = WP_PLUGIN_DIR . '/elementor/assets/js/frontend.js';
    $plugin_min_path = WP_PLUGIN_DIR . '/elementor/assets/js/frontend.min.js';

    if (file_exists($plugin_path)) {
        $contents = file_get_contents($plugin_path);
        if (strpos($contents, '|avif') === false) {
            $patched = preg_replace('/svg\\|webp/', 'svg|webp|avif', $contents);
            file_put_contents($plugin_path, $patched);
        }
    }

    if (file_exists($plugin_min_path)) {
        $min_contents = file_get_contents($plugin_min_path);
        if (strpos($min_contents, '|avif') === false) {
            $patched_min = preg_replace('/svg\\|webp/', 'svg|webp|avif', $min_contents);
            file_put_contents($plugin_min_path, $patched_min);
        }
    }
});

How to install it

I never touch functions.php for this kind of thing. A theme update wipes it, and this patch specifically needs to survive updates, so it goes in the Code Snippets plugin where it is safe.

1. Install and activate the Code Snippets plugin.
2. Go to Snippets > Add New and paste the code above.
3. Set the snippet to run everywhere, then activate it.
4. Purge your page cache and any JS minification so the patched file is the one actually served.

Two things to check. The files inside the Elementor plugin folder have to be writable by WordPress, which they usually are. And if you run LiteSpeed Cache or similar with JS optimisation, clear it after the patch applies, otherwise the old cached script keeps hiding your AVIF images.

If you would rather not manage a snippet, the repository also ships the same logic as a small plugin zip you can upload under Plugins > Add New.

Still works in 2026

I am still running this on live sites in 2026 against current Elementor. AVIF adoption has only grown, and Elementor still has not added it to that extension list natively, so the patch stays relevant. The day they do add it, the |avif check means my snippet simply stops making changes. No harm done.

The snippet lives on GitHub: djaysan/elementor-avif-patch. Star or fork it if it saved you an afternoon.

Need a hand with your Elementor build, or an image pipeline that actually behaves? Get in touch.