El formato de imágenes que usas en tu web puede marcar la diferencia entre un Lighthouse score de 60 y uno de 95. Esta guía te lleva desde la auditoría inicial hasta tener todas las imágenes optimizadas y servidas en el formato correcto según el navegador del visitante.
No necesitas conocimientos avanzados. Sí necesitas entre 20 y 30 minutos.
Paso 1 — Audita el estado actual
Antes de cambiar nada, necesitas saber con qué estás trabajando.
Abre PageSpeed Insights (pagespeed.web.dev) y analiza tu web. Busca específicamente:
- «Serve images in next-gen formats»: te lista las imágenes que aún están en JPG/PNG y cuánto peso podrías ahorrar
- «Properly size images»: imágenes que se sirven más grandes de lo que se muestran
- «Defer offscreen images»: imágenes que deberían tener lazy loading
Anota el peso total de imágenes y el potencial de ahorro que te indica la herramienta. Ese es tu punto de partida.
Paso 2 — Descarga todas las imágenes del proyecto
Trabaja sobre los originales, nunca sobre las imágenes ya comprimidas. Si tienes acceso al repositorio o CMS, descarga las imágenes en su versión de máxima calidad.
Si los originales se han perdido y solo tienes los archivos publicados, trabaja con lo que tienes — pero considera esto un problema técnico a documentar para el futuro.
Paso 3 — Convierte y optimiza en batch
Este es el núcleo del proceso. Tienes dos opciones:
Opción A — Herramienta online sin instalación: Usa Pixelaso, que procesa todo en tu navegador sin subir nada a servidores externos. Arrastra todas las imágenes a la vez, selecciona WebP como formato destino, ajusta la calidad al 82% (punto óptimo entre calidad visual y peso), activa la opción de redimensionado si alguna imagen supera las dimensiones en que se muestra, y descarga el ZIP con todo procesado.
Opción B — Línea de comandos con Sharp (Node.js):
npm install sharp-cli -g
# Convertir un directorio entero de JPGs a WebP
sharp -i ./images/*.jpg -o ./images/webp/ --format webp --quality 82
# Generar también versión AVIF
sharp -i ./images/*.jpg -o ./images/avif/ --format avif --quality 65La ventaja de la línea de comandos es la automatización en proyectos grandes o pipelines de CI/CD. Para proyectos pequeños o freelancers, la herramienta online es más rápida.
Paso 4 — Implementa srcset para servir el formato correcto
No todos los navegadores soportan AVIF. No puedes simplemente sustituir todos tus JPGs por AVIFs. La solución correcta es servir el formato más moderno que soporte el navegador de cada visitante usando el elemento <picture>:
<picture>
<!-- AVIF para navegadores modernos que lo soportan -->
<source srcset="imagen.avif" type="image/avif">
<!-- WebP como fallback para Chrome/Firefox/Edge/Safari modernos -->
<source srcset="imagen.webp" type="image/webp">
<!-- JPG como fallback universal -->
<img src="imagen.jpg" alt="Descripción de la imagen" width="800" height="600" loading="lazy">
</picture>El navegador selecciona automáticamente el primero que soporta. Un Chrome moderno carga AVIF. Un Safari antiguo carga JPG. Cada uno recibe el archivo más ligero posible para sus capacidades.
Importante: incluye siempre width y height en el <img> para evitar Cumulative Layout Shift (CLS), que penaliza el Lighthouse score.
Paso 5 — Añade lazy loading en imágenes fuera del viewport inicial
Cualquier imagen que no sea visible sin hacer scroll debe cargarse de forma diferida:
<img src="imagen.jpg" loading="lazy" alt="..." width="800" height="600">Un atributo. Sin JavaScript. Sin librerías. Soportado en todos los navegadores modernos. Las imágenes por encima del fold (las primeras que ve el usuario) NO deben tener lazy loading — añade loading="eager" o simplemente omite el atributo.
Paso 6 — Verifica el resultado
Vuelve a PageSpeed Insights y analiza la web de nuevo. Compara los scores antes y después. Los cambios típicos tras este proceso:
- Performance score: sube 15–40 puntos en webs con imágenes no optimizadas
- Largest Contentful Paint (LCP): reducción de 1–3 segundos
- Peso total de la página: reducción del 40–70%
Si el score no mejora tanto como esperabas, revisa si las imágenes de fondo en CSS también están optimizadas — este proceso solo cubre imágenes en HTML.
Resumen del proceso
| Paso | Acción | Tiempo |
|---|---|---|
| 1 | Auditar con PageSpeed Insights | 5 min |
| 2 | Descargar imágenes originales | 5 min |
| 3 | Convertir a WebP/AVIF en batch | 5–10 min |
| 4 | Implementar <picture> con srcset |
10–15 min |
| 5 | Añadir lazy loading | 2 min |
| 6 | Verificar resultado | 3 min |
Conclusión
La optimización de imágenes es una de las inversiones de tiempo con mayor retorno en desarrollo web. Treinta minutos de trabajo pueden suponer mejoras significativas en velocidad, SEO y experiencia de usuario que se mantienen durante años.
El proceso descrito es aplicable a cualquier tipo de web — WordPress, Astro, Next.js, HTML estático — y no requiere cambios en el backend ni en la arquitectura del proyecto.
