Tutoriales WordPress

Cómo Usar Imágenes WebP en WordPress (3 Métodos)

¿Desea utilizar imágenes WebP en tu blog de WordPress?

Las imágenes WebP son un formato de imagen moderno que ofrece una mejor compresión de la imagen reduciendo el tamaño del archivo. Esto hace que su sitio web cargue más rápido y ahorre ancho de banda.

En este artículo, le mostraremos cómo utilizar fácilmente las imágenes WebP en WordPress.

¿Qué es WebP y por qué usar imágenes WebP en WordPress?

WebP es un nuevo formato de archivo para imágenes que se utiliza en la web. Al utilizar el formato de imagen WebP, sus imágenes serán un 25-34% más pequeñas en tamaño de archivo que PNG y JPEG sin perder calidad.

Si las imágenes ralentizan su sitio web, convertirlas al formato WebP puede mejorar las puntuaciones de las pruebas de velocidad de carga de sus páginas.

Dado que WebP es un nuevo formato de archivo, todavía no es compatible con todos los navegadores. Sin embargo, la mayoría de los navegadores modernos como Google Chrome, Firefox y Microsoft Edge son compatibles con las imágenes WebP.

¿Debe utilizar imágenes WebP en WordPress?

Las imágenes WebP pueden ayudarle a acelerar su sitio web de WordPress. Es una mejor práctica recomendada para ser utilizada junto con un plugin de caché de WordPress, CDN, y más.

Por defecto, WordPress no soporta imágenes WebP y al subir una imagen WebP aparecerá el siguiente error.

Para solucionarlo, tendrás que utilizar un plugin de compresión de imágenes para convertirlas al formato de imagen WebP. Seguirás subiendo tus imágenes en los formatos de archivo soportados por WordPress, como PNG, JPEG y GIF, para que puedan ser utilizadas como copia de seguridad.

Si su sitio utiliza muchas imágenes, y éstas están ralentizando su blog de WordPress, entonces debería considerar definitivamente el uso de imágenes WebP.

A continuación le mostramos cómo utilizar imágenes WebP en WordPress. Le mostraremos varios métodos, para que pueda elegir el que mejor le funcione:

Método 1: Usar imágenes WebP en WordPress con EWWW Optimizer

El plugin EWWW Image Optimizer es uno de los mejores plugins de compresión de imágenes de WordPress que le permite optimizar sus imágenes de WordPress. También soporta imágenes WebP y puede mostrarlas automáticamente en los navegadores compatibles.

Lo primero que debe hacer es instalar y activar el plugin EWWW Image Optimizer. Para más detalles, consulte nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, vaya a la página Settings » EWWW Image Optimizer para configurar las opciones del plugin. Te aparecerá un asistente de configuración, pero puedes hacer clic en el enlace “I know what I am doing” (Sé lo que estoy haciendo) para salir del asistente.

En la siguiente pantalla, verás un montón de opciones de plugins. Desplácese hacia abajo y marque la casilla junto a la opción ‘WebP Conversion‘.

Después de eso, haga clic en el botón Save Changes (Guardar cambios) para almacenar su configuración.

A continuación, debe desplazarse hasta la sección de WebP Conversion. El plugin le mostrará ahora algunas reglas de reescritura con una imagen de vista previa en rojo.

Tienes que hacer clic en el botón “Insert Rewrite Rules” (Insertar Reglas de Reescritura), y el plugin intentará automáticamente insertar estas reglas de reescritura en tu archivo .htaccess.

Si el plugin consigue añadir esas reglas, la vista previa de la imagen roja se convertirá en verde con el texto ‘WebP’.

A veces, el plugin puede no ser capaz de insertar las reglas. En ese caso, tienes que copiar las reglas de reescritura de la página de configuración del plugin y pegarlas en la parte inferior de tu archivo .htaccess manualmente.

Una vez que haya terminado, vuelva a la página de configuración del plugin y haga clic en el botón Save Changes (Guardar cambios) de nuevo. Si la imagen de previsualización se vuelve verde, significa que has habilitado con éxito la entrega de imágenes WebP en tu sitio de WordPress.

Alternativamente, puede elegir entre los métodos JS WebP Rewriting o <picture> WebP Rewriting como sus opciones de entrega WebP. Estos son un poco más lentos que el método .htaccess, pero harán el trabajo.

Convertir en masa sus imágenes antiguas a la versión WebP

El Optimizador de Imagen EWWW le permite convertir fácilmente sus archivos de imagen previamente subidos a imágenes WebP. Simplemente vaya a la página Medios » Biblioteca y cambie a la vista de lista.

A continuación, debe hacer clic en el botón Screen Options (Opciones de pantalla) y cambiar el “Number of items per page” (Número de elementos por página) a 999. Si tiene más de 1000 imágenes, esas imágenes aparecerán en la siguiente página.

De este modo, podrá seleccionar rápidamente un gran número de imágenes para su optimización masiva. A continuación, haga clic en la casilla Select All (Seleccionar todo) de la parte superior para seleccionar todas las imágenes.

A continuación, haga clic en el menú desplegable de Bulk Actions (Acciones masivas) y seleccione la opción de Bulk Optimize (Optimización masiva). Finalmente, haz clic en el botón Apply (Aplicar).

En la siguiente pantalla, el plugin te dará una opción para omitir la compresión de las imágenes y sólo convertirlas a WebP. Puedes marcar esta opción si tus imágenes ya están optimizadas.

Después de eso, haga clic en el botón ‘Scan for Unoptimized Images‘ para continuar. El plugin le mostrará entonces el número de imágenes que ha encontrado, por lo que puede hacer clic en el botón Optimize (Optimizar) para continuar.

Sus imágenes serán ahora optimizadas, y el optimizador EWWW generará versiones WebP para sus imágenes.

Probar la entrega de su imagen WebP

Una vez que haya optimizado sus imágenes, puede ir a una entrada del blog o a una página que contenga varias imágenes. Pase el ratón por encima de cualquier imagen y haga clic con el botón derecho para abrir la imagen en una nueva pestaña.

Esto abrirá la imagen en una nueva pestaña del navegador, y podrás ver que tiene una extensión .webp en la barra de direcciones.

Si el plugin no puede servir la imagen webp, entonces puede volver a la página de configuración del plugin. Desde aquí puede cambiar la opción de entrega de WebP a los métodos ‘JS WebP Rewriting’ o ‘<picture> WebP Rewriting’.

Método 2: Usar imágenes WebP en WordPress con Imagify

Imagify es un plugin de optimización de imágenes para WordPress creado por la gente detrás de WP Rocket, uno de los mejores plugins de caché para WordPress. Te permite optimizar y convertir fácilmente las imágenes al formato de imagen WebP.

Lo primero que tienes que hacer es instalar y activar el plugin Imagify. Para más detalles, vea nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.

Después de la activación, debe visitar la página de Ajustes » Imagify para configurar los ajustes del plugin. Desde aquí, haga clic en el botón “Crear una clave API gratuita” para continuar.

Se le pedirá que introduzca una dirección de correo electrónico, después de lo cual puede comprobar su bandeja de entrada para un correo electrónico que contiene su clave de API. Copie y pegue la clave en la página de configuración del plugin y haga clic en el botón Save Changes (Guardar cambios).

A continuación, tienes que desplazarte hasta la sección de Optimization (Optimización). Allí tienes que marcar las opciones junto a “Create webp versions of images” (Crear versiones webp de las imágenes) y “Display images in webp format on the site” (Mostrar imágenes en formato webp en el sitio).

A continuación, puede elegir entre dos métodos de entrega para mostrar imágenes WebP en WordPress. El primero es el método .htaccess, y el segundo es mediante el uso de la etiqueta <picture>.

El método .htaccess es más rápido, pero no funciona si está utilizando un servicio CDN. El método de la etiqueta <picture> también funciona con CDNs, pero puede romper algunos temas de WordPress.

Puedes elegir cualquiera de los dos que funcione bien para tu sitio. Después de eso, haga clic en el botón ‘Save & go to bulk optimizer‘ en la parte inferior.

Esto le llevará a la página Media » Bulk Optimization. El plugin comenzará a optimizar automáticamente todas sus imágenes de WordPress en segundo plano.

Si tiene muchas imágenes, esto puede llevar un tiempo. No se preocupe, puede cerrar la página y volver a ella más tarde porque el cierre de la página no detendrá el proceso de optimización de las imágenes.

Probando sus imágenes WebP en WordPress

Una vez que la optimización está hecha, puede visitar una página o post que contenga algunas imágenes. Lleve el ratón a una imagen y luego haga clic con el botón derecho para seleccionar “Abrir imagen en una nueva pestaña”.

Esto abrirá la imagen en una nueva pestaña del navegador, y podrás ver la extensión .webp en la barra de direcciones.

Método 3: Usar imágenes WebP en WordPress con SG Optimizer

Este método se recomienda si usted es un usuario de SiteGround.

SiteGround es una de las mejores empresas de alojamiento de WordPress. Ofrecen un plugin gratuito SG Optimizer a sus usuarios que te permite optimizar el rendimiento de tu WordPress. También incluye la opción de optimizar las imágenes de WordPress.

En primer lugar, es necesario instalar y activar el plugin SG Optimizer.

Tras la activación, el plugin añadirá un nuevo elemento de menú en su barra lateral de administración llamado ‘SG Optimizer’. Al hacer clic en él, se accede a la página de configuración del plugin.

Desde aquí puedes activar la configuración de la caché si quieres utilizar el sistema de caché incorporado de SiteGround.

Después de eso, puedes cambiar a la pestaña de Media Optimization (Optimización de Medios) y activar la opción “Generate WebP Copies of New Images” (Generar Copias WebP de Nuevas Imágenes).

Debajo de eso, verás la opción de “Bulk Generate WebP Files” (Generar archivos WebP en bloque). Al hacer clic en ella, se empezarán a generar copias WebP de todos los archivos de imagen de la biblioteca multimedia de WordPress.

Una vez terminado, su sitio de WordPress comenzará a servir imágenes WebP.

Probando las imágenes WebP en SG Optimizer

Para ver si su sitio web está sirviendo imágenes WebP, necesita abrir una página en su sitio con algunas imágenes.

Después, haga clic con el botón derecho y seleccione la herramienta de inspección. Esto abrirá la consola del desarrollador donde necesita cambiar a la pestaña de Red.

Desde aquí, haz clic en la pestaña ‘img’ y luego recarga la página (CTRL+R en Windows y Comando+R en Mac). A medida que tu sitio web se recargue, verás todas las imágenes cargadas en la consola de desarrollador.

 

Publicidad

Síguenos en Facebook