Cómo usar imágenes WebP con Elementor

Coincidimos en un hecho: WordPress es difícil de superar como CMS.

Y sin embargo, ¡WordPress logra superarse a sí mismo! Esto lo logra gracias a una infinidad de plugins que le otorgan una diversidad de características difíciles de imaginar.

En el caso de los plugins para construcción tenemos que hablar obligatoriamente de Elementor y Elementor Pro, su contraparte de paga.

Sigue con nosotros y aprenderás cómo usar imágenes WebP con Elementor.

Qué es Elementor

Elementor es un plugin destinado a la construcción de páginas web dentro de WordPress.

No funciona por sí solo. Necesita ser instalado sobre WordPress (que es su software de sustentación). Pero una vez instalado en este, difícilmente conseguirás otro plugin que haga lo que este puede hacer.

Es así como esas parejas perfectas… Si nunca has visto una, te la presentamos: WordPress+Elementor.

El trabajo con Elementor

Una vez que instalas Elementor, al abrir el editor de WordPress para crear una nueva entrada o una nueva página, observarás que algo ha cambiado…

Porción superior de la ventana del editor de WordPress
Porción superior de la ventana del editor de WordPress

Hay en la parte superior de la ventana un recuadro azul que te invita a «Editar con Elementor». Haciendo click en él, accedes a la pantalla de edición de Elementor:

Ventana principal del editor de Elementor
Ventana principal del editor de Elementor

Aquí vas a poder ver y disfrutar de las muy variadas opciones que Elementor te ofrece al momento de crear una página. Y si adicionalmente instalas Elementor Pro, ¡seguro te estalla la cabeza!

Elementor Pro

Es la opción de paga de Elementor.

Cuando instalas Elementor observas que hay una serie de opciones posibles, pero disponibles solo para Pro.

Es difícil que llegues a utilizar ni tan siquiera una cuarta parte de ellas en un solo sitio web, y te hablamos con propiedad.

Elementor Pro te da la capacidad de inventar y hacer lo que sea que se te ocurra en tu página web para crear una verdadera extraordinaria experiencia de usuario.

Pero dejemos por un momento este excelente plugin y concentrémonos en el uso de imágenes WebP en él. ¿Es posible? ¿Cómo le hago?

Las imágenes WebP y Elementor

El tipo de imágenes a disposición para ser usadas al momento de editar tu página web con Elementor y Elementor Pro no depende de ellos. Es una propiedad de WordPress, y es allí donde debes procurar resolverla, si tienes algún inconveniente.

Como vimos en un post anterior (Cómo subir imágenes WebP y SVG en WordPress), de forma «natural» WordPress no permite que subas imágenes en formato WebP. Ellos alegan razones de seguridad, pero en ese post ya aclaramos todo el asunto, por lo que te invitamos a leerlo.

Si aplicas las técnicas que allí sugerimos, podrás subir tus imágenes WebP a la biblioteca de medios de WordPress sin ningún inconveniente.

Una vez allí, Elementor echa mano de ellas cuando las necesites.

Una imagen habla más que mil palabras

Pasamos a explicarte con un ejemplo práctico que hicimos.

Nosotros usamos la opción de modificar el archivo functions.php en el tema hijo que usamos en nuestro WordPress. De forma que no tenemos problemas para subir imágenes en ese formato si lo requerimos.

Subimos ex profeso las siguientes 3 imágenes en formato WebP (que te regalamos para que las aproveches; fueron tomadas de Freepik.es como JPEG, escaladas a un menor tamaño con Gimp 2.0 y convertidas a WebP):

Laptop sobre hermosa mesa de madera y café a un lado
Close-up de laptop
Laptop mostrando videoconferencia

Nos fuimos al editor de Elementor y de las opciones Pro tomamos «Slides», que permite crear un carrusel de imágenes.

En el caso de Elementor es solo arrastrar el elemento que deseas agregar y soltarlo en el bloque donde quieres hacerlo. Luego lo configuras a tu gusto.

Añadimos las 3 imágenes al carrusel, las configuramos eliminando todos los elementos de texto, guardamos y publicamos.

Sin cambiar nada más, en 3 minutos, diseñamos una entrada que tiene un carrusel con 3 imágenes de 1280px de ancho cada una, pero pesan menos de 60 Kb (cada una) y va a cargar súper rápido. El resultado:

Entrada creada con Elementor

Importante tener en cuenta

Recuerda que Elementor no tiene que ver con el procesamiento de tus imágenes. Tu decides si las quieres en JPEG, PNG o WebP.

Si utilizas un compresor de imágenes como Femora Compress, obtienes el beneficio adicional de que reduces el tiempo de carga de tus páginas web en los navegadores que soporten el formato WebP, que en la actualidad ya son casi todos.

Aquellos que aún no lo soporten, echarán mano, en el momento, de las imágenes originales en JPEG o PNG, pues esas siguen estando en tu sitio web.

Lo que si te garantizamos es que si unes el poder de WordPress, la versatilidad de Elementor y la extraordinaria capacidad de compresión de imágenes de Femora Compress, tu sitio web va a volar y Google lo va a amar.

Deja un comentario