Cómo utilizar imágenes WebP en WordPress (3 métodos)

¿Quieres usar imágenes WebP en WordPress?

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

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

Agregar imágenes WebP en WordPress

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

WebP es un nuevo formato de archivo para imágenes que se utilizarán en la web. Al usar 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 los puntajes de las pruebas de velocidad de carga de su página.

Para obtener más información sobre la compresión de imágenes, consulte nuestra guía sobre cómo optimizar imágenes para la web.

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 admiten imágenes WebP.

¿Debería utilizar imágenes WebP en WordPress?

Las imágenes de WebP pueden ayudarlo a acelerar su sitio web de WordPress. Es una buena práctica recomendada para usarse junto con un complemento de almacenamiento en caché de WordPress, CDN y más.

Desde WordPress 5.8, WordPress ha admitido imágenes WebP de forma predeterminada. Esto significa que puede guardar y cargar sus imágenes WebP en su sitio web de WordPress sin utilizar un complemento.

Pero habiendo dicho esto, es posible que aún desee utilizar un complemento de compresión de imágenes en su sitio de WordPress. Si muchos de sus usuarios utilizan navegadores no compatibles, debería considerar la posibilidad de utilizar un complemento de compresión de imágenes.

Los complementos de compresión de imágenes pueden convertir sus imágenes existentes en formato WebP y mostrar imágenes JPEG o PNG como opción de respaldo en los navegadores que aún no son compatibles con WebP.

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

A continuación se explica cómo utilizar imágenes WebP en WordPress. Le mostraremos varios métodos para que pueda elegir el que mejor se adapte a sus necesidades:

  • Uso de imágenes WebP en WordPress con EWWW Optimizer
  • Uso de imágenes WebP en WordPress con WP Rocket
  • Uso de imágenes WebP en WordPress con SG Optimizer

Método 1. Uso de imágenes WebP en WordPress con EWWW Optimizer

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

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

Tras la activación, vaya a la Configuración »Optimizador de imagen EWWW página para configurar las opciones del complemento. Será recibido por un asistente de configuración, pero puede hacer clic en el enlace “Sé lo que estoy haciendo” para salir del asistente.

Asistente EWWW

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

Conversión de WebP en EWWW

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

A continuación, debe desplazarse hacia abajo hasta la sección Conversión de WebP. El complemento ahora le mostrará algunas reglas de reescritura con una imagen de vista previa roja.

Debe hacer clic en el botón ‘Insertar reglas de reescritura’, y el complemento automáticamente intentará insertar estas reglas de reescritura en su archivo .htaccess.

Insertar reglas de reescritura

Si el complemento logra agregar esas reglas, la vista previa de la imagen roja se volverá verde con el texto ‘WebP’.

Método de entrega de WebP exitoso

A veces, es posible que el complemento no pueda insertar las reglas. En ese caso, debe copiar las reglas de reescritura de la página de configuración del complemento y pegarlas en la parte inferior de su archivo .htaccess manualmente.

Una vez que haya terminado, regrese a la página de configuración del complemento y haga clic en el botón Guardar cambios nuevamente. Si la imagen de vista previa se vuelve verde, significa que ha habilitado con éxito la entrega de imágenes WebP en su sitio de WordPress.

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

Convierta a granel sus imágenes antiguas a la versión WebP

EWWW Image Optimizer le permite convertir fácilmente sus archivos de imagen cargados previamente en imágenes WebP. Simplemente ve a Mediateca página y cambie a la vista de lista.

Seleccionar archivos en Media

A continuación, debe hacer clic en el botón Opciones de pantalla y cambiar el ‘Número de elementos por página’ a 999. Si tiene más de 1000 imágenes, esas imágenes aparecerán en la página siguiente.

De esta manera, podrá seleccionar rápidamente una gran cantidad de imágenes para la optimización masiva. A continuación, haga clic en la casilla de verificación Seleccionar todo en la parte superior para seleccionar todas las imágenes.

Optimización masiva

Después de eso, haga clic en el menú desplegable Acciones masivas y seleccione la opción Optimizar masivamente. Finalmente, haga clic en el botón Aplicar.

En la siguiente pantalla, el complemento le dará la opción de omitir la compresión de imágenes y solo convertirlas a WebP. Puede marcar esta opción si sus imágenes ya están optimizadas.

Ejecutar optimización

Después de eso, haga clic en el botón ‘Buscar imágenes no optimizadas’ para continuar. El complemento le mostrará la cantidad de imágenes que encontró, por lo que puede hacer clic en el botón Optimizar para continuar.

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

Conversión de imágenes WebP finalizada

Prueba de la entrega de imágenes de WebP

Una vez que haya optimizado sus imágenes, puede ir a una publicación de blog o una página que contenga varias imágenes. Coloque el mouse sobre cualquier imagen y haga clic derecho para abrir la imagen en una nueva pestaña.

comprobar imagen

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

Verifique que se sirva la imagen de WebP

Si el complemento no puede servir la imagen webp, puede volver a la página de configuración del complemento. Desde aquí puede cambiar la opción de entrega de WebP a ‘JS WebP Rewriting’ o ‘ Métodos de reescritura de WebP.

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

Imagify es un complemento de optimización de imágenes de WordPress creado por la gente detrás de WP Rocket, el mejor complemento de almacenamiento en caché de WordPress. Le permite optimizar y convertir imágenes fácilmente al formato de imagen WebP.

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

Tras la activación, debe visitar Configuración »Imagify página para configurar los ajustes del complemento. De aquí. haga clic en el botón ‘Crear una clave API gratuita’ para continuar.

Crear clave de API de Imagify

Se le pedirá que ingrese una dirección de correo electrónico comercial, después de eso, puede verificar en su bandeja de entrada un correo electrónico que contenga su clave API. Copie y pegue la clave en la página de configuración del complemento y haga clic en el botón Guardar cambios.

A continuación, debe desplazarse hacia abajo hasta la sección Optimización. Allí debe marcar las opciones junto a las opciones ‘Crear versiones webp de imágenes’ y ‘Mostrar imágenes en formato webp en el sitio’.

Imagina la configuración de WebP

Debajo de eso, 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 usando etiqueta.

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

Puede elegir uno que funcione bien para su sitio. Después de eso, haga clic en el botón ‘Guardar e ir al optimizador masivo’ en la parte inferior.

Guarde la configuración e inicie el optimizador de imágenes

Esto te llevará a Medios »Optimización masiva página. El complemento comenzará a optimizar automáticamente todas sus imágenes de WordPress en segundo plano.

Estado de optimización

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

Probando sus imágenes WebP en WordPress

Una vez realizada la optimización, puede visitar una página o publicación que contenga algunas imágenes. Coloque el mouse sobre una imagen y luego haga clic derecho para seleccionar ‘Abrir imagen en una nueva pestaña’.

comprobar imagen

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

Verifique que se sirva la imagen de WebP

Método 3. Uso de imágenes WebP en WordPress con SG Optimizer

Se recomienda este método si es un usuario de SiteGround.

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

Primero, debe instalar y activar el complemento SG Optimizer.

Tras la activación, el complemento agregará un nuevo elemento de menú a la barra lateral de administración con la etiqueta ‘SG Optimizer’. Al hacer clic en él, accederá a la página de configuración del complemento.

Configuración de SG Optimizer

Desde aquí puede activar la configuración de almacenamiento en caché si desea utilizar el sistema de almacenamiento en caché integrado de SiteGround.

Después de eso, puede cambiar a la pestaña Optimización de medios y activar la opción ‘Generar copias WebP de nuevas imágenes’.

Habilitar imágenes WebP en SG Optimizer

Debajo de eso, verá la opción ‘Generar archivos WebP de forma masiva’. Al hacer clic en él, comenzará a generar copias WebP para todos los archivos de imagen en su biblioteca de medios de WordPress.

Generación masiva de imágenes WebP

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

Prueba de imágenes WebP en SG Optimizer

Para ver si su sitio web ofrece imágenes WebP, debe abrir una página en su sitio con algunas imágenes.

Después de eso, haga clic derecho y seleccione Inspeccionar herramienta. Esto abrirá la consola del desarrollador donde debe cambiar a la pestaña Red.

Visualización de imágenes de WebP en herramientas de desarrollo

Desde aquí, haga clic en la pestaña ‘img’ y luego vuelva a cargar la página (CTRL + R en Windows y Command + R en Mac). A medida que su sitio web se recarga, verá todas las imágenes cargadas en la consola del desarrollador.

Esperamos que este artículo le haya ayudado a aprender a usar imágenes WebP en WordPress. Es posible que también desee ver nuestra guía sobre cómo crear un boletín informativo por correo electrónico y nuestra comparación de los mejores servicios telefónicos comerciales para su sitio web.

Si le gustó este artículo, suscríbase a nuestro canal de YouTube para tutoriales en video de WordPress. También puedes encontrarnos en Twitter y Facebook.

Publicaciones relacionadas

Botón volver arriba