Are you wondering why the images on your site are not converting to the WebP format when using Ezoic's Leap? This article aims to address this common concern by providing detailed information on how Leap handles image optimization, particularly focusing on the use of Next-Gen Formats like WebP. You'll learn about the dependencies and settings necessary for this feature to work correctly, potential conflicts that may arise, and other factors that might be preventing images from converting to WebP. By understanding these elements, you can troubleshoot and optimize your site's images more effectively.

In supported browsers, the Next-Gen Formats feature will serve images in WebP format, which is designed to have a smaller file size. Leap employs "lazy loading" to optimize images before they are displayed on the site. Lazy loading only loads an image when it is within the visible viewport, which helps optimize performance.

The Leap optimization settings Set Explicit Width and Height, Next-Gen Formats, and Resize Images are dependent on the Lazy Load Images setting.

When the image to be optimized is the LCP (Largest Contentful Paint) element—such as a feature or "hero" image—it will be converted to WebP format without lazy loading. Such images will have attributes like loading="eager" and importance="high".

To inspect the attributes and class names of images on your site, you can right-click them and select "inspect" from the menu.

Potential issues and conflicts for the Next-Gen Formats setting:

1. If Leap successfully lazy loads an image element, it will have an "ezlazyloaded" class name. The absence of this class name on a non-LCP image suggests that something is preventing Leap from lazy loading and optimizing it.

2. Any plugin that attempts to optimize site speed by lazy loading elements can conflict with Leap’s optimization efforts. For example, WP Rocket’s WordPress plugin LazyLoad conflicts with Leap.

3. Image elements cannot have a non-Ezoic class name containing the word "lazy." Leap performs this check to ensure it is the only code trying to lazy load an image.

4. An image element cannot have an "onload" event attribute assigned to it, as lazy loading could break the site.

5. An image may not be converted to webp if the element has a "data-image" or "data-src" attribute.

6. An image may not be converted to webp if the image is in .gif format.

7. An image may not be converted to webp if the image is hosted by Cloudinary.

8. An image may not be converted to webp if the "src" or "srcset" attributes have blank values.