Cómo usar 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 guarde el ancho de banda. En este artículo, le mostraremos cómo usar 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 las imágenes que se utilizarán en la web. Usando el formato de imagen WebP, sus imágenes serán 25-34% más pequeñas en tamaño que PNG y JPEG, sin perder calidad.
Si las imágenes ralentizan su sitio web, entonces conviértalos en formato WebP puede mejorar los puntajes de velocidad de carga de la página. Para obtener más información sobre la compresión de imágenes, consulte nuestra guía sobre cómo optimizar las imágenes web. Debido a que WebP es un nuevo formato de archivo, aún no lo aceptan todos los navegadores. Sin embargo, la mayoría de los navegadores modernos como Google Chrome, Firefox y Microsoft Edge aceptan imágenes WebP. ¿Debería usar imágenes webp en WordPress? Las imágenes de WebP pueden ayudarlo a acelerar su sitio web de WordPress. Es una buena recomendación de práctica para usarse con un complemento de caché de WordPress, CDN y muchos más.
De manera predeterminada, WordPress no acepta imágenes WebP y cargar una imagen webp mostrará un error.

Para remediar esto, deberá utilizar un complemento de compresión de imágenes para convertir las imágenes en formato de imagen WebP. Continuará cargando sus imágenes en formatos de archivo aceptados por WordPress como PNG, JPEG y GIF para que pueda usarse como copia de seguridad. Si su sitio usa muchas imágenes y ralentizan su blog de WordPress, entonces definitivamente debe considerar usar imágenes webp. Aquí le mostramos cómo usar imágenes webp en WordPress. Le mostraremos más métodos para que pueda elegir uno que funcione mejor para usted: imágenes de 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 EWW Plugin Ewww Image Optimizer es uno de los mejores complementos de compresión de WordPress que le permite optimizar sus imágenes de WordPress. También acepta imágenes WebP y puede mostrarlas automáticamente en navegadores aceptados. Lo primero que debe hacer es instalar y activar el complemento EWWW Image Optimizer. Para obtener más detalles, consulte nuestra guía paso por paso sobre cómo instalar un complemento de WordPress.
Después de la activación, vaya a la página Configuración »EWWW IMAGEN OPTIPIZER para configurar las opciones de complemento. Será recibido por un experto en configuración, pero puede hacer clic en el enlace “Sé lo que hago” para obtener del experto.
En la siguiente pantalla, verá muchas opciones de complementos. Desplácese hacia abajo y marque la casilla junto a la opción “Conversión de WebP”.

Después de eso, haga clic en Guardar los cambios para almacenar la configuración. Luego debe desplazarse hacia abajo hasta la sección de 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 intentará automáticamente insertar estas reglas de reescritura en su .htacces. Si el complemento logra agregar esas reglas, la imagen roja se convertirá en verde con el texto. “WebP”.

A veces, el complemento puede no ser capaz de introducir las reglas. En este caso, debe copiar las reglas de reescritura en la página de configuración del complemento y manejarlas en la parte inferior del archivo .htaccess. Después de haber terminado de regresar a la página de configuración del complemento y haga clic en Guardar los cambios. Si la imagen de vista previa se vuelve verde, esto significa que ha activado con éxito la entrega de imágenes WebP en su sitio web de WordPress.

Alternativamente, puede elegir entre JS WebP Reescritura 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á el trabajo. La conversión masiva de sus imágenes antiguas en la versión WebP Ewww Image Optimizer le permite convertir fácilmente los archivos de imagen cargados anteriormente en imágenes WebP. Simplemente acceda a la página de medios »Biblioteca y pase a la lista.

Luego debe hacer clic en el botón Opciones de pantalla y cambiar el “número de artículos en la página” a 999. Si tiene más de 1000 imágenes, estas imágenes aparecerán en la página siguiente.
De esta manera, podrá seleccionar una gran cantidad de imágenes para la optimización de bloques rápidamente. Luego haga clic en el cuadro de selección en la parte superior para seleccionar todas las imágenes. Después de eso, haga clic en el bloque cae en el bloque y seleccione la opción de optimización en el bloque. Finalmente, haga clic en el botón de aplicación. En la siguiente pantalla, el complemento le dará una opción para omitir la compresión de la imagen y solo los convertirá en WebP. Puede verificar esta opción si sus imágenes ya están optimizadas.

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 ha encontrado para que pueda hacer clic en el botón Optimizar para continuar.
Sus imágenes ahora estarán optimizadas, y el EWWW Optimizer generará versiones WebP para sus imágenes.

Probar la entrega de imágenes WebP Una vez que haya optimizado sus imágenes, puede acceder a una publicación de blog o una página que contiene varias imágenes. Vaya al mouse en 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á ver que tiene una extensión .webp en la barra de direcciones.
Si el complemento no puede transmitir 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 los métodos “JS Web Reescrith” o “Imagen> WebP Reescritura”.


Método 2. Uso de las imágenes WebP en WordPress con Imagify Imagify es un complemento de optimización de imágenes de WordPress creado por personas detrás de WP Rocket, el mejor complemento de caché de WordPress. Le permite optimizar y convertir fácilmente las imágenes en 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 por paso sobre cómo instalar un complemento de WordPress. Después de la activación, debe acceder a la configuración »Imagine la página para configurar la configuración del complemento. De aquí. Haga clic en la “Crear una clave API gratuita” para continuar. Se le pedirá a VI que ingrese la dirección de correo electrónico de una empresa, después de lo cual puede verificar la casilla de correo electrónico para obtener un correo electrónico que contenga la clave API. Copie y pegue la clave de la página Configuración del complemento y haga clic en Guardar los cambios. Luego debe desplazarse hacia abajo hasta la sección de optimización. Allí debe verificar las opciones junto a las opciones de “Crear versiones de imagen de imagen” y “mostrar imagen ImpII 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 está utilizando la etiqueta . El método .htaccess es más rápido, pero no funciona si usa 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 “Guardar y acceder al optimizador en el bloque” en la parte inferior.

Esto lo llevará a la página de medios »Optimización del bloque. El complemento comenzará a optimizar automáticamente todas las imágenes de WordPress en segundo plano. Si tiene muchas imágenes, entonces puede llevar algo de 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 imágenes. Probando sus imágenes WebP en WordPress Después de la optimización, puede visitar una página o una publicación que contiene algunas imágenes. Mueva el mouse a una imagen y luego haga clic derecho para seleccionar “Abra la imagen en la nueva pestaña”.
Esto abrirá la imagen en una nueva pestaña del navegador y podrá ver la extensión .webp en la barra de direcciones.

Método 3. Uso de las imágenes WebP en WordPress con SG Optimizer Este método se recomienda si es un usuario de SiteGround. SiteGround es una de las mejores empresas de alojamiento de WordPress. Proporcionan a sus usuarios un complemento SG SG gratuito, que le permite optimizar su rendimiento de WordPress. También incluye la opción de optimizar las imágenes de WordPress. Primero, debe instalar y activar el complemento SG Optimizer. Después de la activación, el complemento agregará un nuevo elemento de menú a la barra lateral del administrador etiquetado como “SG Optimizer”. Si hace clic en él, llegará a la página Configuración del complemento.

Desde aquí, puede activar la configuración de caché si desea usar el SiteGround Cache Cache. Después de eso, puede pasar a la pestaña Optimización de medios y activar la opción “Generar nuevos niños WebP de imagen”.

A continuación, verá la opción “Generar en los archivos de bloque WebP”. Si hace clic en él, comenzará a generar niños webp para todos los archivos de imagen en la biblioteca de medios de WordPress. Probar imágenes WebP en SG Optimizer Para ver si su sitio web sirve imágenes WebP, debe abrir una página en su sitio web con algunas imágenes. Después de eso, haga clic en la derecha y seleccione la herramienta de inspección. Esto abrirá la consola para los desarrolladores donde necesita moverse a la pestaña de red.

Desde aquí, haga clic en la pestaña “IMG” y luego recarga la página (Ctrl + R en Windows y comando + R en Mac). A medida que su sitio recarga, verá todas las imágenes cargadas en la consola de desarrolladores. Esperamos que este artículo lo haya ayudado a aprender cómo usar imágenes WebP en WordPress. Es posible que desee ver nuestra guía sobre cómo crear un boletín de correo electrónico y nuestra comparación con los mejores servicios comerciales para su sitio web. Si le gustó este artículo, suscríbase a nuestro canal de YouTube para los tutoriales de video de WordPress. También puede encontrarnos en Twitter y Facebook.