Academia › Construir › Crear la web
El peso que no ves en cada foto
Sales sabiendo cuánto debe pesar el archivo de cada foto (no cómo se ve en pantalla) y en qué formato guardarla, para que tu web abra rápido sin renunciar a las fotos.
Ya sabes medir en tu móvil, con dos rayas de cobertura, cuánto tarda tu web en abrir, y el número a partir del cual toca corregirla. Ahora toca mirar qué está pesando tanto. Subes la foto del plato, del corte de pelo, del local recién pintado. En tu propio móvil se abre al instante y se ve perfecta. En tu web, esa misma foto tarda tres o cuatro segundos en aparecer, y el cliente con dos rayas de cobertura ya se ha ido antes de verla.
No falla la foto. Falla que estás confundiendo dos cosas que no tienen nada que ver entre sí: lo grande que se ve la foto en la pantalla, y cuánto pesa el archivo que el móvil del cliente tiene que descargar entero antes de mostrar nada. Una foto puede verse diminuta en tu web y pesar una barbaridad, porque nadie la ha tocado desde que salió de la cámara.
Lo que se ve y lo que pesa no son lo mismo
Una foto recién sacada con un móvil actual pesa, sin tocarla, entre 3.000 y 8.000 kilobytes (KB, la unidad con la que se mide cuánto ocupa un archivo). Para verse perfecta como imagen de portada en tu web no necesita pesar más de 200 KB: veinte veces menos. Para una miniatura de catálogo, con 50 KB sobra de sobra.
Esa diferencia no se nota mirando la foto. Se nota en el segundo y medio que tarda de más en llegar, multiplicado por cada foto que tenga la página. Una ficha de servicio con seis fotos sin tocar puede sumar 30.000 KB solo en imágenes. La misma ficha, con las fotos preparadas antes de subirlas, no llega a 1.500 KB. Esa diferencia es la que decide si el cliente espera o se va.
Lo que haces antes de subir cada foto
- 1Recorta al encuadre real
Si en tu web solo se ve un cuadrado del centro de la foto, no subas el rectángulo entero: recórtalo tú antes. Lo que se descarta no debe ni descargarse. - 2Redimensiona al ancho que va a ocupar
Si la foto de portada ocupa 1.200 píxeles de ancho en pantalla, no hace falta subirla a 4.000 píxeles: esos píxeles de más son peso muerto que nadie ve. - 3Guárdala comprimida
Al exportar o guardar, elige calidad del 70-80%. A simple vista casi nadie nota la diferencia; en peso del archivo, sí, y mucha. - 4Mira el peso antes de subirla
En el móvil, mantén el dedo sobre la foto en la galería; en el ordenador, clic derecho y "propiedades". Si pasa de medio mega, vuelve al paso anterior.
JPEG o PNG: la decisión que casi nadie mira
Además del peso está el formato: la extensión con la que guardas el archivo. Aquí el fallo más habitual es guardarlo todo en PNG porque "se ve mejor", sin saber que un PNG de una foto normal pesa varias veces más que un JPEG que en pantalla se ve exactamente igual. La diferencia entre uno y otro no está en la calidad que ves, está en para qué se inventó cada uno.
- Comprime mucho sin que se note a simple vista
- Pensado para fotos: muchos colores, degradados, luz
- No pierde ni un pelo de nitidez
- Permite fondo transparente
- Para una foto normal pesa entre tres y cinco veces más que el JPEG equivalente
Cual elijo: Guarda todas tus fotos (producto, local, equipo) en JPEG. Reserva el PNG solo para tu logo o un dibujo que necesite fondo transparente: ahí sí importa que no pierda nitidez, y suele pesar poco porque tiene pocos colores.
Pongamos una foto sacada con un móvil actual, sin tocar, y sigámosla paso a paso hasta dejarla lista para la web. En este ejemplo, esto es lo que baja en cada momento, casi sin que cambie cómo se ve:
Fíjate en dónde está el salto grande: no es la compresión final, es el redimensionado. Bajar de 4.500 KB a 800 KB solo por quitar píxeles que nadie ve ya deja la foto en una quinta parte. La compresión JPEG hace el resto, y entre esos 800 KB y los 180 finales apenas se aprecia diferencia mirando la pantalla. El orden importa: si comprimes antes de redimensionar, estás comprimiendo información que vas a tirar de todos modos.
Con esto ya sabes cuánto debe pesar cada foto y en qué formato guardarla antes de subirla. Queda una pieza que pesa mucho más que cualquier foto, y que trae sus propias reglas: el vídeo, del que habla la siguiente lección.
- Lo que importa es el peso del archivo en KB, no el tamaño con que se ve en pantalla
- Portada hasta 200 KB, miniatura hasta 50 KB
- Fotos en JPEG; PNG solo para el logo o dibujos con fondo transparente
- Recortas, redimensionas y comprimes antes de subir, sin fiarte del editor
Ponte a prueba
Responde antes de abrir cada una. Si alguna se te resiste, vuelve al apartado que la explica.
1. Subes la foto de tu local recién pintado tal cual sale del móvil, 5.200 KB, y en tu web se ve pequeña, del tamaño de una miniatura de catálogo. Aun así tarda en cargar. ¿Por qué?
Porque el tamaño en pantalla y el peso del archivo son cosas distintas: el editor la muestra pequeña, pero el móvil del cliente sigue descargando los 5.200 KB enteros. Hay que redimensionarla y comprimirla tú antes de subirla, no confiar en que la web la reduzca sola.
2. Tienes el logo de tu negocio, con fondo transparente, y las fotos de los platos de tu carta. ¿En qué formato guardas cada uno?
El logo en PNG, porque necesita conservar la transparencia y, al tener pocos colores, pesa poco de todos modos. Los platos en JPEG, porque son fotos con muchos colores y degradados, donde el JPEG comprime mucho sin que se note la pérdida.
3. Compruebas el peso de la foto de portada de tu web y son 900 KB. ¿Qué decides?
Está muy por encima de los 200 KB que necesita una portada. Se redimensiona al ancho real que ocupa en pantalla, se guarda en JPEG al 70-80% de calidad y se vuelve a comprobar el peso antes de subirla de nuevo.
Con las fotos pesando lo justo, queda un sospechoso más grande: ese vídeo de quince segundos que pusiste en la portada pesa como cien fotos juntas, y la próxima lección decide si se queda o se convierte en una imagen más.