Entendemos la importancia de equilibrar la calidad de la imagen con tiempos de carga más rápidos. Muchos propietarios de sitios web nos preguntan acerca de la mejor manera de utilizar las imágenes WebP para hacer precisamente eso.
Las imágenes WebP son un formato de imagen moderno que ofrece una mejor compresión de imágenes reduciendo el tamaño del archivo sin sacrificar significativamente la calidad de la imagen. Esto hace que su sitio web cargue más rápido y ahorre ancho de banda.
El problema es que WordPress no es compatible con la subida o visualización de imágenes WebP.
En este artículo, le mostraremos cómo utilizar fácilmente imágenes WebP en WordPress.
¿Qué es WebP?
WebP es un formato de archivo de imágenes más reciente para su uso en la web. Al utilizar el formato de imagen WebP, sus imágenes tendrán un tamaño de archivo entre un 25 y un 34% menor que PNG y JPEG sin perder calidad.
Si las imágenes ralentizan su sitio web, convertirlas al formato WebP puede mejorar la velocidad de carga de su página.
Puede aprender acerca de la compresión de imágenes en nuestra guía sobre cómo optimizar imágenes para la web.
Dado que WebP es un nuevo formato de archivo, 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, son compatibles con imágenes WebP.
¿Debería utilizar imágenes WebP en WordPress?
Las imágenes WebP pueden ayudarte a acelerar tu sitio web WordPress. Es una práctica recomendada que se utiliza junto con un plugin de caché de WordPress, CDN, y más.
Desde WordPress 5.8, WordPress es compatible con imágenes WebP por defecto. Esto significa que puedes guardar y subir tus imágenes WebP a tu sitio web de WordPress sin necesidad de utilizar plugins.
Dicho esto, puede que le interese utilizar un plugin de compresión de imágenes en su sitio de WordPress. Si muchos de sus usuarios utilizan navegadores no compatibles, debería considerar el uso de un plugin de compresión de imágenes.
Los plugins de compresión de imágenes pueden convertir las imágenes existentes al formato WebP y mostrar imágenes JPEG o PNG como opción alternativa en navegadores que aún no son compatibles con WebP.
Si su sitio utiliza muchas imágenes y éstas ralentizan su blog de WordPress, debería plantearse utilizar imágenes WebP.
A continuación te explicamos 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:
Tutorial en vídeo
Si prefiere instrucciones escritas, siga leyendo.
Método 1: Usar imágenes WebP en WordPress con EWWW Optimizer
EWWW Image Optimizer es uno de los mejores plugins 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 mostrar automáticamente en los navegadores compatibles. Vea nuestra revisión de EWWW Image Optimizer para más detalles.
Lo primero que tienes que hacer es instalar y activar el plugin EWWW Image Optimizer. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Una vez activado, vaya a la página Ajustes ” Optimizador de Imágenes EWWW para configurar las opciones del plugin. Aparecerá un asistente de configuración, pero puede enlazar el enlace “Sé lo que estoy haciendo” para salir del asistente.
En la siguiente pantalla, verá un montón de opciones de plugins.
Desplácese hacia abajo y marque la casilla siguiente a la opción “Conversión WebP”.
Después, haz clic en el botón “Guardar cambios” para establecer los ajustes.
A continuación, debe desplazarse hasta la sección Conversión WebP. El plugin le mostrará algunas reglas de reescritura con una vista previa en rojo.
Debe hacer clic en el botón “Insertar reglas de reescritura” y el plugin intentará insertar automáticamente estas reglas de reescritura en su archivo .htaccess.
Si el plugin añade correctamente estas reglas, la vista previa de la imagen roja se volverá verde con el texto ‘WebP’.
A veces, es posible que el plugin no pueda insertar las reglas. En ese caso, deberá copiar las reglas de reescritura de la página de ajustes del plugin y pegarlas en la parte inferior de su archivo .htaccess manualmente.
Cuando haya terminado, vuelva a la página de ajustes del plugin y haga clic de nuevo en el botón “Guardar cambios”. Si la vista previa de la imagen se vuelve verde, significa que ha activado correctamente la entrega de imágenes WebP en su sitio web WordPress.
Alternativamente, puede elegir entre los métodos JS WebP Rewriting o WebP Rewriting como sus opciones de entrega WebP. Estos son un poco más lentos que el método .htaccess, pero harán el trabajo.
Convierte por lotes / en lotes tus imágenes antiguas a versiones WebP
EWWW Image Optimizer le permite convertir fácilmente sus archivos de imagen subidos anteriormente a imágenes WebP. Simplemente vaya a la página Medios ” Biblioteca y cambie a la vista de lista.
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, éstas aparecerán en la página siguiente.
De este modo, podrá seleccionar rápidamente un gran número de imágenes para optimizarlas por lotes / en lotes. A continuación, haga clic en la casilla de verificación Seleccionar todo situada en la parte superior para seleccionar todas las imágenes.
A continuación, haga clic en el menú desplegable “Acciones en lote” y seleccione la opción “Optimizar en lote”. Por último, haz clic en el botón “Aplicar”.
En la siguiente pantalla, el plugin te dará la opción de omitir la compresión de las imágenes y solo convertirlas a WebP. Puedes marcar / comprobar esta opción si tus imágenes ya están optimizadas.
A continuación, haga clic en el botón “Explorar imágenes no optimizadas” para continuar. A continuación, el plugin te mostrará el número de imágenes que ha encontrado, para que puedas hacer clic en el botón Optimizar para continuar.
Sus imágenes estarán ahora optimizadas, y EWWW Optimizer generará versiones WebP para sus imágenes.
Comprobación de la entrega de imágenes WebP
Una vez que haya optimizado sus imágenes, puede ir a una entrada del blog que contenga varias imágenes.
Pasa el ratón por encima de cualquier imagen y haz clic con el botón derecho para abrir la imagen en una pestaña nueva.
La imagen se abrirá en una nueva pestaña del navegador.
Podrás ver que tiene una extensión .webp en la barra de direcciones.
Si el plugin no se ha podido servir la imagen WebP, entonces puede volver a la página de ajustes del plugin. Desde aquí, puede cambiar la opción de entrega WebP a los métodos ‘JS WebP Rewriting’ o ‘WebP Rewriting’.
Método 2: Usar imágenes WebP en WordPress con Imagify
Imagify es un plugin de optimización de imágenes para WordPress creado por los creadores de WP Rocket, el mejor plugin de caché para WordPress. Te permite optimizar y convertir fácilmente imágenes a formato de imagen WebP. Consulta nuestra reseña de Imagify para obtener más información.
Lo primero que tienes que hacer es instalar y activar el plugin Imagify. Para más detalles, consulta nuestra guía paso a paso sobre cómo instalar un plugin de WordPress.
Tras la activación, debe visitar la página Ajustes ” Imagify para configurar los ajustes del plugin. Desde aquí, haz clic en el botón “Crear una clave de API gratuita” para continuar.
Se le pedirá que introduzca una dirección de correo electrónico profesional. Después, puedes marcar / comprobar tu bandeja de entrada para recibir un correo electrónico con tu clave API. Copia y pega la clave en la página de ajustes del plugin y haz clic en el botón “Guardar cambios”.
A continuación, desplácese hasta la sección Optimización. Allí debe marcar / comprobar las opciones siguientes: “Crear versiones webp de las imágenes” y “Mostrar imágenes en formato webp 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 es el uso de una etiqueta.
El método .htaccess es más rápido, pero no funciona si utiliza un servicio CDN. El método de la etiqueta también funciona con CDNs, pero puede romper algunos temas de WordPress.
Puede elegir el que mejor se adapte a su sitio. A continuación, haga clic en el botón “Guardar e ir a Bulk Optimizer” de la parte inferior.
Esto le llevará a la página Medios ” Optimización por lotes / en lotes.
El plugin empezará a optimizar automáticamente todas tus imágenes de WordPress en segundo plano.
Si tiene muchas imágenes, esto puede tardar un poco. No te preocupes, puedes cerrar la página y volver a ella más tarde porque cerrar la página no detendrá el proceso de optimización de imágenes.
Pruebe sus imágenes WebP en WordPress
Una vez realizada la optimización, puede visitar una página o entrada que contenga algunas imágenes. Pase el ratón por encima de una imagen y haga clic con el botón derecho para seleccionar “Abrir imagen en una pestaña nueva”.
La imagen se abrirá en una nueva pestaña del navegador.
Podrás ver la extensión .webp en la barra de direcciones.
Método 3: Usar imágenes WebP en WordPress con SG Optimizer
Este método es el recomendado si eres usuario de SiteGround.
SiteGround es una de las mejores empresas de alojamiento de WordPress. Ofrecen un plugin SG Optimizer gratuito a sus usuarios, que permite optimizar el rendimiento de WordPress. También incluye la opción de optimizar las imágenes de WordPress.
En primer lugar, debe instalar y activar el plugin SG Optimizer.
Una vez activado, el plugin añadirá un nuevo elemento / artículo a la barra lateral del administrador llamado ‘SG Optimizer’. Al hacer clic en él, accederás a la página de ajustes del plugin.
Desde aquí, puedes activar los ajustes de caché si quieres utilizar el sistema de caché integrado de SiteGround.
A continuación, vaya a la pestaña Optimización de medios y active la opción “Generar copias WebP de nuevas imágenes”.
Debajo, verá la opción “Generar por lotes / en lotes archivos WebP”.
Al hacer clic en el botón conmutador de esa opción, se empezarán a generar copias WebP de todos los archivos de imagen de la biblioteca de medios de WordPress.
Una vez terminado, su sitio WordPress empezará a servir imágenes WebP.
Prueba de imágenes WebP en SG Optimizer
Para ver si su sitio web está sirviendo imágenes WebP, necesita abrir una página en su sitio con algunas imágenes.
A continuación, haz clic con el botón derecho y selecciona la herramienta Inspeccionar. Esto abrirá la consola de desarrollador, donde tendrás que cambiar a la pestaña Red.
Desde aquí, haz clic en la pestaña ‘img’ y luego recarga la página (CTRL+R en Windows y Comando+R en Mac). Cuando tu sitio web se recargue, verás todas las imágenes cargadas en la consola de desarrollador.
Guías de expertos sobre el uso de imágenes en WordPress
Ahora que ya sabe cómo utilizar imágenes WebP en WordPress, puede que le interese ver otras guías para utilizar imágenes en su sitio de WordPress:
- Cómo añadir imágenes correctamente en WordPress (paso a paso)
- Cómo añadir imágenes destacadas o miniaturas de entradas en WordPress
- WebP vs. PNG vs. JPEG: el mejor formato de imagen para WordPress
- Cómo optimizar las imágenes para mejorar el rendimiento web sin perder calidad
- Comparativa de los mejores plugins de compresión de imágenes para WordPress
- Herramientas para crear mejores imágenes para las entradas de tu blog
- Grandes plugins de WordPress para gestionar imágenes (actualizado)
- Texto Alt de Imagen vs Título de Imagen en WordPress – ¿Cuál es la Diferencia?
- ¿Dónde almacena WordPress las imágenes de su sitio?
- Cómo cargar fácilmente imágenes de forma diferida en WordPress
Esperamos que este artículo te haya ayudado a aprender a utilizar imágenes WebP en WordPress. También puedes consultar nuestra guía sobre cómo crear un boletín de correo electrónico y nuestra selección de los mejores servicios de telefonía para tu sitio web.
If you liked this article, then please subscribe to our YouTube Channel for WordPress video tutorials. You can also find us on Twitter and Facebook.
MOINUDDIN WAHEED
I was searching for some mechanism to convert my wordpress images to webp as I have seen a huge difference in the file size between a png and jpg images and webp images.
Having webp images will definitely help load the website faster. It will enhance the speed and performance of the website.
Thanks for the guide for converting existing wordpress images to webp format.
WPBeginner Support
You’re welcome, glad you found our guide helpful
Administrador
Jiří Vaněk
Usually, I generate WebP images in an external editor. However, is it better practice to upload images in PNG format to the web and then generate them into WebP? I mean, is it better to have both formats for the browser to choose from or not? I’m concerned that someone might still be using an old browser that doesn’t support WebP, and then those images won’t display on my website for that user.
WPBeginner Support
If you specifically want a fallback image then allowing plugins to convert the images for you would be the best option. Creating the WebP images with an editor would be the recommended way to save space on your site.
Administrador
emir
We used a few images from webp in WooCommerce, while backing up woocommerce on another server, the webp images were not transferred, we returned to jpeg format again.
WPBeginner Support
Thank you for sharing your experience with webp images. If you reach out to the support for your backup tool, there are normally snippets or other ways to fix that issue!
Administrador
Ashikur Rahman
if i follow step 1 i would have old files in jpg/png format right? it will create a mess in upload folder. they have remove original file option, if i use that option. will it break my post images?
and most importantly what if i deactive/delete eww plugin will it also delete converted webp image also?
what should i do?
WPBeginner Support
The plugin currently keeps the old images for the browsers that do not support WebP images and would only create the WebP image if it is a better size than the jpg/png. Removing the original would not break your site but if a majority of your visitors are using older browsers that don’t support WebP it could be broken for those users.
You would need to check with the plugin’s support for the current status of the created images when the plugin is removed.
Administrador
Rebecca
Hi I notice some plugins like wp-optimize allows an option to preserve exif data for webp conversion. Is this data necessary to keep?
Thanks in advance
WPBeginner Support
It is not required but is useful for the sites that use that information.
Administrador
Theo
here’s what I’m looking for,
Very helpful
WPBeginner Support
Glad our guide was helpful!
Administrador
Kim
Thanks so much for the quick reply!
WPBeginner Support
Glad we could help
Administrador
Kim
This is a great tip, just 1 question…will I need to run the EWWW optimizer every time that I upload a new image (PNG, JPG) ?
WPBeginner Support
The plugin will automate the process for new uploads
Administrador