In supported browsers, the Next-Gen Formats feature will serve images in WebP format, a new image format designed to have a smaller file size. Leap utilizes “lazy loading” in most cases to optimize images before displaying them don't the site. Lazy loading is the practice of loading an element only when it is within the visible viewport. The Leap optimization settings Set Explicit Width and Height, Next-Gen Formats, and Resize Images all depend on the “Lazy Load Images” setting:
If the image to be optimized is the LCP (“Largest Contentful Paint”) element for the site (for example, a feature or “hero” image), it will be converted to webp format without lazy loading and will have attributes such as loading="eager" and importance="high":
You can inspect the attributes and class names of images on your site by right-clicking them, then selecting “inspect” from the menu.
Potential issues and conflicts for the Next-Gen Formats setting:
If Leap was able to successfully lazy load an image element, that element will have an "ezlazyloaded" class name assigned to it:
The absence of this class name on a non-LCP image element would signify that something is preventing Leap’s ability to lazy load and optimize it.
Any plugin that is attempting to optimize site speed by lazy loading elements can conflict with Leap’s optimization efforts. One specific example would be WP Rocket’s WordPress plugin LazyLoad. The image elements of a site cannot have a non-Ezoic class name containing the word “lazy.” This check is performed by Leap to ensure that it is the only code trying to lazy load a given image:
An image element also cannot have an "onload" event attribute assigned to it, as lazy loading could potentially break site behavior.
Further reasons an image may not be converted to webp format: