Trusted WordPress tutorials, when you need them most.
Beginner’s Guide to WordPress
Copa WPB
25 Million+
Websites using our plugins
16+
Years of WordPress experience
3000+
WordPress tutorials
by experts

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

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.

Adding WebP images in 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

Subscribe to WPBeginner

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.

EWWW Wizard

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

WebP conversion in EWWW

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.

Insert rewrite rules

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

WebP Delivery method successful

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.

Select files in 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, é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.

Bulk Optimize

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.

Run optimization

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.

WebP image conversion finished

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.

checking image

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.

Verify WebP image is served

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.

Create Imagify API key

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

Imagify WebP Settings

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.

Save settings and start image optimizer

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.

Optimization status

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

checking image

La imagen se abrirá en una nueva pestaña del navegador.

Podrás ver la extensión .webp en la barra de direcciones.

Verify WebP image is served

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.

SG Optimizer settings

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

Enable WebP images in SG Optimizer

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.

Bulk generate WebP images

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.

Viewing WebP Images in developer tools

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:

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.

Descargo: Nuestro contenido está apoyado por los lectores. Esto significa que si hace clic en algunos de nuestros enlaces, podemos ganar una comisión. Vea cómo se financia WPBeginner , por qué es importante, y cómo puede apoyarnos. Aquí está nuestro proceso editorial .

Avatar

Editorial Staff at WPBeginner is a team of WordPress experts led by Syed Balkhi with over 16 years of experience in WordPress, Web Hosting, eCommerce, SEO, and Marketing. Started in 2009, WPBeginner is now the largest free WordPress resource site in the industry and is often referred to as the Wikipedia for WordPress.

El último kit de herramientas de WordPress

Obtenga acceso GRATUITO a nuestro kit de herramientas - una colección de productos y recursos relacionados con WordPress que todo profesional debería tener!

Reader Interactions

17 comentariosDeja una respuesta

  1. Syed Balkhi

    Hey WPBeginner readers,
    Did you know you can win exciting prizes by commenting on WPBeginner?
    Every month, our top blog commenters will win HUGE rewards, including premium WordPress plugin licenses and cash prizes.
    You can get more details about the contest from here.
    Start sharing your thoughts below to stand a chance to win!

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

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

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

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

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

  7. Theo

    here’s what I’m looking for,
    Very helpful

    • WPBeginner Support

      Glad our guide was helpful!

      Administrador

  8. Kim

    Thanks so much for the quick reply!

    • WPBeginner Support

      Glad we could help :)

      Administrador

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

Deja tu comentario

Gracias por elegir dejar un comentario. Tenga en cuenta que todos los comentarios son moderados de acuerdo con nuestros política de comentarios, y su dirección de correo electrónico NO será publicada. Por favor, NO utilice palabras clave en el campo de nombre. Tengamos una conversación personal y significativa.