WebP en WordPress

Dificultad del post: facilmediadifícil
[Total: 2   Promedio: 5/5]
webp wordpress

Qué decir de WebP. Parece que, después de aparecer este formato contenedor de imágenes, todos los demás formatos son “mierda”. ¿Esto es verdad? En este post vamos a ver algunas cosillas nuevas sobre este nuevo formato de imagen y también sobre cómo usar WebP en WordPress.

Vamos a empezar por el principio. WebP es un formato de imagen desarrollado por Google usando la tecnología que ya tenía una empresa que compraron en 2008/2009. El formato de imágenes WebP está “hermanado” con el formato WebM para vídeo y ambos son formatos abiertos con licencia BSD.

webp wordpress

WebP es un formato de imágenes optimizado, pero es compatible con la compresión con pérdida y sin pérdida.

Hasta el momento en que surgió WebP, existían estos formatos de imágenes:

  • JPEG: Mayor compresión de imagen, pero SIN TRANSPARENCIAS.
  • PNG: Imágenes MÁS PESADAS, en mayor calidad y con TRANSPARENCIAS.
  • GIF: Imágenes AÚN MÁS PESADAS, pero con ANIMACIONES Y TRANSPARENCIAS.

Y ahora llega WebP, que soporta TRANSPARENCIAS y ANIMACIONES, y además es capaz de conseguir mayor capacidad de compresión con pérdida y sin pérdida en la mayoría de los casos.

El tema es que WebP tiene un tiempo de descompresión reducida comparándola con otros formatos. Esto permite que, desde la descarga de la imagen hasta que el visitante la tiene en su “cara”, pase menos tiempo que con JPEG o PNG. Esto en imágenes pequeñas no se nota, pero cuando hablamos de resoluciones altas como 2000×2000 y cosas así, se consigue bastante mejoría.

Podría hablar mucho más sobre WebP y su parte “algoritmo”, pero creo que con la explicación que acabo de dar es suficiente para que todo el mundo conozca sus ventajas si aún no conocía WebP.

webp wordpress

Entonces, si todo es tan bonito… ¿por qué no se usa WebP y punto?

Aunque WebP apareció en 2010, la fase de maduración del proyecto tardó algunos años más.

Ahora mismo, estamos en la fase de implementación y se está extendiendo. Cada día mas webs convierten las imágenes a WebP, pero sigue existiendo una barrera que lo dificulta y es la de siempre: la segmentación de versiones y navegadores de usuarios que existe en Internet.

webp wordpress

En el momento de escribir y publicar este artículo todavía existen muchos navegadores de usuarios que no son compatibles con WebP. Evidentemente Google Chrome, al ser WebP un formato de imágenes de Google, es totalmente compatible. Pero otros navegadores que no están basados en Blink (motor de Google Chrome) pueden no serlo.

También hay que añadir que muchos usuarios no actualizan sus navegadores web y por eso ocurre la segmentación de versiones.

Esta es la tabla de compatibilidades de WebP para los distintos navegadores más utilizados. Sin embargo, en las primeras versiones la implementación del algoritmo no era completa:

  • Google Chrome desde la versión 9 (¡ha llovido!) – febrero de 2011.
  • Opera desde la versión 11.10 – marzo de 2011.
  • Mozilla Firefox desde la versión 65.0 – enero de 2019
  • Internet Explorer NO es compatible.
  • Internet Explorer Edge desde la primera versión – julio de 2015.
  • Safari de Apple es compatible desde Safari 10 – junio de 2016.
  • El navegador de Android es compatible desde Android 4.

Como ves, los dispositivos de Apple NO son compatibles en el momento de publicar este artículo, aunque muchos visitantes usan iPhone e iMac para navegar por Internet.

Si quieres saber más de esto, puedes encontrar más información aquí: https://caniuse.com/#feat=webp

El tema es que, al existir ciertos navegadores web que no son compatibles, debemos implementar WebP de forma que cuando el navegador sea compatible se sirvan las imágenes en WebP y cuando el navegador no sea compatible, se sirvan en el formato normal. Por eso no sirve solo con convertir las imágenes, sino que debemos servirlas de forma eficiente.

Las dos formas más utilizadas para servir WebP de forma dinámica son estas: mediante la etiqueta <picture> o mediante los rewrites del .htacess.

  • Con <picture> vamos a cargar los dos formatos de imágenes con dos <img> dentro de una etiqueta <picture>.
  • Con los rewrites debemos tener el .htaccess disponible y puede llegar a interferir en otros sistemas, como la implementación del CDN.

Y precisamente lo que vamos a ver en este post es eso: cómo implementar WebP en WordPress pudiendo elegir entre tres plugins.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

 

Configurar WebP en WordPress

Existen distintas formas de configurar WordPress para que cargue las imágenes en WebP, aunque antes debemos convertirlas y después servirlas de forma eficiente dependiendo del navegador web.

Yo personalmente siempre utilizo un plugin de los tres que voy a comentar en este post. Sin embargo, dependiendo de la configuración y la situación, utilizo uno u otro.

Al menos, podemos decir que WordPress no es de los CMS más complicados para poder tener las imágenes en WebP.

 

Imagify para optimizar y convertir a WebP

Si me habéis leído más veces, ya sabréis que soy fan de Imagify, el plugin de optimización de imágenes para WordPress.

Imagify es un plugin de optimización de imágenes muy potente desarrollado y mantenido por WP Media, los desarrolladores de WP Rocket.

webp

Como dije en algún post de este blog, Imagify tiene un algoritmo potente para comprimir imágenes y también permite escalarlas.

Además, también podemos convertir y servir en WebP:

webp wordpress

Como ves en la imagen anterior, en esta web uso Imagify para convertir y servir las imágenes en WebP.

Lo tengo configurado para que se muestren con la etiqueta <picture>, ya que es más “versátil” y eficiente que servirlas con rewrites en el .htaccess. Imagify es compatible con ambos sistemas aunque, como he dicho, si no hay problemas de compatibilidad la etiqueta <picture> es lo ideal.

webp wordpress

La ventaja de Imagify es que tiene soporte y que también optimiza las imágenes, por lo que podemos hacer dos por uno.

Lo malo de Imagify es que, si ya lo teníamos funcionando de antes, debemos tener backup de las imágenes optimizadas, realizadas con el propio sistema para que pueda generar las versiones en WebP.

Por otro lado, si queremos implementar WebP y aunque Imagify es la forma más fácil y más “autoconfigurable” de hacerlo… es un plugin premium (de pago por uso).

También he de decir que, mientras que los dos plugins que voy a comentar a continuación utilizan librerías internas del propio servidor o hosting, Imagify usa un webservice para realizar la conversión y la optimización.

Si buscas más información sobre Imagify, el plugin puedes encontrarlo en el repositorio de plugins de WordPress y al instalarlo tienes una cuota de 25MB en imágenes para probarlo. Si necesitas más, aquí lo tienes: https://imagify.io/pricing/

 

WebP Express para convertir y servir en WebP

WebP Express es otro de los plugins que me gustan para esta tarea, pero en este caso es gratuito y solamente sirve para convertir a WebP.

Podemos encontrar WebP Express en el repositorio de WordPress de forma gratuita.

Su interfaz es avanzada y tiene muchas opciones, de modo que podemos tener bastantes dudas para configurar el funcionamiento tanto de la conversión como de la forma de servir:

webp wordpress

Dispone de distintas formas de realizar la conversión y puede detectar los módulos y librerías disponibles en el servidor para realizarla:

webp wordpress

Una vez empieza la conversión, va a tardar más o menos tiempo dependiendo de cuantas imágenes tengamos. Aunque no es de los más lentos, tampoco es de los más rápidos.

webp wordpress

Otra cosa buena de WebP Express es que nos ofrece la posibilidad de realizar ciertos test para comprobar si el plugin puede leer y escribir correctamente en las carpetas utilizadas para la conversión:

webp wordpress

El problema de esta conversión es que no ofrece datos relevantes que nos permitan enterarnos de si se está realizando correctamente.

Y mientras que el plugin siguiente solo dispone de una forma de servir las imágenes, WebP Express nos permite configurar correctamente esto:

webp wordpress

De todos los plugins que he probado para la conversión a WebP, WebP Express es el más avanzado en cuanto a configuración. Como contrapartida, también es el más complejo y el que suele dar más problemas. He querido comentarlo en este post porque, en casos donde se necesite una configuración flexible, puede ser una buena opción.

Por si no te ha quedado claro, a continuación te dejo un vídeo:

Puedes encontrar más información acerca de WebP Express en el repositorio de WordPress: https://es.wordpress.org/plugins/webp-express/

 

WebP Converter for Media para convertir y servir en WebP

La primera opción gratuita para convertir las imágenes de nuestro sitio web a WebP es el plugin WebP Converter for Media.

Podemos conseguir el plugin WebP Converter for Media en el repositorio de plugins de WordPress.

webp wordpress

Como ves en la imagen anterior, podemos seleccionar las cuatro cosas básicas que necesitamos para realizar la conversión e incluso un poco de compresión.

Al final de la pantalla de configuración tenemos el botón “Regenerate All”, que nos permitirá convertir a WebP todas las imágenes de la web.

webp wordpress

WebP Converter for Media es de los plugins más rápidos que he visto para realizar esta tarea de conversión.

La parte buena de este plugin es que su apartado de configuración es fácil de entender y tiene pocas opciones. La parte mala es que solo permite servir las imágenes mediante cambio de URL en rewrites, lo que suele fallar bastante cuando usamos CDNs o cuando la configuración de URL de WordPress no es la predeterminada.

Puedes encontrar más información acerca de WebP Converter for Media en el repositorio de plugins de WordPress: https://wordpress.org/plugins/webp-converter-for-media/

 

WordPress compatible con WebP

Lo que hemos comentado hasta el momento es para convertir las imágenes a WebP en WordPress y también para servir esas imágenes WebP previamente convertidas con la herramienta correspondiente.

Pero ahora vamos a hablar de cómo hacer WordPress compatible con WebP a la hora de servir imágenes, ya que, de forma nativa, si intentamos subir una imagen en WebP a la galería multimedia de WordPress, nos encontraremos un mensaje como este:

webp wordpress

Si queremos solucionar esto y que la galería multimedia de WordPress nos permita subir imágenes en WebP, podemos hacerlo de varias formas: con plugins o mediante un código en el functions.php del theme activo que también podemos implementar con el plugin Code Snippets.

En este caso voy a mencionar el método más fácil de implementar, utilizando el plugin WP Enable WebP que simplemente nos añade la posibilidad de que WordPress acepte la subida de WebP: https://wordpress.org/plugins/wp-enable-webp/

Aquí el problema está en que con subir las imágenes en WebP a nuestro sitio web WordPress tampoco arreglaremos nada, ya que lo que necesitamos es servirlas.

Podríamos añadir directamente la imagen en el editor como en una imagen normal, pero tendríamos un problema con navegadores que no son compatibles con WebP.
Para solucionar esto siempre podemos usar las funcionalidades para servir imágenes de otros plugins como WebP Express o WebP Converter for Media.

Icono suscripción Newsletter

¿Quieres
recibir mis articulos?

No te pierdas todos mis trucos para WordPress, CMS, Marketing Digital y WPO.

Tal vez te interese...

Álvaro Fontela
Álvaro Fontela
Soy ponente en eventos de marketing digital, consultor WordPress y co-fundador de Raiola Networks, amante del mundo del motor (coches japoneses) y tecnófilo empedernido.

25 respuestas

  1. Hola Alvaro… Excelente información, como siempre! Yo hace tiempo que utilizo el Imagify para el WebP por rollo de comodidad y el Wp Rocket va genial, pero… El cabroncete arroja un montón de errores cuando haces una validación con el https://validator.w3.org/checklink aparentemente, por tamaños de imágenes. Por desgracias, tu también tienes esos errores para esta URL así que debo suponer que también utilizas el Imagify…. ¿Sabes algo al respecto o alguna solución? El soporte se lava las manos rollo «el CSS es de cada web en particular»…. En fin! Un saludo

    1. Si te soy sincero…uso mas bien poco el validador W3C, hasta el punto de que llevo años sin entrar.

      Yo mientras Google Search Console no me casque error de UX o rastreo para las imagenes, me conformo.

      He probado con otros proyectos donde tengo otros plugins (WebP Express) y lo mismo…creo que prefiero que W3C me casque errores, a que los usuarios de Apple no vean las imágenes…

  2. Buenas!
    Antes que nada excelente información, me ha servido de gran ayuda. En mi caso uso el webp express ya que he probado entre ambos y me da mejores resultados.
    No obstante me quedan dudas sobre las imágenes que se cargan por css como background-image. Estas siguen mostrándose como jpg-png según el caso. ¿Hay alguna forma de cambiar esto? entiendo que manualmente siempre podemos poner la carga en webp, pero esto significaría que no cargaría en los navegadores no compatibles. Agradecería mucho tu ayuda si sabes algo sobre este tema! Muchisimas gracias!

    1. Hola Irene, si que existe forma de hacerlo, pero salvo por rewrites, no se me ocurre forma de hacerlo de otra forma, ya que tendrías que hacerlo por CSS y desconozco si existe una media query o algo que permita hacerlo (tampoco es que yo sea un experto en CSS).

  3. Buenas Álvaro.
    Gracias por el post. He seguido los pasos, pero ahora me aparece en GTMetrix lo siguiente:

    Serve resources from a consistent URL
    The following resources have identical contents, but are served from different URLs. Serve these resources from a consistent URL to save 1 request(s) and 121.8KiB.

    Entiendo que ve como duplicada la imagen en jpg y la webp.
    ¿Qué puedo hacer?

    1. Hola Luis, la verdad es que no puedo ayudarte, ni uso GTMetrix ni nunca he visto esa regla…

      Al establecer las dos URL dentro de no se cargan las dos URL, simplemente se carga 1, con prioridad a webp.
      Esto no ralentiza, simplemente añade algo de HTML, pero no se puede apreciar la diferencia.

      Y encima esto se va a tener que utilizar SIEMPRE para implementar WebP, ya que Apple ya ha dicho que no va a hacer que Safari sea compatible con WebP.

  4. buenas alvaro tengo un jaeleo al principio me iba bien el webp express pero cada vez que subo una imagen en apple no se ve bien y tambien intente restaurar una copia por si las moscas antes del fallo en un portfolio que tengo que subi una imagen y dejaron de verse algunas y lo que te decia intente restauear una copia de la base datos y los archivos y nada

  5. Mi opinión Álvaro (y ten en cuenta que mis conocimiento son limitadetes), es que si el tipo de archivo no es 100% compatible y eso te obliga a servir imágenes en uno u otro formato, entiendo que debes tener dos versiones (al menos) de cada imagen, alojadas en el servidor (una para webP y otra para el formato “clásico” que sea). Eso entiendo que no es ideal para pequeños proyectos que cuentan con una capacidad de memoria ajustada en el servidor . Entiendo bien?. Gracias y un placer el seguirte y aprender contigo.

    1. Hola Hector, efectivamente, debes tener ambos formatos.

      Yo sinceramente, no he notado diferencia entre servir imágenes en PNG o WebP (comento estos dos por las transparencias), el tema es que la mayoría de la gente se obsesiona con Google PageSpeed y actualmente si no sirves las imágenes en WebP la puntuación de PageSpeed te salta a la cara…

      Precisamente en proyectos pequeños es donde menos se va a notar, ya que hay pocas imagenes. En proyectos grandes podemos enfrentarnos al doble de varios GB de imágenes.

      El tema es que ya sabemos que WebP NUNCA va a ser implementado y compatible al 100%, ya que…Apple ha dicho que Safari NUNCA sera compatible.

        1. Hola Matias, efectivamente, lo he visto, como he puesto en otro comentario, pronto actualizare el articulo 🙂

  6. Hola Álvaro.
    Estoy usando WebP Express con la configuración que propones, he mejorado en rendimiento de la página, pero me ocurre esto:
    Cuando vuelvo a entrar en unos días en la configuración del plugin no me aparece la configuración que he guardado. Por ejemplo, había marcado que las guarde en la misma carpeta, con la extensión .webp y que modifique el html para añadir la imagen webp con srcset, etc y ahora el plugin aparece como guardadas en distinta carpeta, sin extensión y alter html desactivado.
    Además si intento mirar la carpeta uploads por ftp me aparece vacía, aunque la web me está mostrando imágenes. :O
    Muchas gracias!

  7. Hola Álvaro,

    Excelente post. Pero y si quieres no convertir, sino que tienes tus archivos en webP, y los quieres mostrar? Simplemente con añadir la línea en .htacess? Además en este caso son vídeos, pequeñas imágenes de video.

    Un saludo,

    1. Hola Marta, tengo pendiente añadir eso al articulo, simplemente se trata de hacer que WordPress sea compatible con WebP a la hora de subir los archivos.

      Este plugin es lo mas «destacable» que me he encontrado para tomar otra ruta, es decir, hacer que WordPress sea compatible con WebP y poder subir los archivos WebP (y servir WebP claro): https://wordpress.org/plugins/wp-enable-webp/

  8. buenas, quiero subir todo a webp, existe un pluguin que convierta de webp a jpg en el caso de q un explorador lo requiera? 2. wordpress permite subir webp pero algunas si las muestra y otras no, y no se ven en la sección de medios, gracias

    1. Hola rowilsonh, que yo sepa no existe ningun plugin para hacerlo a la inversa, es decir, de WebP a JPG o PNG.

  9. Creo que ya Safari a implementado la visión de web en su navegador no? Quiero asegurarme antes de hacer el cambio de las imágenes de mi web a web.

    1. Hola Gonka, efectivamente, en breves tendré que cambiar el post y actualizarlo, ya que a pesar de que Apple había dicho que no iba a soportar WebP nunca, a finales de Junio de 2020 anuncio que en la próxima versión de Safari (que desconozco si salio) lo iba a soportar.

  10. Y que hacen ustedes para que se vean los imagenes webp en IOS, yo es que subos las imagenes directamente en webp. Vi el tema de pero no soy capaz de hacer nada

    1. Hola Milagros, aun no ha salido la actualización que lo permite, de todas formas algunos dispositivos Apple antiguos no podrán ver WebP nunca.

      Para estos casos existe el procedimiento que se explica en este post, que sirve PNG y JPEG a los dispositivos que no soportan WebP, pero para ello debes subirlas en PNG o JPEG y no en WebP.

      Si un dispositivo o navegador web no es compatible, no puedes hacer nada por solucionarlo.

  11. Hola Alvaro, instale el plugin wp-enable-webp y cuando veo la imagen por el link me la carga rapido y de muy buena calidad pero me pasa algo que no se si sea por la version del plugin y es que en la biblioteca de medios no se ve la imagen, muestra el icono de un archivo pero no la imagen. como se podrá solucionar?

Deja una respuesta

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

Share on twitter
Share on facebook
Share on linkedin
¿Quieres recibir mi contenido semanal?
¡Te enviare todas las semanas mi contenido!
Cabecera del formulario de suscripción