Cómo reduje el tamaño de mis imágenes un 80% sin que nadie se diera cuenta

Administro un sitio web. Cada imagen en él era, en algún momento, cómicamente sobredimensionada. Imágenes de héroe de doce megas. Capturas de pantalla de cinco megas. Un logotipo que pesaba más que toda la página HTML en la que vivía.

Cuando finalmente hice una auditoría de rendimiento, los resultados fueron brutales. Mi página de inicio pesaba 23 MB. La mayoría eran imágenes. La mayoría de los visitantes esperaban varios segundos para ver fotos que apenas miraban.

Así que empecé a comprimir. Agresivamente. Y lo sorprendente es que nadie se dio cuenta.

Mostré a veinte personas una comparación lado a lado — imagen original de 5.2 MB vs comprimida de 1.1 MB — y les pedí que encontraran la diferencia. Diecinueve no pudieron. La única persona que creyó ver una diferencia cambió de opinión cuando intercambié las posiciones.

Ese experimento cambió mi forma de pensar sobre la calidad de las imágenes. Todos estamos acumulando píxeles que no necesitamos.

Por qué las Imágenes Están Hinchadas

Tu cámara o teléfono guarda las imágenes con la máxima calidad por defecto. Una cámara de smartphone moderna produce imágenes de 4000-6000 píxeles de ancho. Para uso web, la mayoría de las imágenes se muestran a 1200-2000 píxeles de ancho. Estás guardando cuatro veces más píxeles de los que necesitas, y cada uno ocupa espacio.

La compresión funciona eliminando información redundante. La compresión JPEG es especialmente buena en esto — descarta datos de color que el ojo humano apenas nota. El truco está en encontrar el punto óptimo donde el archivo se reduce drásticamente pero la diferencia visible es imperceptible.

Mis Ajustes Exactos

Esto es exactamente lo que hago, y funciona para el 90% de las imágenes:

1. Abrir Image Compress. Maneja JPEG y PNG. Sin instalación, sin cuenta.
2. Establecer calidad al 70-80%. Este es el rango mágico para JPEG. Por debajo del 60%, empiezan a aparecer artefactos. Por encima del 85%, el tamaño del archivo apenas baja. 75% es mi valor predeterminado. Nunca he recibido una queja.
3. Redimensionar si es necesario. Para imágenes que se mostrarán a menos de pantalla completa, redimensiono el borde más largo a 2000 px. Esto solo reduce el tamaño del archivo un 60-70% antes de que la compresión siquiera actúe.
4. Comprobar la vista previa. La herramienta muestra antes/después. Acerca el zoom. Si no puedes ver artefactos al 100% de zoom, tampoco los verán tus visitantes.

Aquí hay números reales de mi último lote:

• Foto principal: 8.1 MB a 1.3 MB (reducción del 84%)
• Captura de pantalla: 3.4 MB a 512 KB (reducción del 85%)
• Imagen de producto: 5.7 MB a 894 KB (reducción del 84%)
• Logotipo (PNG): 1.2 MB a 187 KB (reducción del 84%, convertido a JPEG)

Mi página de inicio pasó de 23 MB a 4.1 MB. El tiempo de carga bajó de 4.2 segundos a 0.9 segundos. Y de nuevo: nadie se dio cuenta. Ni un solo visitante me envió un correo diciendo "oye, tus imágenes se ven un poco menos nítidas."

La lección es simple: estás guardando demasiados píxeles. Deja que algunos se vayan. Tus visitantes te lo agradecerán con tiempos de carga más rápidos, y no notarán nada.