Las imágenes suelen ser lo más pesado de una página, lo que las convierte en la mayor palanca de velocidad que controlas. Acierta con sus dimensiones y su peso de archivo y las páginas se sienten instantáneas. Falla y suspendes las Core Web Vitals por muy limpio que sea tu código. Aquí tienes los objetivos y el flujo de trabajo para alcanzarlos.
Objetivos de dimensiones
Ajusta el tamaño en píxeles de la imagen al lugar donde aparece de verdad. Guía aproximada:
- Hero a todo el ancho: 1600–2000 px de ancho cubre la mayoría de los diseños de escritorio. Ir más ancho rara vez ayuda y cuesta muchos bytes.
- Foto dentro del contenido: el ancho de tu columna de contenido, habitualmente 800–1200 px.
- Miniatura / imagen de tarjeta: 300–500 px.
- Avatar / icono: 48–200 px al tamaño en que se muestra.
Servir una imagen de 4000 px en un hueco de 800 px significa que el navegador descarga y decodifica 25 veces los píxeles que jamás mostrará. Eso es puro desperdicio — y decodificar imágenes grandes también atasca el hilo principal.
Objetivos de peso
Las dimensiones fijan el techo; la compresión fija el peso real. Apunta a:
- Imagen hero: por debajo de 200 KB (idealmente 100–150 KB).
- Foto dentro del contenido: 80–150 KB.
- Miniatura: 10–30 KB.
- Total de imágenes por página: intenta quedarte por debajo de ~1 MB para toda la página.
Si una sola imagen supera los ~300 KB, trátalo como un fallo a investigar.
Por qué esto impulsa las Core Web Vitals
El Largest Contentful Paint (LCP) de Google mide cuánto tarda en renderizarse el elemento más grande en pantalla — y en la mayoría de las páginas, ese elemento más grande es una imagen (normalmente el hero). Un hero pesado y sobredimensionado infla directamente el LCP. Un buen LCP está por debajo de 2,5 segundos; un hero abotargado puede superarlo en conexiones móviles él solo.
Dos ventajas más relacionadas con las imágenes:
- Fija los atributos de ancho y alto para que el navegador reserve espacio — eso protege tu puntuación de Cumulative Layout Shift (CLS).
- Prioriza el hero (no cargues de forma diferida la imagen LCP) y carga de forma diferida todo lo que quede por debajo del pliegue.
El flujo de trabajo de dos pasos
Paso 1 — redimensiona al ancho real de visualización. Usa el Redimensionador de imágenes para bajar cada imagen al tamaño en que aparece. Bloqueo de aspecto activado, reducción de alta calidad. Esto por sí solo a menudo recorta el peso un 80–90%.
Paso 2 — comprime. Alimenta los archivos redimensionados al Compresor de imágenes: calidad 75–85 para fotos (sin pérdidas visibles), cuantización a 256 colores para los PNG. Nunca genera un archivo más grande que el original, maneja lotes y tiene un límite de ancho opcional para que puedas hacer efectivamente ambos pasos a la vez. Para navegadores modernos, convertir las fotos a WebP exprime otro 25–35%.
Mídelo, no adivines
Una vez optimizadas tus imágenes, confirma que la página se volvió realmente más rápida. La herramienta Page QA de IMG.DIY audita una URL en vivo a través de Google PageSpeed Insights e informa del peso de las imágenes de la página para que puedas detectar cualquier archivo que siga siendo demasiado pesado. Una advertencia: Page QA necesita conexión a internet — a diferencia de las herramientas de imagen, llama a la API de PageSpeed de Google, así que no puede funcionar sin conexión. Úsala después de desplegar para comprobar tu LCP real y tu presupuesto de imágenes.
Privado por defecto
Las herramientas de redimensionar, comprimir y convertir funcionan enteramente en tu navegador con Canvas y WebAssembly — no se sube nada, y tras tu primera visita quedan en caché y funcionan sin conexión. Puedes preparar las imágenes de todo un sitio sin conexión, y luego ejecutar Page QA con conexión una vez que la página esté en vivo.
Repaso rápido: dimensiona correctamente, comprime a los objetivos de peso, prioriza el hero para el LCP y verifica con Page QA.