¿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.

¿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 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 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 almacenamiento en caché de WordPress. plugin, CDN y más.

De forma predeterminada, WordPress no admite imágenes WebP y la carga de una imagen WebP mostrará un error.

Error de carga de imagen WebP en WordPress

Para solucionarlo, necesitará utilizar una compresión de imagen plugin para convertir imágenes en formato de imagen WebP. Aún cargará sus imágenes en formatos de archivo compatibles con WordPress como PNG, JPEG y GIF, para que puedan usarse como copia de seguridad.

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:

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

Optimizador de imagen EWWW plugin es una de las mejores compresiones de imágenes de WordPress plugins 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 Optimizador de imagen EWWW plugin. Para obtener más detalles, consulte nuestra guía paso a paso sobre cómo instalar un WordPress. plugin.

Tras la activación, vaya a la Configuración »Optimizador de imagen EWWW página para configurar plugin opciones. Serás recibido por un asistente de configuración, pero puedes 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 plugin opciones. 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. La plugin 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 plugin automáticamente intentará insertar estas reglas de reescritura en su archivo .htaccess.

Insertar reglas de reescritura

Si el plugin tiene éxito en agregar esas reglas, entonces la vista previa de la imagen roja se volverá verde con el texto ‘WebP’.

Método de entrega de WebP exitoso

A veces el plugin es posible que no pueda insertar las reglas. En ese caso, debe copiar las reglas de reescritura de la pluginy péguelas en la parte inferior de su archivo .htaccess manualmente.

Una vez que haya terminado, vuelva a la pluginen la página de configuración y vuelva a hacer clic en el botón Guardar cambios. 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 los métodos JS WebP Rewriting o WebP Rewriting 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 forma, podrá seleccionar rápidamente una gran cantidad de imágenes para una 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 plugin 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. La plugin luego 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.

comprobando 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 plugin no puede servir la imagen webp, entonces puede volver a la pluginpágina de configuración. Desde aquí puede cambiar la opción de entrega de WebP a los métodos ‘JS WebP Rewriting’ o ‘ WebP Rewriting’.

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

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

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

Tras la activación, debe visitar Configuración »Imagify página para configurar plugin ajustes. 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 pluginen la página de configuración 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 mediante el uso de la 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. La plugin automáticamente comenzará a optimizar 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. Mueva el mouse sobre una imagen y luego haga clic con el botón derecho para seleccionar ‘Abrir imagen en una nueva pestaña’.

comprobando 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 SG Optimizer gratuito plugin a sus usuarios, lo 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 Optimizador SG plugin.

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

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 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 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 Comando + 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 . También puedes encontrarnos en Twitter y Facebook.

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

Entradas relacionadas

Deja una respuesta

Tu dirección de correo electrónico no será publicada. Los campos obligatorios están marcados con *