Cómo reducir el peso de las imágenes sin perder calidad visible
Las imágenes suelen ser la mayor parte de lo que descarga una página y, por tanto, la principal causa de que cargue despacio. La buena noticia es que se puede reducir su peso a una fracción con cuatro ajustes sencillos.
Por qué importa el peso de las imágenes
Una foto recién sacada con un móvil actual puede pesar entre 3 y 8 MB. Si la subes tal cual a una página, el visitante descarga esos megabytes para ver una imagen que ocupa, quizá, 800 píxeles de ancho. Con una conexión móvil limitada, eso se traduce en segundos de espera.
Google mide la experiencia de carga con las llamadas Core Web Vitals. Una de ellas, el LCP (Largest Contentful Paint), mide cuánto tarda en mostrarse el elemento más grande de la pantalla, que muy a menudo es una imagen. Se considera bueno un LCP de 2,5 segundos o menos. Otra, el CLS, penaliza los saltos de diseño, que las imágenes sin dimensiones declaradas provocan con frecuencia.
Ajuste 1: las dimensiones adecuadas
Es el que más peso ahorra y el que menos se aplica. Una imagen de 4000 × 3000 píxeles tiene 12 millones de píxeles; si se va a mostrar a 1200 píxeles de ancho (1200 × 900 = 1,08 millones), estás enviando once veces más datos de los necesarios. Como el peso de una imagen guarda una relación aproximada con su número de píxeles, reducir las dimensiones al tamaño real de uso puede bajar el archivo a una décima parte con una pérdida de calidad visual nula.
Regla práctica: usa como ancho máximo el doble del ancho al que se mostrará (para pantallas de alta densidad). Por encima de unos 2000–2500 píxeles de ancho casi nunca compensa.
Ajuste 2: el formato correcto
Las fotos van mejor en JPG o WebP; los logotipos y capturas, en PNG o SVG. Pasar una fotografía de PNG a WebP o JPG puede reducir su peso entre un 70 % y un 90 %. Si necesitas repasar las diferencias, tienes la guía de formatos de imagen.
Ajuste 3: la calidad de compresión
En los formatos con pérdida, bajar un poco la calidad reduce mucho el peso con diferencias casi invisibles. El tramo más rentable suele estar entre el 70 % y el 85 %. Por debajo del 60 % empiezan a notarse bloques y halos, sobre todo en cielos, degradados y texto.
El compresor de kitbox trabaja con tres niveles predefinidos:
| Nivel | Calidad aproximada | Lado máximo | Para qué |
|---|---|---|---|
| Ligera | 85 % | 4096 px | Conservar casi todo el detalle |
| Media | 72 % | 2560 px (≤ 1 MB) | Uso general en web |
| Fuerte | 55 % | 1600 px (≤ 0,3 MB) | Máximo ahorro, correos y miniaturas |
Además, la herramienta conserva siempre el archivo más pequeño: si, tras comprimir, el resultado pesara más que el original (algo que ocurre a veces con imágenes ya muy optimizadas), te devuelve el original.
Ajuste 4: cargar solo lo que se ve
Aunque la imagen esté optimizada, no hace falta cargarla hasta que el visitante se acerque a ella. En HTML basta con añadir el atributo loading="lazy" a las imágenes que están más abajo en la página. Excepción importante: no lo apliques a la imagen principal de la parte superior, la que determina el LCP, porque retrasaría justo lo que quieres acelerar.
Para que la página no «salte» al cargar, declara siempre width y height en la etiqueta <img>, de modo que el navegador reserve el espacio antes de recibir la imagen.
Un ejemplo completo
Una foto de producto de 4000 × 3000 píxeles y 5,5 MB en JPG:
- Se redimensiona a 1600 píxeles de ancho (el doble de los 800 con que se muestra). El número de píxeles baja a una sexta parte y el peso, a alrededor de 0,9 MB.
- Se guarda con calidad del 75 %, que reduce el peso a una cifra del orden de 250–350 KB.
- Si además se exporta a WebP, el resultado ronda entre 180 y 250 KB.
Los valores exactos dependen de la imagen (una foto con mucho detalle comprime peor que una con fondos lisos), pero el orden de magnitud es realista: pasar de megabytes a unos pocos cientos de kilobytes sin que el visitante note diferencia.
Metadatos: peso invisible y privacidad
Las fotos incluyen datos EXIF (cámara, fecha, a veces ubicación GPS) y perfiles de color que añaden peso y pueden revelar información personal. El compresor de kitbox no conserva los metadatos EXIF, lo que ahorra algunos kilobytes y evita publicar sin querer, por ejemplo, la ubicación de tu casa.
Lista de comprobación antes de publicar una imagen
- ¿Tiene las dimensiones que realmente se van a mostrar (como mucho el doble)?
- ¿Está en un formato adecuado a su contenido?
- ¿Está comprimida al 70–85 %?
- ¿Lleva
width,heighty, si no es la imagen principal,loading="lazy"? - ¿Tiene un texto alternativo (
alt) que describa su contenido?
Hacerlo desde el navegador, como en kitbox, tiene una ventaja adicional: las fotos no se suben a ningún servidor, lo que importa si son imágenes de clientes, documentos o capturas con datos privados.
Guías relacionadas
Este artículo tiene carácter informativo y se revisa de forma periódica. Si detectas un error o quieres proponer un tema, escríbenos desde la página de contacto.