Cómo usar imágenes WebP en WordPress (3 formas)

¿Quieres usar imágenes WebP en WordPress?

Las imágenes WebP son un formato de imagen moderno que proporciona una mejor compresión de imágenes al reducir 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 usar fácilmente imágenes WebP en WordPress.

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

WebP es un nuevo formato de archivo de imagen en la web. Con 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 pérdida de calidad.

Si las imágenes ralentizan su sitio, convertirlas al formato WebP puede mejorar los resultados de la prueba 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 del Optimizador de imágenes en red.

Debido a que WebP es un nuevo formato de archivo, no todos los navegadores lo admiten. Sin embargo, la mayoría de los navegadores modernos, como Google Chrome, Firefox y Microsoft Edge, admiten imágenes WebP.

¿Necesito usar imágenes WebP en WordPress?

Las imágenes WebP pueden ayudarlo a acelerar su sitio de WordPress. Es una buena práctica usarlo junto con WordPress, CDN y otros complementos de almacenamiento en caché.

Desde WordPress 5.8, WordPress admite imágenes WebP de forma predeterminada. Esto significa que puede guardar y cargar imágenes WebP en su sitio de WordPress sin usar un complemento.

Pero 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 usan navegadores no compatibles, debería considerar usar un complemento de compresión de imágenes.

Los complementos de compresión de imágenes pueden convertir imágenes existentes al formato WebP y mostrar imágenes JPEG o PNG como opciones de respaldo en navegadores que aún no admiten WebP.

Si su sitio web usa muchas imágenes y ralentizan su blog de WordPress, entonces definitivamente debería considerar usar imágenes WebP.

Aquí se explica cómo usar imágenes WebP en WordPress. Te mostraremos varios métodos para que elijas el que mejor se adapta a tus necesidades:

• Use imágenes WebP en WordPress con EWWW Optimizer
• Usa imágenes WebP en WordPress con WP Rocket
• Utilice imágenes WebP en WordPress con SG Optimizer

Método 1. Usa 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 en 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 complementos de WordPress.

Entrar después de la activación Ajustes »Optimizador de imagen EWWW página para configurar las opciones del complemento. Verá un asistente de configuración, pero puede hacer clic en el enlace "Sé lo que estoy haciendo" para salir del asistente.

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

Luego haga clic en el botón Guardar cambios para guardar su configuración.

Luego, debe desplazarse hacia abajo hasta la sección de conversión WebP. El complemento ahora le mostrará algunas reglas para reescribir con una imagen de vista previa roja.

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

Si el complemento agrega con éxito estas reglas, la vista previa de la imagen roja se volverá verde con el texto "WebP".

A veces, los complementos pueden fallar al insertar reglas. En este caso, debe copiar las reglas de reescritura de la página de configuración del complemento y pegarlas manualmente en la parte inferior del archivo .htaccess.

Cuando 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, ha habilitado con éxito la entrega de imágenes WebP en su sitio de WordPress.

Alternativamente, puede optar por reescribir JS WebP o Método de cancelación de WebP como opción de entrega de WebP. Son un poco más lentos que los métodos .htaccess, pero hacen el trabajo.

Conversión por lotes de imágenes antiguas a la versión WebP

EWWW Image Optimizer le permite convertir fácilmente archivos de imagen precargados en imágenes WebP. Vamos Mediateca página y cambie a la vista de lista.

Luego debe hacer clic en el botón "Opciones de visualización" y cambiar "Elementos de página" a 999. Si tiene más de 1000 imágenes, se mostrarán en las siguientes páginas.

De esta manera, puede seleccionar rápidamente una gran cantidad de imágenes para la optimización por lotes. Luego haga clic en la casilla de verificación Seleccionar todo en la parte superior para seleccionar todas las imágenes.

Luego haga clic en el menú desplegable Acciones de grupo y seleccione la opción de optimización por lotes. Finalmente, haga clic en el botón Aplicar.

En la siguiente pantalla, el complemento le permitirá omitir la compresión de imágenes y simplemente convertirla a WebP. Puede marcar esta opción si su imagen ya está optimizada.

Luego haga clic en el botón "Buscar imágenes no optimizadas" para continuar. El complemento le mostrará cuántas imágenes ha encontrado, por lo que puede hacer clic en el botón "Optimizar" para continuar.

Su imagen ahora estará optimizada y EWWW Optimizer generará una versión WebP de su imagen.

Prueba de transferencia de imagen WebP

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

Esto abrirá la imagen en una nueva sección del navegador y verá que hay una extensión .webp en la barra de direcciones.

Si el complemento no puede manejar imágenes 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 Rewrite" o " Método de cancelación WebP.

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

Imagify es un complemento de optimización de imágenes de WordPress creado por las personas detrás del mejor complemento de almacenamiento en caché de WordPress, WP Rocket. Le permite optimizar y convertir fácilmente imágenes a 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 complementos de WordPress.

Después de la activación, debe visitar Ajustes »Imagina página para configurar los ajustes del complemento. de aquí. Haga clic en el botón Crear clave de API gratuita para continuar.

Se le pedirá que ingrese la dirección de correo electrónico de su trabajo, después de lo cual puede verificar su bandeja de entrada de correo electrónico con 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.

Luego, debe desplazarse hacia abajo hasta la sección de optimización. Allí debe marcar las opciones junto a las opciones "Crear una versión webp de la imagen" y "Mostrar imagen en formato webp en el sitio web".

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 utiliza Etiqueta.

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

Puedes elegir el que se adapte a tu sitio web. Luego haga clic en el botón "Guardar e ir a Batch Optimizer" en la parte inferior.

esto te guiará Medios »Optimización en escala Página. El complemento comenzará automáticamente a optimizar todas sus imágenes de WordPress en segundo plano.

Esto puede llevar algún tiempo si tiene muchas imágenes. No se preocupe, puede cerrar la página y volver más tarde, porque cerrar la página no detendrá el proceso de optimización de la imagen.

Prueba tu imagen WebP en WordPress

Una vez que se completa la optimización, puede visitar una página o publicación que contenga algunas imágenes. Pase el cursor sobre la imagen y haga clic con el botón derecho para seleccionar Abrir imagen en una pestaña nueva.

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

Método 3. Con SG Optimizer Usa imágenes WebP en WordPress

Este método es recomendable si eres usuario de SiteGround.

SiteGround es una de las mejores empresas de alojamiento de WordPress. Proporcionan a los usuarios un complemento SG Optimizer gratuito que le permite optimizar el rendimiento de WordPress. También incluye opciones para optimizar las imágenes de WordPress.

Primero, debe instalar y activar el complemento SG Optimizer.

Cuando se activa, 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.

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

Luego puede cambiar a la pestaña Optimización de medios y habilitar la opción "Generar copia WebP de la nueva imagen".

Debajo de esto, verá la opción "Batch WebP files". Al hacer clic en él, comenzará a generar copias WebP de todos los archivos de imagen en su biblioteca de medios de WordPress.

Una vez que haya 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 web con algunas imágenes.

Luego haga clic derecho y seleccione la herramienta de verificación. Esto abrirá la consola del desarrollador, donde debe ir a la pestaña Red.

Desde aquí, haga clic en la pestaña "img" y vuelva a cargar la página (CTRL + R para Windows y Comando + R para Mac). Cuando su sitio web se vuelva a cargar, verá todas las imágenes cargadas en Developer Console.

Esperamos que este artículo te haya ayudado a aprender a usar imágenes WebP en WordPress. También puede consultar 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 te ha gustado este artículo, suscríbete a nuestro canal de tutoriales en vídeo de YouTube para WordPress. También puede encontrarnos en Twitter y Facebook.