Como optimizar las imágenes en WordPress usando el formato WebP

28 de enero, 2021 @ 11:25 — 0 comentariosDescargar PDF

Tener un sitio web que cargue rápidamente es uno de los puntos que tenemos que tener en cuenta. Una de las formas de optimizar la velocidad de la página y mejorar la puntuación de PageSpeed es utilizando imágenes en formato WebP. En esta guia, profundizaremos en la cuestión "¿qué es WebP?" y compartiremos como integrarlo en WordPress con el plugin .

Antes de hacer cambios importantes en nuestra web, siempre es recomendable tener un backup de respaldo por si algo sale mal, de modo que antes de hacer nada en nuestro WordPress, recomendamos seguir la siguiente guia en la cual se explica como realizar un backup con Softaculous.

¿Qué es WebP y cuáles son sus beneficios?

WebP es un formato de imagen web desarrollado por Google que puede ofrecer archivos de menor tamaño con un nivel de calidad similar al de los formatos de imágenes existentes, por ejemplo jpeg o png.

Un tamaño de imagen más pequeño puede suponer una gran diferencia en tu sitio, mejora la velocidad y reduce el ancho de banda consumido, especialmente si tu sitio está lleno de muchas imágenes.

Otro beneficio es que optimizar las imágenes en este formato mejora el posicionamiento de nuestro sitio, por ejemplo PageSpeed, incide en la importancia de las imágenes y por ello cuentan con apartados propios que indican datos necesarios para que se tenga en cuenta.

Los inconvenientes

Realmente hoy en día existen pocos inconvenientes, pero es importante saber que el principal inconveniente es que el soporte webp se ha ido añadiendo en la mayoría de los navegadores más populares, de modo que si un usuario sin un navegador actualizado (el más notable sería Safari con una versión menor que la 14) no podría beneficiarse del formato de imagen webp.

Afortunadamente, no se pierde nada por usar WebP en tu sitio, ya que el plugin que usaremos crea un respaldo de las imágenes originales para que se muestren a los visitantes con navegadores que no soportan imágenes WebP.

Como usar webp en WordPress

Para usar el formato webp en WordPress usaremos un plugin llamado WebP Converter for Media, es un plugin totalmente gratuito, con él podremos convertir las nuevas imágenes que subamos y todas las imágenes de nuestra web ya almacenadas en el formato webp.

1 - Instala el plugin Converter for Media en WordPress

Lo primero que tendremos que hacer es instalar el plugin Converter for Media, de modo que lo instalamos como cualquier otro plugin.

Si no sabéis como instalar un plugin, podéis seguir la siguiente guía.

2 - Configura el plugin

Entramos en la configuración del plugin y una vez dentro, nos encontraremos con varias opciones, en nuestro caso hemos marcado que queremos que nos haga la conversión de prácticamente todo el sitio para que sea lo más rapido posible, de modo que hemos marcado todos los formatos de imágenes disponibles y los directorios de Temas y plugins.

(marcar todos los directorios y formatos mejorará la puntuación PageSpeed).

En el siguiente paso tendremos que seleccionar el nivel de calidad de las imágenes, el valor aquí recomendado es 85%, pero recomendamos que en sitios donde las imágenes no sean de gran importancia (por ejemplo una página de noticias) las comprimáis al máximo posible (75%), el resto de opciones adicionales, las dejamos como en la imagen y guardamos los cambios.

3 - Genera las imágenes

Una vez guardada la configuración, tan solo tendremos que hacer click en Regenerar todo para que el plugin haga la conversión de todas las imágenes de nuestro sitio web.

Si tenemos instalado y activado un plugin de caché, tendremos que limpiar la cache que ha almacenado dicho plugin después de regenerar todas las imágenes, s

Una vez el proceso de conversión haya finalizado, todas las nuevas imágenes que subamos desde la biblioteca de medios, serán también convertidas en el formato webp.

Si al convertir las imágenes os da un error y no finaliza el proceso, posiblemente sea por el directorio /plugins marcado en el paso 2 de la guía, desmárcalo y prueba otra vez.