Ya lo nombré en el artículo Cómo optimizar imágenes para web e indiqué porqué hay que considerar siempre este formato en la construcción de nuestras páginas. En este caso concretamos un poco más… Para usar imágenes WebP con Elementor en WordPress, hay varias alternativas que puedes considerar.
Contenidos
¿Qué es el formato webp?
Antes de profundizar en cada una de ellas, es importante tener en cuenta que WebP es un formato de imagen que puede comprimir imágenes hasta un 34% más que JPEG y PNG sin perder calidad. Esto significa que las imágenes WebP pueden mejorar la velocidad de carga de tu sitio web y, por lo tanto, la experiencia del usuario.
Usar un plugin de conversión de imágenes a WebP
Hay varios plugins de WordPress que pueden convertir tus imágenes existentes a WebP, como WebP Express, Optimole, Imagify, EWWW Image Optimizer… También es una funcionalidad incluida en algunos plugins de caché y optimización. Mi consejo es que pruebes varios y que elijas el que más te guste… Personalmente uso WebP Express por su sencillez y las opciones de que dispone que encuentro realmente útiles.
Una vez que hayas instalado y activado el plugin de tu elección, deberás configurar la conversión de imágenes a WebP. Esto se puede hacer en la configuración del plugin.
Habilitar la carga de imágenes WebP en el servidor
Este método forzaría la carga de todas las imágenes en webp. Se debe tener en cuenta que puede haber problemas de compatibilidad con algún navegador pero podría servir para la mayoría de los casos.
Si tu servidor web admite imágenes WebP, puedes habilitar la carga de imágenes WebP en tu sitio web. Para hacer esto, deberás agregar un código al archivo .htaccess de tu sitio web.
Este código redirigirá automáticamente a los navegadores que admitan WebP a la versión WebP de la imagen. Si el navegador no admite WebP, se debería cargar la versión JPEG o PNG de la imagen.
El código que debes agregar al archivo .htaccess es el siguiente:
# Habilitar la carga de imágenes WebP
<IfModule mod_rewrite.c>
RewriteEngine On
RewriteCond %{HTTP_ACCEPT} image/webp
RewriteCond %{REQUEST_URI} .(jpe?g|png)$
RewriteCond %{DOCUMENT_ROOT}/wp-content/uploads/$1.webp -f
RewriteRule (.+.(jpe?g|png))$ /wp-content/uploads/$1.webp [T=image/webp,E=accept:1]
</IfModule>Después de agregar el código, deberás verificar si funciona correctamente. Para hacer esto, carga una imagen en tu sitio web y asegúrate de que se cargue en formato WebP cuando inspecciones el código fuente de la página.
Usar un complemento de Elementor para cargar imágenes WebP
Uno de los complementos de Elementor más populares que te permiten cargar imágenes WebP en tu sitio web es «JetElements» de Crocoblock.
Este complemento incluye un widget de «imagen WebP» que te permite cargar imágenes en formato WebP directamente en tus páginas de Elementor. Para utilizar este widget, deberás tener el complemento JetElements instalado y activado en tu sitio web.
Espero que este artículo haya sido de ayuda y si tienes algún comentario ¡no dudes en dejarlo por aquí!