Squoosh y WebP para imágenes más rápidas

La velocidad de carga de un sitio web depende, en gran medida, de cómo manejas tus imágenes. Si trabajas con Lovable y notas que tu landing page tarda en cargar, optimizar imágenes es la primera palanca que deberías mover para mejorar la experiencia del usuario final.

A lo largo de siete años trabajando como diseñador web, hay un patrón que se repite: descargamos fotos enormes de bancos como Unsplash y las subimos al proyecto sin procesarlas. El resultado es una página bonita, pero pesada. Aquí te muestro cómo evitarlo.

¿Por qué las imágenes ralentizan tu landing page?

Cuando descargas una imagen de Unsplash en tamaño grande, fácilmente pesa 643 kilobytes. Si tienes dos en la misma sección, ya estás cargando 1.2 megabytes solo en fotos [01:53]. Suena poco, pero para una sección secundaria como el pricing, es muchísimo.

El primer reflejo debería ser obvio: descarga el tamaño pequeño cuando la plataforma te lo permita. La misma imagen pasa de 643 KB a 47.3 KB, una reducción de aproximadamente 10 veces [02:30].

¿Cuánto puede pesar una imagen en una landing page? Idealmente menos de 100 KB por imagen. Si tu sitio carga lento y tienes fotos de varios megabytes, ese es tu primer punto de ataque.

¿Cómo usar Squoosh para comprimir imágenes sin perder calidad?

Squoosh es una herramienta gratuita creada por Google, disponible en squoosh.app, pensada para optimizar imágenes para la web [02:50]. Su interfaz es minimalista: cargas la imagen y aparece un slider que compara el original con la versión optimizada en tiempo real.

Con los ajustes por defecto, una imagen de 658 KB se reduce un 63% sin esfuerzo [03:24]. Y si te animas a tocar más controles, puedes bajar todavía más:

• Reducir la calidad: bajando el control deslizante, la imagen pasa a 113 KB y la diferencia visual al alejarte es mínima.
• Redimensionar: si reduces el tamaño un 50%, la imagen baja a aproximadamente 34 KB.
• Cambiar el formato: aquí entra el siguiente truco.

¿Qué es WebP y por qué deberías usarlo?

WebP es un formato de imagen desarrollado por Google que comprime mejor que JPEG manteniendo más detalle, especialmente en textos y bordes [05:09]. Es prácticamente el estándar actual para imágenes en la web.

Si bajas la calidad al 50% en JPEG, el texto dentro de la imagen se ve borroso. Con WebP en la misma calidad, el texto sigue siendo legible. Esa es la diferencia que sienten tus usuarios cuando navegan rápido y sin imágenes pixeladas.

¿WebP reemplaza al JPEG? En la mayoría de casos sí. Ofrece mejor compresión y conserva más calidad visual. La excepción son contextos donde necesitas compatibilidad con sistemas muy antiguos.

¿Cómo aplicar lazy loading en Lovable para imágenes?

Una vez que tienes tus imágenes ligeras, el siguiente paso es decirle a Lovable que las cargue solo cuando el usuario las necesita. Esto se llama lazy loading y se activa con un prompt directo: pídele a Lovable que todas las imágenes de la landing carguen de forma diferida cuando el usuario haga scroll [06:13].

El efecto es claro. La sección hero carga al instante, y las imágenes del pricing solo se descargan cuando el usuario llega ahí scrolleando. Antes, el navegador intentaba descargar todo al mismo tiempo, incluso lo que el usuario no estaba viendo.

¿Qué es el lazy loading? Es una técnica que retrasa la carga de imágenes hasta que entran en el viewport del usuario. Mejora el tiempo de carga inicial de la página y reduce el consumo de datos.

¿Cuál es el flujo recomendado para optimizar imágenes en tu proyecto?

Si quieres tener un proceso repetible cada vez que agregues una imagen nueva a tu app en Lovable, sigue esta secuencia:

1. Descarga el tamaño más pequeño disponible desde la fuente (por ejemplo, Unsplash).
2. Pasa la imagen por Squoosh y revisa el slider comparativo.
3. Ajusta calidad, dimensiones y formato a WebP hasta llegar a un peso por debajo de 100 KB.
4. Descarga la imagen optimizada y reemplázala en Lovable indicándole que use la nueva versión.
5. Activa lazy loading para todas las imágenes que estén fuera del viewport inicial.

La optimización de imágenes es probablemente uno de los puntos más ignorados al construir aplicaciones web, pero también uno de los que más impacto tiene en la velocidad. Si tienes varias fotos de un par de megabytes cada una, te garantizo que tu sitio se siente lento.

El siguiente paso natural en este proceso de optimización tiene que ver con el manejo de datos y el caching, para que la información que tu app sirve al usuario también cargue mucho más rápido. ¿Ya pasaste tus imágenes por Squoosh? Cuéntame en los comentarios qué porcentaje de reducción lograste.