How to Enable Next-Gen Images with Elementor

Using Next-Gen images with Elementor is possible, but there are a few steps to ensure compatibility, especially if you’re using the <picture> tag method.

Elementor’s Gallery Module

If you frequently use Elementor’s gallery module, the best method to deliver Next-Gen formats is through the rewrite rules option(unless you use Cloudflare/CDN). This ensures that your Next-Gen images display correctly without interfering with Elementor.

Elementor Thumbnails

Elementor creates thumbnails for certain sections of your content, and these thumbnails are stored in a specific folder within your WordPress directory (/wp-content/uploads/elementor/thumbs/). By default, Imagify does not optimize this folder, so Next-Gen formats may not be available for these images.

To fix this:

1. Go to Imagify Settings and add the Elementor thumbs folder as a custom folder for optimization. This ensures that future images in this folder will be optimized and converted to Next-Gen formats.
2. If you have existing thumbnails in this folder, navigate to Media > Other Media and optimize them manually. This will apply optimization and create the Next-Gen versions for these images.

By following these steps, you can fully integrate Next-Gen images with Elementor and ensure optimal performance for your site.