¿Te preguntas por qué las imágenes de tu sitio no se convierten al formato WebP cuando usas Leap de Ezoic? Este artículo tiene como objetivo abordar esta preocupación común proporcionando información detallada sobre cómo Leap maneja la optimización de imágenes, enfocándose particularmente en el uso de formatos de próxima generación como WebP. Aprenderás sobre las dependencias y configuraciones necesarias para que esta función funcione correctamente, los posibles conflictos que puedan surgir y otros factores que podrían estar impidiendo que las imágenes se conviertan a WebP. Al comprender estos elementos, podrás solucionar problemas y optimizar las imágenes de tu sitio de manera más efectiva.

En los navegadores compatibles, la función de Formatos de Próxima Generación servirá imágenes en formato WebP, que está diseñado para tener un tamaño de archivo más pequeño. Leap emplea "carga diferida" para optimizar las imágenes antes de que se muestren en el sitio. La carga diferida solo carga una imagen cuando está dentro del área visible de la pantalla, lo que ayuda a optimizar el rendimiento.

Las configuraciones de optimización de Leap Definir ancho y alto específicos, Formatos de Próxima Generación y Redimensionar imágenes dependen de la configuración Cargar imágenes de forma diferida.

Cuando la imagen que se va a optimizar es el elemento LCP (Largest Contentful Paint), como una imagen destacada o de "héroe", se convertirá al formato WebP sin carga diferida. Estas imágenes tendrán atributos como loading="eager" e importance="high".

Para inspeccionar los atributos y nombres de clase de las imágenes en su sitio, puede hacer clic con el botón derecho sobre ellas y seleccionar "inspeccionar" en el menú.

Posibles problemas y conflictos para la configuración de Formatos de Próxima Generación:

1. Si Leap carga una imagen de forma diferida con éxito, tendrá un nombre de clase "ezlazyloaded". La ausencia de este nombre de clase en una imagen que no es LCP sugiere que algo está impidiendo que Leap cargue de forma diferida y optimice la imagen.

1. Asegúrate de que las imágenes tengan atributos explícitos de ancho y alto configurados. Esto ayuda a los navegadores a asignar espacio para la imagen mientras se carga, mejorando la estabilidad general del diseño.

2. Inspecciona regularmente los atributos y nombres de clase de las imágenes en tu sitio. Esto se puede hacer haciendo clic derecho en una imagen y seleccionando “inspeccionar” en el menú. Busca el nombre de la clase "ezlazyloaded" para verificar que Leap haya cargado la imagen de manera diferida con éxito.

3. Evita usar otros plugins que intenten optimizar la velocidad del sitio cargando elementos de manera diferida, ya que pueden entrar en conflicto con los esfuerzos de optimización de Leap. En particular, ten cuidado con plugins como LazyLoad de WP Rocket.

4. Evita asignar nombres de clase no pertenecientes a Ezoic que contengan la palabra “lazy” a los elementos de imagen para prevenir conflictos con la carga diferida de Leap.

5. No asignes un atributo de evento "onload" a los elementos de imagen, ya que esto podría interrumpir la carga diferida y afectar negativamente el comportamiento del sitio.

6. Ten en cuenta los atributos y condiciones específicos que pueden evitar que las imágenes se conviertan al formato WebP. Estos incluyen:

   • Presencia de atributos "data-image" o "data-src"
   • Imágenes en formato .gif
   • Imágenes alojadas por Cloudinary
   • Atributos "src" o "srcset" vacíos

Siguiendo estas mejores prácticas, puedes asegurarte de que la funcionalidad de formatos de nueva generación y la carga diferida funcionen de manera óptima para mejorar el rendimiento de tu sitio.