WebP en WordPress, aumenta la velocidad de carga

Bienvenidos una vez más al blog con el que aprenderás diseño, estructura y navegación web, marketing online y todo lo que necesitas para crear una página web en WordPress.

Hace ya mucho tiempo que Google tiene muy en cuenta la velocidad de carga de la web para colocar tu página en los primeras posiciones del buscador, si no mira el artículo en el que te hablaba de la importancia de la velocidad de carga de la página web de tu empresa.

A raíz de esto surge la eterna pregunta, ¿Cómo lo hago para que mi web vaya más rápido?

A ver, no hay un formula mágica que lo arregle todo, hay que mirar cada proyecto al detalle. Sin embargo, de media, el tamaño de las imágenes suponen la mitad del tamaño de una web! Increíble no? Así que si reducimos este porcentaje, y WebP nos va ayudar, mejoraremos en gran medida la velocidad.

WebP es un formato de imagen bastante nuevo y diseñado por Google que nos proporciona una compresión mayor del tamaño de la imagen sin pérdida de calidad. Con WebP los creadores web, pueden crear imágenes de un tamaño más reducido y con una mayor resolución.

Para que te hagas una idea, las imágenes sin pérdida de calidad de WebP ocupan un 26% menos de espacio que las que tienen un formato PNG. Y si comparamos con JPEG vemos que esta reducción es aún mayor ya que ocupan de un 25 a un 34% menos. Siempre comparando la misma imagen con un índice de calidad SSIM equivalente.

La mayoría de navegadores y las versiones de WordPress superiores a la 5.8 ya soportan este formato.

Si aún no lo estás utilizando en tu web te voy a enseñar como hacerlo de la manera más rápida y fácil posible.

Que es WebP

Así que, que es un archivo WebP? A modo de resumen, WebP es un formato de imagen desarrollado por Google para optimizar mejor las imágenes que ningún otro formato. Por ejemplo, algunos de los formatos actuales más conocidos pueden ser JPEG o JPG i PNG.

WebP se centra principalmente en entregar la misma imagen ocupando un menor espacio y aún así, ofrecer imágenes de una extrema calidad y que permitirán que tu web cargue más rápido.

Por ejemplo y tal y como había comentado anteriormente, un estudio sobre compresión de WebP indica que:

  • Las imágenes son entre 25-34% más pequeñas que JPEG.
  • Un 26% más pequeñas que la misma imagen en formato PNG.

Esta es una de las principales razones por las que si vas a hacer un test de velocidad en la página PageSpeed Insights de Google te recomienda el uso de formatos de imagen de última generación. Si queréis que en otro post hable de las mejoras que ofrecen un mejor retorno en términos de velocidad, envíame un mensaje y así sabré que os interesa este tema.

webp pagespeed

Pero seguramente te preguntarás, ¿Cómo lo hace WebP para conseguir esta reducción de tamaño? Pues utilizan un truco muy curioso.

Este formato permite la reducción con pérdidas, por lo que en parte el tamaño se reducirá según lo quieras permitir. Con esto, WebP realiza una especie de predicción de la imagen, en ella un píxel se encarga de predecir los píxeles vecinos por lo que no tiene que guardar tanta información. Seguro que si algún experto lee esto me mata pero, yo creo que así como resumen, queda más claro.

Qué navegadores soportan WebP?

Para que las imágenes se muestren en el formato WebP, la persona que visite tu página web debe utilizar un navegador que lo permita. Por desgracia, WebP aún no tiene una compatibilidad universal aunque cada vez más navegadores ya lo soportan.

Los navegadores que permiten ver imágenes en WebP son:

  • Chrome (versión desktop y móvil)
  • Firefox (versión desktop y móvil)
  • Safari (versiones posteriores al macOS 11 Big sur)
  • Microsoft Edge
  • Opera (versión desktop y móvil)

Tengo que decir que Internet Explorer no permite visualizarlo, pero este navegador lo utilizan menos de 1% de usuarios y de hecho el propio Windows ya le ha puesto fecha de caducidad.

La verdad es que como digo, es muy interesante utilizar imágenes en formato WebP porque el 95% de los usuarios de internet ya utilizan navegadores que lo soportan. Aún así, no te preocupes, si configuras bien tu página de WordPress, el 5% de usuarios que no pueden ver WebP, seguirán viendo imágenes en tu sitio web aunque en otro formato más lento.

Así que no te pierdas este tutorial de WordPress para configurar imágenes en WebP.

Cómo utilizar imágenes WebP en WordPress

Desde la versión de WordPress 5.8 ya tienes disponible el uso de formatos de imagen WebP al igual que utilizaas JPEG, PNG o GIF. Así que si tienes el WordPress actualizado, no deberías tener ningún tipo de problema. Ya sabes que te recomiendo, vaya, te obligo a tener siempre tu página de WordPress a la última versión y si te da miedo por si se rompe algo, … mándame un correo de contacto y te ayudaré, pero es algo VITAL.

Así que por defecto WordPress ya permite que cualquier imagen que cargues en tu sitio web lo hagas ya directamente en formato WebP. Si queréis que haga un pequeño tutorial para convertir imágenes a WebP enviadme un mensaje por el formulario de contacto y haré un post o algo, a lo mejor un vídeo para añadir esta explicación.

Si lo haces así, el 5% de usuarios que utilicen un navegador que no soporte este formato no verán las imágenes. Hay veces que esto no tiene que ser un problema, según el cliente que tengas, porque si tienes un negocio debes saberlo absolutamente todo de tu cliente, pero si no te quieres arriesgar…

Tengo una solución que te encantará.

Puedes usar un plugin de WordPress que convierta la imagen original a WebP y también se encargue de mostrar la imagen que toca a los usuarios según su navegador. Así que este plugin se encargará de:

  • Convertir la imagen de JPEG a WebP y mostrar la imagen WebP a los navegadores Chrome, Firefox, etc.
  • Mostrar la imagen original a los usuarios que naveguen por Internet explorer, versiones antiguas de Safari y otros navegadores que no soporten imágenes en WebP.

Te voy a dar 3 opciones de plugins diferentes y te explicaré en detalle la que yo personalmente uso.

  1. Imagify
  2. ShortPixel Image Optimizer
  3. Optimole

Imagify

Pues para mi el mejor plugin para realizar esta conversión y algo que ya dice mucho de este plugin es que es de los mismos desarrolladores que WP Rocket, otro plugin a tener muy en cuenta.

Imagify se encarga automáticamente de escalar y comprimir las imágenes que subes en tu sitio web. Además, las convierte de forma automática a WebP para los usuarios que puedan visualizarla.

En funcionalidad, Imagify y ShortPixel son muy parecidos, los dos son plugins freemium, de los que tienes un cierto uso gratuito y después debes pagar por usarlos. Su principal diferencia es cuando te cobran o porque te cobran más.

En el caso de ShortPixel, te saldrá mejor si tienes que optimizar imágenes de gran tamaño y en el caso de Imagify si necesitas optimizar muchas imágenes de tamaño pequeño. Cuando hablo de tamaño no me refiero a las medidas de la imagen, sino en los megabytes que ocupan.

Digo que este es mi favorito porque ya de entrada, no deberías cargar imágenes muy pesadas en WordPress, porque, como ya hemos visto, penalizan mucho la velocidad de carga de la web. Esto también creo que puede ser interesante para un post o un vídeo, como hacer que las imágenes ocupen menos memoria sin perder demasiada calidad, si os interesa lo haré.

Para utilizar este plugin necesitas instalarlo y configurarlo de forma adecuada.

imagify

Para habilitar imágenes en WebP, solo tienes que hacer scroll por el plugin ir a Optimizar i encontrar la sección Formato WebP

  • Seleccionar Crear versión WebP de las imágenes
  • Seleccionar Mostrar imágenes en formato WebP
  • Seleccionar el uso del tag <picture>

Una vez hecho esto debes guardar y se empezarán a optimizar las imágenes que tengas subidas hasta el momento en tu sitio web.

Conclusión

Ahora que conoces este formato de imagen ha llegado el momento que lo apliques en todos tus proyectos, si quieres haz una prueba, revisa la velocidad de la carga de tu página web enPageSpeed Insights de Google antes y después de aplicar este cambio y envíame un mensaje con el resultado, a ver que ocurre.

Y ya para acabar como siempre, ya sabes que si tienes cualquier duda, no sabes como reducir el tamaño de la imagen, no sabes que plugin usar, necesitas ayuda en la configuración o te gustaría algún otro artículo con más guías sobre WordPress mándame un mensaje en el formulario que estaré encantado de leerte.

Consigue una web profesional