Optimizacion de imagenes y Core Web Vitals: guia practica
Las imagenes son el mayor factor en el rendimiento web. Asi es como optimizarlas correctamente y mejorar tus puntuaciones de Core Web Vitals.
Google empezo a usar Core Web Vitals como factor de posicionamiento hace unos anos, y de repente todos se preocuparon por la velocidad de la pagina. Pero cuando investigas que realmente hace las paginas lentas, casi siempre es el mismo culpable: las imagenes.
En una pagina web promedio, las imagenes representan alrededor del 50% del peso total de la pagina. Resuelve las imagenes y habras resuelto la mitad del rompecabezas del rendimiento.
Las tres metricas que importan
LCP (Largest Contentful Paint) — Que tan rapido se carga el elemento visible mas grande. Normalmente, es una imagen. Google quiere esto bajo 2.5 segundos.
CLS (Cumulative Layout Shift) — Cuanto se mueven las cosas mientras la pagina carga. Las imagenes sin dimensiones definidas son una causa principal. Objetivo: menos de 0.1.
INP (Interaction to Next Paint) — Que tan rapido responde la pagina a las acciones del usuario. Las imagenes pesadas pueden bloquear el hilo principal y retrasar las interacciones. Objetivo: menos de 200ms.
El impacto es real
Esto es lo que pasa cuando optimizas imagenes en un sitio de contenido tipico:
| Metrica | Antes de optimizar | Despues de optimizar | |---------|--------------------|--------------------| | Peso de la pagina | 4.2 MB | 890 KB | | LCP | 4.8 segundos | 1.6 segundos | | CLS | 0.25 | 0.02 | | Tiempo de carga (3G) | 18 segundos | 4 segundos |
No es cherry-picking. Esos numeros vienen de sitios reales en los que he trabajado. Las correcciones no son complicadas — solo necesitan un poco de intencion.
Paso 1: tamano correcto, formato correcto
La mayor ganancia es servir imagenes al tamano correcto. Una imagen hero de 3000px que se muestra a 1200px esta enviando 6x mas pixeles de los necesarios.
Redimensiona tus imagenes para que coincidan con su tamano de visualizacion. Para pantallas Retina, haz 2x — si una imagen se muestra a 600px, hazla de 1200px.
Luego elige el formato correcto:
- WebP — 25-35% mas pequeno que JPEG a calidad equivalente. Usalo como predeterminado.
- AVIF — Aun mas pequeno que WebP, pero la codificacion es mas lenta y el soporte del navegador esta poniendose al dia.
- JPEG — Respaldo universal. Sigue siendo bueno para fotos donde WebP no es opcion.
- PNG — Solo para imagenes que necesitan transparencia y no pueden usar WebP.
- SVG — Para iconos, logos e ilustraciones simples. Tamano minimo, escalado infinito.
Paso 2: comprimir agresivamente
La mayoria de imagenes llevan mas calidad de la que las pantallas pueden mostrar. Puedes comprimir un JPEG a calidad 80 y nadie notara la diferencia — pero el archivo sera 40-60% mas pequeno.
Una guia aproximada:
| Nivel de calidad | Caso de uso | Ahorro tipico | |------------------|-------------|---------------| | 90-100 | Portfolios de fotografia | 10-20% | | 75-85 | Imagenes web generales | 40-60% | | 60-75 | Miniaturas, fondos | 60-80% |
No adivines los niveles de calidad. Comprime, luego mira el resultado. Si no notas la diferencia, la compresion esta bien.
Paso 3: corregir el layout shift
Cada imagen en tu pagina deberia tener atributos width y height explicitos, o usar CSS aspect-ratio. Sin estos, el navegador no sabe cuanto espacio reservar, y el contenido salta mientras las imagenes cargan.
<!-- Bien: el navegador sabe el espacio necesario -->
<img src="photo.webp" width="800" height="600" alt="Descripcion" />
<!-- Tambien bien: CSS aspect ratio -->
<img src="photo.webp" style="aspect-ratio: 4/3; width: 100%;" alt="Descripcion" />
Solo esto puede llevar tu CLS de suspendido a aprobado.
Paso 4: carga diferida de imagenes fuera de pantalla
Si una imagen no es visible cuando la pagina se carga por primera vez, no la cargues hasta que el usuario haga scroll hasta ella.
<img src="photo.webp" loading="lazy" alt="Descripcion" />
Un atributo. Eso es todo. Pero no cargues de forma diferida tu imagen hero o elemento LCP — eso necesita cargar inmediatamente.
Paso 5: usar imagenes responsive
Sirve diferentes tamanos para diferentes anchos de pantalla. Un movil no necesita una imagen de 1400px.
<img
srcset="photo-400.webp 400w, photo-800.webp 800w, photo-1200.webp 1200w"
sizes="(max-width: 600px) 400px, (max-width: 1000px) 800px, 1200px"
src="photo-800.webp"
alt="Descripcion"
/>
Si, significa generar multiples tamanos. Pero el ahorro de ancho de banda en movil es significativo.
SVG: la optimizacion a menudo olvidada
Si tienes iconos o logos como PNG, conviertelos a SVG. Un icono PNG de 50KB se convierte en un SVG de 3KB que se ve perfecto a cualquier tamano.
Incluso los SVG existentes generalmente se pueden optimizar. La mayoria de herramientas de diseno exportan SVG con metadatos extra, precision innecesaria y capas ocultas. Pasarlos por un optimizador tipicamente reduce el tamano un 30-60%.
Optimiza tus SVG para exprimir esos bytes extra.
Checklist de auditoria rapida
Revisa esto para cualquier pagina que quieras optimizar:
- Mide primero — Usa Lighthouse o PageSpeed Insights para tus puntuaciones actuales
- Revisa tamanos de imagen — Alguna imagen mas ancha que su tamano de visualizacion?
- Revisa formatos — Estas usando WebP donde es posible?
- Revisa compresion — Pasa las imagenes por un compresor
- Revisa dimensiones — Cada
<img>tiene width y height? - Revisa carga diferida — Las imagenes fuera de pantalla se cargan de forma diferida?
- Mide de nuevo — Compara tus nuevas puntuaciones
La optimizacion de imagenes no es trabajo glamuroso, pero es la mejora de rendimiento de mayor impacto que puedes hacer. La mayoria de paginas pueden reducir su tiempo de carga a la mitad simplemente sirviendo imagenes correctamente dimensionadas y comprimidas en formatos modernos. Empieza con tus paginas mas pesadas y ve bajando.