Para la velocidad de página: ¿WEBP o un JPG bien optimizado?

Un dilema mal planteado

La frase "mi sitio va lento, voy a pasar las imágenes a WEBP" se oye muy a menudo. Sin embargo, el problema de velocidad de página no suele deberse únicamente a la elección de formato, y pasar a WEBP no siempre es el paso que más ganancia aporta.

En este artículo comparamos dos enfoques: optimizar bien los JPG existentes y migrar el formato a WEBP. Abordamos qué aporta cada uno, dónde se atasca y en qué orden conviene hacerlos.

Los tres factores que determinan el peso de una imagen

Cuántos bytes ocupa una imagen lo determinan tres cosas, y el formato es solo una de ellas.

Las dimensiones en píxeles. El ancho y el alto de la imagen. Reducir una imagen a la mitad deja el número de píxeles en una cuarta parte. Esta es la palanca más potente sobre el tamaño de archivo.

El ajuste de calidad. Cuánta información se descarta en la compresión con pérdidas. Un ajuste innecesariamente alto gasta demasiados bytes en un detalle que el ojo no percibe.

La eficiencia del formato. Con cuántos bytes se puede representar la misma imagen. Aquí es donde WEBP supera a JPG.

En la mayoría de los sitios, el mayor desperdicio está en los dos primeros factores. Es muy habitual servir a resoluciones enormes imágenes que se muestran pequeñas en pantalla y subir el ajuste de calidad al máximo a ciegas. Cambiar el formato mientras existen estos dos problemas se parece a llenar más rápido un cubo agujereado.

¿Hasta dónde puede llegar un JPG optimizado?

Un JPG bien optimizado no debe subestimarse. Un JPG reducido al tamaño correcto, guardado con un ajuste de calidad razonable y limpio de metadatos innecesarios es mucho más pequeño que su versión sin optimizar.

La ventaja de JPG en este punto es la ausencia de fricción: cualquier herramienta lo genera, cualquier navegador lo abre, encaja en cualquier flujo de trabajo y no plantea ninguna duda de compatibilidad. Es una mejora que puedes aplicar sin cambiar nada en tu sistema actual.

Su límite, en cambio, es el propio formato. La estructura de bloques fijos de JPG y su incapacidad para predecir a partir de los bloques vecinos limitan la eficiencia a partir de cierto punto. Hay un techo en lo que puedes conseguir con la optimización.

¿Qué añade WEBP?

WEBP eleva ese techo derivado del diseño de JPG. Gracias a que puede predecir a partir de los bloques vecinos, variar el tamaño de bloque según el contenido y usar una fase final de codificación más eficiente, emplea menos bytes a igual calidad visual.

A eso añade dos capacidades más: soporte de transparencia y modo sin pérdidas. Es decir, puedes usar un único formato tanto para tus logotipos transparentes como para tus fotografías.

Su coste es el paso que se añade al flujo de trabajo. Tu proceso de producción, almacenamiento y publicación de imágenes incorpora una fase de conversión. Si ese paso no se automatiza, con el tiempo se descuida y el sistema pierde coherencia.

¿En qué orden hacerlo?

En la práctica, el orden más eficiente es este, y muy a menudo se intenta al revés:

Primero el tamaño. Reduce las imágenes al tamaño en que realmente se usarán en la página. Preparar el doble de resolución para pantallas de alta densidad es razonable, pero cinco veces es innecesario. Este paso, por sí solo, aporta la mayor ganancia en la mayoría de los sitios.

Después el ajuste de calidad. Guarda unas cuantas imágenes representativas con distintos ajustes y compáralas a tamaño real. Adopta el ajuste más agresivo cuya diferencia no logres percibir. Suele ser un punto más agresivo de lo que se cree.

Después el formato. Tras haber hecho los dos pasos anteriores, pasar a WEBP recoge el margen restante. Puedes convertir tu archivo usando la herramienta de conversión de JPG a WEBP.

Y por último la entrega. Técnicas como cargar las imágenes solo cuando son visibles o servir los tamaños adecuados para cada pantalla mejoran la velocidad percibida con independencia del formato.

Tabla de decisión

Si tus imágenes no están nada optimizadas: ocúpate primero del tamaño y del ajuste de calidad. Obtendrás una gran ganancia incluso sin cambiar de formato.

Si tus imágenes están optimizadas pero la página sigue pesando: pasar a WEBP aporta una ganancia adicional significativa. En este punto la diferencia de formato se nota de verdad.

Si tus imágenes transparentes están en PNG: migrarlas a WEBP sin pérdidas suele dar una buena ganancia y conserva la transparencia.

Si tu flujo de trabajo es manual y desordenado: ordena el proceso antes de cambiar de formato. Un paso de conversión sin automatizar no se aplica a largo plazo.

Si tienes muy pocas imágenes y la página ya va rápida: no hagas nada de esto. Optimizar cuando no hay un problema medible es intentar resolver un problema que no existe.

En resumen

Esto no es una elección de "o lo uno o lo otro", sino una cuestión de orden. Reducir las imágenes al tamaño correcto y bajar el ajuste de calidad a un nivel razonable aporta la mayor ganancia en la mayoría de los sitios y no requiere cambiar de formato. WEBP, por su parte, recoge el margen restante una vez hecho ese trabajo de base y añade encima la flexibilidad de la transparencia. El mejor resultado viene de aplicar ambos, en orden y de forma conjunta.