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 Gecko (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 NO es compatible.
  • 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/

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.

7 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

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