Por qué el tamaño de imagen importa más de lo que crees
Una vez audité el sitio de portafolio de un amigo que tardaba 11 segundos en cargar. El culpable no era el código ni el alojamiento: eran seis capturas de pantalla PNG sin comprimir que sumaban 24 MB. Después de comprimirlas correctamente, la misma página cargaba en menos de 2 segundos y se veía idéntica. Las imágenes son casi siempre los bytes más pesados de una página, lo que hace que la compresión sea la mejora de rendimiento de mayor impacto disponible para la mayoría de los propietarios de sitios.
El flujo de compresión en 3 pasos
1. Elige primero el formato correcto. La elección del formato importa más que cualquier control de calidad. Las fotografías deben ser WebP o AVIF. Los gráficos con colores planos y texto deben ser PNG (o SVG si son vectoriales). Nunca uses BMP o TIFF en la web. Si no estás seguro, convierte con nuestro conversor de JPG a WebP y compara.
2. Redimensiona antes de comprimir. Una foto de 4000 px mostrada a 800 px de ancho lleva 25 veces más píxeles de los necesarios. Redimensiona primero al tamaño de visualización con nuestro redimensionador de imágenes: esto solo ya suele recortar el 80 % del tamaño de archivo.
3. Ajusta la calidad con nuestro compresor. Sube la imagen redimensionada a nuestro compresor de imágenes, establece la calidad en 80 y compara el antes y el después. Para la mayoría de las fotos, la calidad 75-85 es visualmente indistinguible de 100 con una fracción del tamaño.
¿Qué tan bajo puedes llegar?
Esta es mi regla práctica tras comprimir miles de imágenes:
- Fotos hero/banner: WebP con calidad 80: nítidas en pantallas retina, normalmente 100-200 KB
- Imágenes de contenido de blog: WebP con calidad 75: alrededor de 50-100 KB cada una
- Miniaturas: WebP con calidad 70: menos de 30 KB
- Logotipos/iconos: SVG si es posible, si no PNG; nunca JPEG para estos
Con pérdida vs. sin pérdida: qué ocurre realmente
La compresión con pérdida (JPEG, WebP con calidad <100) descarta permanentemente datos de imagen que el ojo humano apenas nota: los degradados de color sutiles se simplifican. La compresión sin pérdida (PNG, WebP a 100) conserva cada píxel pero produce archivos más grandes. Para la web, con pérdida con ajustes de calidad sensatos gana siempre. La «pérdida» es invisible; la ganancia de velocidad es muy visible en tu tasa de rebote.
Preguntas frecuentes
- ¿Comprimir mis imágenes las hará ver borrosas?
- No si lo haces bien. Con WebP calidad 80, las diferencias con el original son esencialmente invisibles al ojo humano. Los problemas solo aparecen por debajo de calidad 60 o cuando amplías una imagen pequeña. Conserva siempre tus originales como respaldo.
- ¿Debería comprimir PNG o convertir a WebP?
- Convierte a WebP. Un PNG comprimido al máximo suele ser 2-3 veces más grande que un WebP con calidad visual equivalente. La única razón para mantener PNG es cuando necesitas máxima compatibilidad con software muy antiguo.
- ¿La compresión de imágenes afecta el SEO?
- Sí, positivamente. Google usa la velocidad de página (Core Web Vitals) como factor de posicionamiento, y las imágenes suelen ser el mayor contribuyente a cargas lentas. Las imágenes comprimidas también reducen los costos de ancho de banda.