Durante los últimos años, siempre estuve intentando buscar el mejor plugin que permita convertir las imágenes en WordPress a formatos modernos como WEBP y, más recientemente AVIF. En la mayoría de las opciones que probé, no funcionaba correctamente para imágenes de fondo de Elementor (o cualquier imagen que esté incluida en archivos CSS.)
En otros casos, como con Webp Express, podía usar rewrite rules en servidores apache para servir correctamente las imágenes en los formatos que son compatibles con los navegadores de cada usuario de nuestra web. Sin embargo, ese plugin tiene la limitación de no funcionar bien en servidores NGINX ni LiteSpeed. Además, de no ser compatible con AVIF.
CompressX: El mejor plugin que encontré hasta ahora
Finalmente, en los últimos meses estuve usando CompressX que me está dando muy buenos resultados, permitiendo convertir y servir correctamente las imágenes en formatos modernos y optimizados. Incluso con las imagenes de fondo (imágenes provenientes de archivos css) en todo los tipo de servidores donde lo he probado (Apache, NGNIX y LiteSpeed)
Además, la interfaz es sencilla de usar. Simplemente, activamos la conversión automática, elegimos la biblioteca php que usaremos para convertir las imágenes y los formatos que queremos:
Es recomendable hacer click en «Check enviroment» para ver que versión de Imagick tenemos en nuestro servidor. Si decidimos usar Imagick, es importante tener en cuenta que las versiones inferiores a 7.x, pueden causar problemas al convertir PNGs a AVIF.
En ese caso podemos desactivar esa conversión o usar GD.
Finalmente, también podemos convertir en bulk todas las imágenes actuales del sitio.
Consideraciones al migrar el sitio con imagenes optimizadas
He notado que a veces es necesario desactivar el plugin y volverlo activar para que funcionen las redirecciones a las versiones optimizadas de las imagenes tras una migración de hosting.
¿Cómo saber si se están mostrando las imágenes optimizadas?
Al abrir las herramientas de desarrollador e ingresar a nuestro sitio, en la pestaña de red, podremos filtrar por archivos de imagen y ver su formato:
¿Cómo saber si las imagenes se están redirigiendo correctamente según la compatibilidad de los navegadores de cada usuario?
Si bien AVIF y WEBP son bastante compatibles hoy en día. Lo ideal es tener un fallback para el caso de navegadores más antiguos que son incompatibles. Este plugin lo hace automáticamente y podemos chequearlo de la siguiente manera:
Paso 1
Ingresamos a postman, creamos una cuenta si no la tenemos y creamos una nueva petición HTTP
Paso 2
Copiamos la URL de una de las imágenes de nuestro sitio y la ponemos en Postman.
Paso 3
En la parte de headers, configuramos Accept de la siguiente manera:
Para probar la compatibilidad con webp:
image/webp,image/jpeg,image/apngPara probar la compatibilidad con avif:
image/avif,image/jpeg,image/apngPara probar la compatibilidad solo con jpeg y png:
image/jpeg,image/apngPaso 4
Enviamos la solicitud y nos dirigimos a los headers de la response:
En la parte de Content-Type debemos ver el formato que especificamos en nuestra petición.
Deberíamos repetir la prueba con los 3 formatos (AVIF, WEBP y PNG/JPEG) para asegurarnos que se entrega el formato adecuado según la petición.
Este encabezado «Accept», normalmente es enviado por el navegador de cada usuario, especificando qué formatos de imágenes son compatibles con el mismo. Por lo que, con estas pruebas, podemos confirmar la correcta configuración de nuestro servidor para la compatibilidad en la entrega de imágenes para todos los usuarios.
¿Necesitas ayuda con esto?
Detectamos y solucionamos de raíz los problemas de rendimiento, errores y configuración de tu WordPress. Descubre nuestro servicio de auditoría técnica WordPress.
