Por qué las imágenes son, casi siempre, las culpables de un sitio lento
Cuando un sitio web carga lento, la mayoría de las veces el problema no es “el código” en abstracto: son las imágenes. En la mayoría de los sitios, las fotos representan la mayor parte del peso total de una página —muchas veces más de la mitad—. Una sola foto sacada con un celular moderno puede pesar varios megabytes, y si se sube tal cual a un sitio web, cada visitante tiene que descargar ese peso completo antes de poder ver la página.
La buena noticia es que casi siempre se puede reducir ese peso de forma drástica —a veces hasta un 90%— sin que el ojo humano note ninguna diferencia de calidad. A eso se le llama optimizar imágenes, y es uno de los pasos técnicos más simples con mayor impacto real en la velocidad de un sitio.
Los formatos de imagen más comunes, explicados simple
No todos los formatos de imagen sirven para lo mismo. Estos son los que más vas a encontrar:
- JPG (o JPEG): el formato clásico para fotografías. Comprime bien y es compatible con absolutamente todo, pero no soporta transparencia (fondo “invisible”).
- PNG: soporta transparencia real, ideal para logos o íconos que necesitan verse sobre cualquier fondo de color. A cambio, suele pesar más que un JPG para el mismo contenido.
- WebP: un formato más moderno, desarrollado específicamente para la web, que logra un peso mucho menor que JPG o PNG con calidad visual prácticamente idéntica. Hoy es compatible con todos los navegadores modernos, y es el formato que deberías exigir como estándar para las fotos de tu sitio.
- SVG: no es una foto, es un dibujo hecho con fórmulas matemáticas (lo llamamos “vectorial” en un artículo anterior sobre logos). Sirve para logos, íconos y gráficos simples, no para fotografías reales.
Comprimir: reducir peso sin que se note
Comprimir una imagen significa reducir su tamaño de archivo eliminando información que el ojo humano prácticamente no percibe —detalles microscópicos de color que la mayoría de las personas jamás notaría si desaparecen—. Existen herramientas especializadas que hacen esto de forma automática, logrando reducciones de peso muy grandes (en nuestra experiencia, entre 85% y 90% es completamente normal) manteniendo una calidad visual que a simple vista se ve idéntica a la original.
Redimensionar al tamaño que realmente se necesita
Un error común es subir una foto tal como sale de la cámara o el celular —a veces con un ancho de 4000 píxeles o más— cuando en el sitio se va a mostrar en un espacio de, por ejemplo, 800 píxeles de ancho. El navegador igual tiene que descargar el archivo completo y gigante, aunque después lo muestre chico. Redimensionar la imagen al tamaño real donde se va a usar, antes de subirla, evita este desperdicio completamente innecesario.
Carga diferida: no cargar todo de una vez
Otra técnica común se llama “carga diferida” (lazy loading, en inglés). Consiste en que las imágenes que están más abajo en la página —las que el visitante todavía no ha llegado a ver, porque no ha hecho scroll hasta ahí— no se descargan de inmediato al abrir la página, sino solo cuando el visitante se acerca a esa parte. Esto hace que la carga inicial del sitio sea mucho más rápida, especialmente en páginas largas con muchas fotos.
Qué exigir como mínimo al construir o actualizar tu sitio
- Que las fotografías se entreguen en formato WebP (o se conviertan automáticamente a ese formato al subirlas).
- Que las imágenes se redimensionen al ancho real necesario antes de subirlas, no “tal cual salieron de la cámara”.
- Que exista compresión aplicada de forma consistente, no solo en algunas imágenes sí y en otras no.
- Que las imágenes fuera de la vista inicial usen carga diferida.
El resultado práctico
Un sitio con imágenes bien optimizadas carga notablemente más rápido, especialmente para visitantes con conexión móvil más lenta —que en Chile sigue siendo una parte importante del tráfico total—. Y como vimos en un artículo anterior sobre velocidad de carga, esto no solo mejora la experiencia del visitante: también influye en cómo Google posiciona tu sitio en los resultados de búsqueda.
En BioCapa aplicamos este proceso de optimización de forma sistemática a cada imagen que sube cualquier proyecto —incluyendo las de nuestro propio blog—, precisamente porque es uno de esos detalles técnicos invisibles para el cliente final, pero que se nota inmediatamente en la velocidad real del sitio.
