Adding Webp Images In Wordpress

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 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é debería usar imágenes WebP en WordPress?

WebP es un nuevo formato de archivo de imágenes para usar 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 perder calidad. Si las imágenes ralentizan su sitio web, 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 cómo comprimir imágenes, consulte nuestra guía sobre cómo optimizar imágenes para la web. Debido a que WebP es un formato de archivo nuevo, aún 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. Esta es una de las mejores prácticas recomendadas para usar con un complemento de almacenamiento en caché de WordPress, CDN, etc. De forma predeterminada, WordPress no admite imágenes WebP y la carga de una imagen WebP mostrará un error.

Error De Carga De Imagen De Webp En Wordpress
Para resolver este problema, deberá utilizar un complemento de compresión de imágenes para convertir las imágenes al formato de imagen WebP. Continuará cargando 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 ralentizan su blog de WordPress, definitivamente debería considerar el uso de imágenes WebP. A continuación, se explica cómo usar imágenes WebP en WordPress. Te mostraremos varios métodos para que elijas el que más te convenga:

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 es compatible con 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. Durante 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 guardar 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 intentará automáticamente insertar estas reglas de reescritura en su archivo .htaccess.
Insertar Reglas De Reescritura
Si el complemento logra agregar estas 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 este caso, debe copiar las reglas de reescritura de la página de configuración del complemento y pegarlas manualmente en la parte inferior de su archivo .htaccess. Una vez que haya terminado, vuelva 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. También puede elegir entre JS WebP Rewrite o WebP reescribe los métodos como opciones de entrega de WebP. Estos son un poco más lentos que el método .htaccess, pero harán el trabajo.
Convierta de forma masiva 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. Solo ve a Mediateca página y cambie a la vista de lista.
Seleccionar Archivos En Media
Luego, 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. Luego haga clic en la casilla de verificación Seleccionar todo en la parte superior para seleccionar todas las imágenes.
Optimizar En Masa
Después de eso, haga clic en el menú desplegable Acciones masivas y seleccione la opción Optimización masiva. Finalmente, haga clic en el botón Aplicar. En la siguiente pantalla, el complemento le dará una opción para omitir la compresión de imágenes y convertirlas solo a WebP. Puede marcar esta opción si sus imágenes ya están optimizadas.
Optimización De Ejecució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 EWWW Optimizer generará versiones WebP para sus imágenes.
Conversión De Imagen Webp Completada
Probando la entrega de su imagen WebP
Una vez que haya optimizado sus imágenes, puede ir a una publicación de blog o una página con varias imágenes. Desplácese sobre cualquier imagen y haga clic derecho para abrir la imagen en una nueva pestaña.
Verificación De 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.
Compruebe Que Se Esté Reproduciendo 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 clave API gratuita» para continuar.
Cree Una Clave De Api De Imagify
Se le pedirá una dirección de correo electrónico del trabajo, después de lo cual podrá buscar 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. Luego, 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
A continuación, puede elegir entre dos métodos de entrega para ver imágenes WebP en WordPress. El primero es el método .htaccess y el segundo usa 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 el que mejor se adapte a su sitio. Después de eso, haga clic en el botón « Guardar e ir a Mass Optimizer » 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, es posible que tarde un poco. No se preocupe, puede cerrar la página y volver a ella más tarde, ya que cerrar la página no interrumpirá el proceso de optimización de la imagen.
Pruebe sus imágenes WebP en WordPress
Una vez que se completa la optimización, puede visitar una página o publicación que tenga algunas imágenes. Coloca el cursor sobre una imagen, luego haz clic derecho para seleccionar «Abrir imagen en una pestaña nueva».
Verificación De 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 Esté Reproduciendo 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 capacidad de optimizar las imágenes de WordPress. En primer lugar, 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 titulado «SG Optimizer». Al hacer clic en él, accederá a la página de configuración del complemento.
Configuración De Sg Optimizer
Desde allí, puede habilitar 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 habilitar la opción «Generar copias WebP de nuevas imágenes».
Habilitar Imágenes Webp En Sg Optimizer
A continuación, verá la opción para « 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
Cuando esté completo, 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 la herramienta Inspeccionar. Esto abrirá la Consola de desarrollador donde debe cambiar a la pestaña Red.
Visualización De Imágenes Webp En Herramientas De Desarrollo
Desde allí, 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…

Leave a Reply