Cuando alguien entra en tu web, su móvil tiene que descargarse todo lo que ve: el texto, los estilos, las fotos. Cada imagen que subes es un plus que cada visitante paga con segundos de espera en la carga. No es raro que una sola foto pese más que toda la página que la contiene.
Ese es el problema número uno de las webs lentas, y el arreglo más barato que existe. Comprimir una imagen (hacer que el archivo pese menos sin que se note la pérdida de calidad) es gratis, se aprende en diez minutos y puede cambiar la velocidad de tu web entera.
Lo que pesa una foto sin tocar
Cuando haces una foto con el móvil, el archivo guarda muchísima más información de la que la web va a mostrar. La pantalla del visitante no necesita los 40 megapíxeles de tu cámara: necesita una imagen de quizás mil píxeles de ancho (un píxel es el punto mínimo de color que forma la imagen). Subir la foto tal cual significa que el visitante se descarga una imagen mucho más grande de lo que su pantalla va a enseñar: todo ese sobrante es peso que nadie ve.
El peso de una imagen se mide en kilobytes (KB) y megabytes (MB). Una web bien montada entera puede pesar menos de un megabyte. Una sola foto sin comprimir de un móvil moderno puede pasar de varios megas. La diferencia entre una y otra la nota el visitante: la primera carga en un instante con buena cobertura; la segunda obliga a esperar.
Esto lo confirmas en dos minutos con PageSpeed, la herramienta de Google: cuando el informe te diga que una imagen pesa mucho más de lo que se ve, ya tienes el diagnóstico.
Los formatos, explicados sin dolor
El formato es cómo se guarda la imagen en un archivo. Hay tres que te van a sonar.
El JPG es el formato de las fotos: sirve para imágenes con muchos colores, como una foto del local o de un plato. Comprime bien y es compatible con todo. El PNG se usa para cosas con fondo transparente (logotipos, iconos) y para gráficos con pocos colores; en fotos pesa más que el JPG, así que no lo uses para eso. El WebP es el formato moderno que impulsa Google: consigue la misma imagen con menos peso.
| Formato | Para qué sirve | Cuándo usarlo |
|---|---|---|
| JPG | Fotos con muchos colores | Fotos del local, del catálogo, del plato |
| PNG | Transparencias y gráficos simples | Logotipo, iconos |
| WebP | Cualquier imagen, con menos peso | Cuando la herramienta o WordPress te lo permita |
La documentación de Google sobre WebP indica que estas imágenes suelen pesar entre un 25 y un 35% menos que sus versiones JPG o PNG, y hoy cualquier navegador de móvil u ordenador moderno la muestra sin problema.
Comprimir sin conocimientos
Hay dos caminos: comprimir una a una las fotos antes de subirlas, o dejar que WordPress las comprima solo.
Para lo primero, una herramienta gratuita en el navegador: TinyPNG o Squoosh. Basta con arrastrar la foto: la herramienta devuelve el archivo más ligero con la misma calidad visible. Se tarda menos en hacerlo que en explicarlo, y el resultado se sube a la web igual que subías el original.
Para lo segundo, si tu web es WordPress, está el plugin de compresión (un plugin es un extra que se instala en WordPress para darle una función; en este caso, comprimir las fotos automáticamente). Un ejemplo que funciona y es gratis: Smush comprime cada foto al subirla. Otros repasan también las que ya tienes subidas. Eliges uno, lo activas, y a partir de ahí WordPress entrega las imágenes con menos peso sin que tengas que acordarte de nada.
Cuánto debe pesar una imagen
No hay una cifra mágica, pero hay una regla que funciona: si la imagen se ve de un tamaño pequeño y pesa mucho más de lo que ocupa esa zona, sobra información. Una foto de portada bien comprimida suele estar en el rango de cientos de kilobytes, no de varios megas. Si en tu web hay imágenes que pasan del megabyte, ahí tienes trabajo.
Cuando dudes, mide antes y después. El cambio se ve en PageSpeed la primera vez que compruebas la web tras comprimir.
Lo que no hay que hacer
Subir la foto del móvil tal cual. Es el error más repetido y el más fácil de evitar. Tampoco hace falta comprar ningún programa caro: las herramientas gratuitas hacen el trabajo. Y cuidado con comprimir demasiado: si la imagen se ve borrosa o con manchas, te has pasado. La compresión correcta es la que no se nota a ojo, solo en el peso.
Compruébalo tú mismo
Abre tu web, haz clic derecho sobre una foto y elige "Abrir imagen en una pestaña nueva". Cuando se abra sola, mira abajo a la derecha: el navegador te dice cuánto pesa. Si una imagen que se ve de 300 píxeles de ancho pesa varios megas, esa foto es un problema.
Prueba ahora con una foto tuya: arrástrala a TinyPNG y mira la diferencia entre el peso original y el comprimido. Ese número, multiplicado por las fotos que tiene tu web, es la velocidad que estás regalando.
Empieza por las fotos
Comprimir imágenes no arregla una web lenta por arte de magia: si además hay otros motivos, como el exceso de plugins o un hosting que se queda corto (el hosting es el local donde vive tu web), esos se tratan aparte, y de eso ya hablé en mi WordPress va lento y en por qué tu web va lenta. Pero es la primera causa y la más barata de resolver. Empieza por ahí: las fotos no se notan menos por pesar menos, y tu web lo agradece en cada visita.