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:
- 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.
- 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.