Tus Imágenes Probablemente Son Muy Grandes (Así es Como Arreglarlo)
La mayoría de sitios web cargan lentamente por imágenes sin optimizar. Unos minutos de compresión pueden reducir tu tiempo de carga a la mitad.
Hice una auditoría de sitio web la semana pasada para el portafolio de fotografía de un amigo. Imágenes hermosas. Trabajo precioso.
La página de inicio tardó 12 segundos en cargar.
¿El culpable? Una sola imagen hero de 8MB. En una conexión de teléfono, los visitantes se iban antes de ver nada.
Esto pasa más de lo que piensas. Así que hablemos de arreglarlo.
El Problema que Nadie Nota
Cuando exportas una imagen desde Photoshop o tu teléfono, usualmente es mucho más grande de lo necesario. Una foto de 4000x3000 directamente de una cámara puede ser de 15MB.
Para un sitio web, raramente necesitas más de 200KB, a veces menos.
La diferencia importa:
| Tamaño de Imagen | Tiempo de Carga (3G) | Tiempo de Carga (4G) | |------------------|----------------------|----------------------| | 5MB | 40+ segundos | 8 segundos | | 500KB | 4 segundos | menos de 1 segundo | | 100KB | menos de 1 segundo | instantáneo |
Esa imagen de 5MB no solo es lenta, también está consumiendo los planes de datos de tus visitantes.
Paso 1: Redimensiona Primero
Antes de comprimir nada, verifica las dimensiones.
Si tu sitio web muestra una imagen a 800 píxeles de ancho, no tiene sentido subir un original de 4000 píxeles. Estás enviando 5 veces más datos de lo necesario.
Averigua el tamaño más grande al que tu imagen se mostrará (verifica en escritorio, usualmente es el más grande), luego redimensiona a ese ancho. Agrega tal vez 20% de margen para pantallas retina si quieres.
Paso 2: Comprímela
Ahora que tu imagen es del tamaño correcto, comprímela.
Los algoritmos de compresión modernos son sorprendentemente buenos. A menudo puedes reducir el tamaño del archivo un 60-80% sin pérdida visible de calidad. En serio: pon el antes y después lado a lado e intenta detectar la diferencia.
Algunas cosas que debes saber:
Calidad JPEG 80-85 usualmente es el punto ideal. Por debajo de 70, empiezas a ver artefactos. Por encima de 90, estás desperdiciando bytes en mejoras invisibles.
PNG es sin pérdida, así que comprime menos. Pero aún vale la pena pasarlo por un compresor para eliminar metadatos y optimizar la codificación.
WebP te da lo mejor de ambos mundos: archivos más pequeños que JPEG con soporte de transparencia como PNG. La mayoría de navegadores lo soportan ahora.
Paso 3: Elige el Formato Correcto
Esto importa más de lo que la gente se da cuenta.
Usa JPEG para:
- Fotos
- Imágenes con muchos colores y degradados
- Fondos
Usa PNG para:
- Logos
- Íconos
- Capturas de pantalla
- Cualquier cosa que necesite transparencia
Usa WebP para:
- Todo, si tu audiencia usa navegadores modernos
- Respaldo a JPEG/PNG para navegadores antiguos
Usa SVG para:
- Gráficos simples
- Íconos
- Logos (si tienes el archivo vectorial)
- Cualquier cosa que necesite escalar infinitamente
Números Reales
Esto es lo que pasó cuando optimicé el portafolio de mi amigo:
| Antes | Después | |-------|---------| | Imagen hero: 8MB | Imagen hero: 180KB | | Grid de miniaturas: 12MB total | Grid de miniaturas: 400KB total | | Carga de página: 12 segundos | Carga de página: 1.8 segundos |
Mismas imágenes. Misma calidad visual. Solo optimización apropiada.
La Manera Perezosa
Si estás subiendo a WordPress, Squarespace o plataformas similares, a menudo comprimen imágenes automáticamente. Pero "a menudo" no es "siempre", y su compresión no siempre es lo suficientemente agresiva.
Mejor enfoque: optimiza antes de subir. Tú controlas la calidad, y no dependes de lo que la plataforma decida hacer.
Toma 2 minutos por imagen. Tus visitantes te lo agradecerán, incluso si nunca saben por qué tu sitio se siente rápido.
Checklist Rápido
Antes de subir cualquier imagen:
- ¿Es del tamaño correcto? No subas 4000px cuando necesitas 800px
- ¿Está comprimida? Pásala por un compresor
- ¿Es el formato correcto? JPEG para fotos, PNG para gráficos, WebP si es posible
- ¿La probaste? Mira la versión final. Si se ve mal, reduce la compresión
La velocidad del sitio web es principalmente sobre imágenes. Arregla tus imágenes y habrás arreglado la mitad de tus problemas de rendimiento. Todo lo demás es optimización en los márgenes.
Comienza con tus imágenes más grandes primero. Usualmente son banners hero y fotos de ancho completo. Esas te dan las mayores ganancias con el menor esfuerzo.