Cómo servir gratis imágenes WebP en SiteGround

SiteGround es una de las empresas de alojamiento recomendadas oficialmente por WordPress.org.

En los últimos años, el alojamiento en SiteGround ha crecido a un nivel superior. Han reemplazado la configuración tradicional de cPanel y han migrado todas las cuentas existentes a su configuración personalizada de Site Tools.

Con esto pueden servir imágenes WebP en lugar de PNG o JPEG para aumentar la velocidad de carga de tu web. En este artículo, explicaré cómo servir las imágenes WebP en SiteGround y las comprobaremos en el navegador.

¿Por qué debería usar imágenes WebP?

Cada vez que revises el resultado de la velocidad de una página en las herramientas de medición de optimización como Google PageSpeed Insights o GTMetrix, te mostrarán muchas oportunidades que pueden mejorar la velocidad del sitio.

Una de las sugerencias importantes que no puedes resolver fácilmente es «Servir imágenes en formatos de próxima generación».

Los formatos de próxima generación son WebP, JPEG 2000 o JPEG XR, para reemplazar los formatos de imagen tradicionales de PNG y JPEG.

Por tanto, servir imágenes WebP te ayudará a resolver el problema del servicio de medición de velocidad web.

Además, usar imágenes en formato WebP reduce el tamaño de la imagen a más del 75% menos con la misma calidad, mejorando así la velocidad de carga de la página.

¿Cómo lo hago en SiteGround?

SiteGround ofrece el plugin SG Optimizer, que entre otras cosas te permite activar la conversión gratuita de todas tus imágenes al formato WebP. Y lo mejor de todo es que no necesitas configurar nada.

Algunos detalles:

  • Todas las imágenes WebP se almacenan en el servidor, y no puedes verlas en la biblioteca de imágenes, aunque sí usando el  navegador de archivos o por FTP.
  • Puedes comprobar si se están cargando las imágenes WebP viendo tu sitio desde cualquier navegador compatible con este formato  (la mayoría de los actuales, menos Safari).
  • Tienes que activar la conversión a WebP en cada sitio, no es una configuración general de la cuenta de hosting.

Si aún no estás usando el plugin SG Optimizer te estás perdiendo la mayoría de las mejoras de optimización y seguridad de SiteGround, no solo la conversión a WebP, así que lo primero es instalar el plugin si no lo has hecho ya:

  • Accede a la administración de tu sitio WordPress y ve a Plugins -> Añadir nuevo.
  • Busca por «SG Optimizer» para encontrarlo.
  • Instala y activa el plugin.

Cuando hayas instalado el plugin ve a la sección de los ajustes del plugin en «SG Optimizer -> Optimización de medios». Ahí encontrarás las opciones disponibles para activar las imágenes WebP en tu sitio.

Una vez ahí vamos al asunto, porque es cosa de un par de clics.

Crea copias WebP de las imágenes nuevas

Lo primero es activar que se creen automáticamente copias WebP de cada imagen que subas, para que te puedas olvidar de estas configuraciones.

Solo tienes que activar el selector y elegir qué tipo de conversión quieres:

  • Lossless (sin pérdida de calidad)
  • Lossy (con pérdida de calidad)

Yo te recomiendo que selecciones la opción sin pérdida de calidad (lossless), para sí mantener la calidad de imagen al mismo tiempo que reduces el tamaño de las imágenes.

No obstante, si subes imágenes muy grandes y te puedes permitir algo de reducción de calidad, puedes elegir la opción con pérdida.

Si así fuera, puedes cambiar el porcentaje de calidad arrastrando el deslizador.

Una vez lo pongas a tu gusto la prueba es bien sencilla, simplemente sube una nueva imagen y revisa la calidad en el navegador (más abajo te digo cómo hacerlo) antes de hacer el procesamiento por lotes (masivo) de todas las imágenes existentes.

Pero haz la prueba, sobre todo para determinar la calidad final de las imágenes, y el peso de los archivos.

Generar archivos WebP por lotes

Una vez te hayas decidido por la configuración de la calidad, ya puedes hacer clic en el botón de «Generar archivos WebP por lotes».

Esto generará versiones en WebP de todas las imágenes que ya tengas en la biblioteca de medios.

Al contrario que la opción normal de optimización de imágenes, crear imágenes en WebP tarda bastante menos en la generación, pero como siempre dependerá de la cantidad de imágenes que tengas.

En mi caso tarda siempre bastante en estas cosas (horas) pero es que hay más de 14 mil imágenes en la biblioteca de medios del blog.

¿Se puede cambiar la calidad en cualquier otro momento?

Pues sí, en cualquier momento puedes decidir cambiar el tipo de calidad de con pérdida a sin pérdida o viceversa.

También puedes cambiar la calidad con pérdida de las imágenes WebP en cualquier momento.

Solo tienes que hacer clic en el enlace para la «regeneración» y se crearán con la nueva calidad.

Si lo prefieres, siempre puedes hacer clic en el botón de «Borrar todos los archivos WebP», y luego de nuevo en el botón de «Generar archivos WebP por lotes» para volver a crear las imágenes WebP con la nueva calidad que hayas elegido.

Cómo ver y comprobar si se han creado las imágenes WebP

Lo primero que haría cualquiera sería abrir el sitio con Google Chrome y probar el código fuente en la consola para desarrolladores.

Y es un error, porque seguirás viendo que se cargan las imágenes en PNG o JPEG en vez de en formato WebP.

Entonces ¿qué pasa? ¿no funciona?

Para nada, es simplemente que no es el modo correcto de comprobarlo.

Pero ahí están, solo hay que saber cómo ver si están funcionando o no. Y para eso debes seguir las siguientes instrucciones, y así podrás comprobar si tu sitio está sirviendo imágenes en formato WebP:

  1. Abre Google Chrome y luego (haciendo clic derecho) las herramientas para desarrolladores.
  2. Ahora haz clic en la pestaña «Network» y abre la web (si no lo has hecho ya) en la barra de direcciones, y si ya estabas en ella recarga la página.
  3. Ahora ya podrás ver la actividad de la red y hacer clic en la pestaña «Img» de esta sección.
  4. Ahí verás los tipos de recursos de tu sitio.
  5. Si te fijas en las columnas de «Name» o «Type» podrás ver el tipo de imagen. Y deberías ver las «WebP».

Este sí es el método correcto de comprobar si tu web está sirviendo imágenes en WebP.

¿No hay otra manera «humana» de comprobarlo?

Pues sí que la hay. Si lo prefieres no hace falta enredar en la consola para desarrolladores del navegador.

El otro modo de comprobarlo es más simple:

    1. Abre la página web en Chrome y haz clic derecho en cualquier imagen que debería ser WebP.
    2. Selecciona la opción de «Guardar imagen como…».
    3. Al guardarla deberías ver que el formato es WebP.

Aunque el formato original sea PNG o JPEG deberías ver que el formato de descarga es «Google WebP», ya que ese es el formato de imagen disponible en tu sitio.

Por supuesto, puedes comprobar que existen físicamente en tu servidor, desde el gestor de archivos de Site Tools de SiteGround o por FTP. Se guardarán en el formato nombre-imagen-original.jpg.webp.

¿Cuánto tamaño puedo ahorrar convirtiendo a WebP?

En realidad dependerá de la calidad que elijas para tus imágenes WebP. Pero ya te informo que el ahorro es brutal.

Aquí mismo en el blog tengo configurada la calidad sin pérdida, y la diferencia es abismal, de más de un 90% de ahorro de tamaño de archivo.

Imagina lo que supone esto en la velocidad de carga de tus páginas.

Detalles a tener en cuenta

Para terminar, vamos a ver algunos detalles que debes considerar antes de lanzarte a convertir tus imágenes a WebP, a pesar de sus evidentes ventajas…

  • No todos los navegadores son compatibles con el formato WebP, así que asegúrate de probar tus imágenes tanto en Google Chrome como en el resto de navegadores que utilicen tus visitantes. Esta información puedes comprobarla en herramientas de analítica como Google Analytics o las mismas estadísticas de tu servidor en SiteGround.
  • En los navegadores no compatibles con WebP se servirán automáticamente las imágenes originales (PNG o JPG) para que no haya problemas de visualización de tus imágenes en estos navegadores.
  • Los servicios de CDN como Cloudflare funcionan perfecto con sitios alojados en SiteGround. Sin embargo, si has configurado algún CNAME para servir imágenes desde la CDN revisa a ver si puedes servir imágenes WebP. Además, estos servicios de CDN en sus versiones de pago también ofrecen la generación de WebP.
  • La posibilidad de convertir a WebP no está disponible en los sitios que aún estén en cPanel, que no se hayan migrado a Site Tools en SiteGround. Si es tu caso te tocará esperar un poco hasta que migren tu cuenta a las Site Tools.
  • Te recuerdo que tienes que usar el plugin SG Optimizer para convertir a WebP, no lo puedes activar en tu cuenta del hosting.
  • Asegúrate de regenerar las imágenes cuando cambies la calidad de las imágenes WebP.
  • Ojo con el espacio en disco y cantidad de inodos, pues las imágenes WebP se almacenan en tu carpeta de subidas y, aunque pesan menos que otros formatos, ocupan capacidad de disco.

Nota final

La velocidad de las webs se está convirtiendo en un factor importante en los Core Web Vitals anunciados por Google que influirán en el posicionamiento en las SERP en el futuro.

Las webs alojadas en SiteGround ya están en la plataforma de Google Cloud, y con WebP estará muy por delante de su competencia alojada en otras empresas.

VALORA Y COMPARTE ESTE ARTÍCULO PARA MEJORAR LA CALIDAD DEL BLOG…
(6 votos, promedio: 4.8)

¿Te gustó este artículo? ¡Ni te imaginas lo que te estás perdiendo en YouTube!

11 comentarios en “Cómo servir gratis imágenes WebP en SiteGround”

  1. Muchas gracias Fernando por esta entrada y por las detalladas instrucciones. Te lanzo una pregunta
    ¿Cuándo crees que los navegadores no compatibles finalmente entrarán por el aro?

    1. Uy, ni idea, de momento de los grandes solo queda Safari

      En cualquier caso SG Optimizer sirve las imágenes originales a los.navegadores no compatibles así que por esa parte sin problema

  2. Muchas gracias Fernando por tus aportaciones, en mi caso no aparece la opción WebP, supongo que será por que estoy en el plan intermedio GrowBig de SiteGround.
    Saludos

  3. Gracias Fernando… Dices que una de las sugerencias importantes que no puedes resolver fácilmente es «Servir imágenes en formatos de próxima generación». Yo utilizo el plugin «WebP Converter for Media», no precisa configuración, y parece que realiza correctamente su trabajo… ¿Lo probaste en alguna instalación?

    Gracias de nuev…

  4. Hola Fernando Buenas tardes
    Veras acabo de instalar en una de nuestras web siguiendo sus instrucciones el SG Optimizer y al activarlo no me deja me sale el siguiente error.

    El plugin no ha podido activarse porque ha provocado un error fatal.
    The SG Optimizer plugin is designed to work only on SiteGround Servers. We’ve deactivated it because it may render your site blank if used on another environment.
    Podría ayudarme por favor ?
    muchisimas gracias y enhorabuena por su trabajo.
    Reciba un Saludo
    Agustín

  5. Hola, he seguido todos los pasos que indicas en el artículo, a través del FTP compruebo que efectivamente se han creado los archivos webp, pero tanto desde la consola como al intentar descargar la imagen sigue apareciendo jpg.
    Utilizo Chrome, no utilizo CDN y los archivos son bastante más ligeros que los jpg originales ¿a qué puede deberse?

    Muchas gracias, David

    1. La conversión no es inmediata, pero sobre todo, tenemos montones de cachés activas (SiteGround, navegador, CDN, el mismo operador) así que debes vaciar antes todas las cachés para que se muestren ya las webp. Incluso haciendo clic derecho para ver una imagen verás que es jpg y luego se descarga la webp.

Deja un comentario

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

 

Ir arriba Ir al contenido