Las imágenes grandes son la razón número uno de que las páginas carguen despacio. La solución casi siempre son dos pasos: dar a la imagen las dimensiones correctas y luego comprimir lo que queda. Haz ambos y una foto de 4 MB se convierte en una foto de 150 KB que se ve idéntica en pantalla.
Pongámosle números reales.
Tamaños objetivo a los que apuntar
No necesitas adivinar. Aquí tienes presupuestos de peso prácticos que mantienen las páginas rápidas:
- Principal / banner a todo ancho: por debajo de 200 KB, idealmente ~100-150 KB.
- Foto dentro del artículo: 80-150 KB cada una.
- Miniatura / avatar: 10-30 KB.
- Logotipo o icono (PNG/SVG): por debajo de 30 KB; a menudo mucho menos.
Y las dimensiones:
- Principal a todo ancho: 1600-2000 px de ancho es de sobra para la mayoría de los diseños (duplícalo solo si apuntas a Retina y puedes permitirte los bytes).
- Foto en columna: ajústate al ancho de tu contenido, a menudo 800-1200 px.
- Miniatura: el tamaño al que de verdad se muestra, p. ej. 300-400 px.
Si una sola imagen de una página supera los ~300 KB, suele ser un error que vale la pena arreglar.
Paso 1: redimensiona al ancho real de visualización
Este es el paso que la gente se salta, y es la mayor palanca. Una foto recién salida de un móvil suele tener más de 4000 píxeles de ancho. Si se muestra en una columna de 800 píxeles, estás entregando 25 veces más píxeles de los que la pantalla enseña, y el número de píxeles determina el tamaño de archivo más que ninguna otra cosa.
Usa el redimensionador de imágenes para bajar la imagen al ancho al que de verdad aparece. Redimensiona por píxeles o porcentaje, mantén la proporción bloqueada y deja que el reductor de alta calidad conserve los bordes limpios.
El solo hecho de dimensionar bien suele recortar el tamaño de archivo un 80-90 % antes de haber comprimido un solo byte.
Paso 2: comprime lo que queda
Ahora encoge los datos dentro de esas dimensiones correctas.
- Fotos (JPG/WebP): fija el control de calidad en 75-85. Eso es visualmente sin pérdida para la mayoría de las imágenes mientras recorta el tamaño con fuerza.
- PNG (capturas, gráficos): el compresor de imágenes los reduce a una paleta de 256 colores, ahorrando normalmente un 60-80 % sin cambio visible y manteniendo la transparencia.
El compresor también limita la salida al tamaño original —nunca devuelve algo más grande— y tiene un límite de ancho opcional, así que puedes hacer ambos pasos en una sola pasada: fija el límite en tu ancho objetivo y comprime a la vez. Procesa toda una carpeta por lotes y descárgala como un ZIP.
Elige el formato correcto de paso
Si tus imágenes se van a servir a navegadores modernos, convertir las fotos a WebP normalmente supera a JPEG en otro 25-35 % con la misma calidad. Los gráficos planos se quedan como PNG (o WebP). No guardes fotografías como PNG: ese es el error clásico de hinchazón, fácilmente una penalización de 5-10×.
Un flujo de trabajo realista
Para una entrada de blog con cinco fotos:
- Redimensiona cada una al ancho de tu columna (digamos 1200 px).
- Comprime a calidad 80, o convierte a WebP.
- Confirma que cada una queda por debajo de ~150 KB.
- Comprueba un recorte al 100 % de una imagen para asegurarte de que la calidad aguantó.
Cinco fotos que empezaron en 20 MB en total quedarán en torno a 600 KB: una página que carga en un parpadeo en lugar de atascarse.
Privado y sin conexión
Todo lo anterior funciona por completo en tu navegador con Canvas y WebAssembly. Ninguna imagen se sube a un servidor, y tras tu primera visita las herramientas quedan en caché y funcionan sin conexión. Puedes optimizar las imágenes de toda una entrada sin conexión y sin que nada salga de tu máquina.