Cómo comprimir imágenes para web sin perder calidad visible

Una habitación tiene luz, profundidad y textura. Si la foto tarda demasiado en aparecer, la primera experiencia del visitante es un espacio vacío. Si la comprimes de más, desaparecen la trama de la tela y los bordes de los muebles. El trabajo consiste en encontrar un archivo suficientemente ligero para su uso y suficientemente fiel a lo que quieres mostrar.

1. Conserva un original antes de tocar nada

Trabaja con una copia. Crea una carpeta de originales y otra de versiones web. Usa nombres que permitan reconocer la escena, por ejemplo sala-vista-desde-acceso, y registra dónde se utiliza. No vuelvas a descargar la foto de una red social para convertirla en tu nueva fuente: puede llevar un procesamiento que ya no puedes deshacer.

Esto también facilita corregir un error. Si después necesitas un recorte vertical para móvil, podrás partir de la fotografía completa y no de una miniatura que alguien exportó meses antes.

2. Separa dimensiones, peso y calidad

Las dimensiones son el ancho y alto en píxeles. El peso es la cantidad de bytes del archivo. La calidad de exportación controla cómo trabaja un codificador; un valor de 80 no expresa una fidelidad universal ni significa lo mismo en todos los formatos.

Pide a quien construye tu web el ancho al que se muestra la imagen y las variantes previstas. Una foto para una tarjeta no necesita el mismo archivo que el hero. La guía de imágenes responsive de Google explica el uso de srcset y sizes para entregar recursos acordes al contexto.

3. Elige formato por el contenido que vas a conservar

JPEG suele ser una opción práctica para fotografía y para sistemas que esperan ese formato. WebP puede ser una buena entrega web cuando el sitio lo contempla. PNG tiene sentido en gráficos o capturas donde necesitas preservar detalle o transparencia; no lo elijas automáticamente para cada foto. AVIF es otra alternativa que debe evaluarse junto con los navegadores y el flujo de publicación.

No existe un formato que gane siempre para todos los archivos. Haz la comparación con una foto representativa de tu proyecto. La guía de formatos de MDN describe sus capacidades y compatibilidad.

Mira las superficies difíciles: hojas de palmera, mosaicos, letras pequeñas y líneas contra un cielo claro. Una pared lisa puede parecer impecable aunque el mismo ajuste destruya una celosía.

4. Haz una comparación controlada en Squoosh

Squoosh permite abrir una imagen y comparar la exportación. Su sitio indica que el procesamiento se hace en el dispositivo. Aun así, utiliza solo archivos cuyo tratamiento tienes autorizado y comprueba que estás en el sitio correcto.

1. Abre una copia del original.
2. Ajusta el ancho a la variante que necesitas. Conserva la proporción.
3. Elige un formato de salida compatible con tu publicación.
4. Mueve la calidad poco a poco. Anota el peso de cada prueba.
5. Compara la imagen completa y zonas de detalle al 100%.
6. Exporta la versión más ligera que pase tu revisión, con un nombre nuevo.

Para que la prueba sirva, cambia una variable a la vez. Si modificas ancho, formato y calidad simultáneamente, no sabrás qué ajuste produjo la mejora o el defecto. La guía de automatización de web.dev propone conservar fuentes y generar variantes dentro del flujo del proyecto; cuando el método funciona, puedes automatizarlo sin renunciar a la revisión.

5. Comprueba la foto donde realmente se usará

Una exportación correcta todavía puede entregarse mal. Abre la página con un teléfono, revisa el hero y desplázate hacia las imágenes del cuerpo. Observa si el navegador recibe una versión desproporcionada, si el texto salta al cargarse una foto o si una imagen importante aparece tarde.

Reserva el espacio con ancho y alto conocidos. Las imágenes que quedan más abajo pueden cargarse de forma diferida, pero no conviene retrasar la imagen principal visible al abrir la página. web.dev explica esta distinción. Son decisiones de implementación; no se arreglan solo comprimiendo más.

Como criterio editorial de partida, revisa primero los archivos más grandes y las imágenes visibles al abrir. Define un presupuesto de peso por plantilla junto con la persona que implementa la web. Ese presupuesto es una decisión del proyecto, no una cifra universal exigida por Google.

6. Deja un registro que pueda repetir otra persona

Anota fuente, dimensiones de entrega, formato, peso y resultado de revisión. Una pequeña tabla evita que alguien reemplace un archivo aprobado por una exportación enorme con el mismo nombre.

Ejemplo local reproducible, preparado el 20 de octubre de 2026 con una fotografía editorial generada para esta guía. Se comparan bytes de archivos; no es una prueba de carga de una página ni una garantía de equivalencia visual.

Las exportaciones usan JPEG calidad 85 y WebP calidad 80 con Pillow. Los valores de calidad pertenecen a cada codificador y no son equivalentes entre formatos. La muestra permite repetir el cálculo con los originales y el manifiesto de esta entrega.

La comparación de peso no demuestra por sí sola una mejora de Core Web Vitals ni de posicionamiento. Esas métricas requieren probar la página completa. También conviene revisar color y orientación: si una imagen se ve distinta, verifica el archivo y su tratamiento antes de compensarla con filtros.

Antes de dar el trabajo por terminado, comprueba cinco cosas: se conserva el original, la variante corresponde a su uso, el detalle importante sigue legible, el archivo se entrega correctamente y el nombre/versionado evita confusiones de caché.

Preguntas frecuentes

¿Puedo reducir peso sin perder ningún dato?

La compresión sin pérdida puede conservar los datos de imagen que codifica, pero su ahorro depende del archivo. Reducir dimensiones o usar compresión con pérdida cambia información. Si necesitas un máster de archivo o impresión, consérvalo por separado.

¿Cambiar de JPG a WebP siempre reduce el peso?

No está garantizado para cada imagen y cada ajuste. Compara el resultado del archivo concreto, a dimensiones equivalentes y con una revisión visual consistente.

¿Este procedimiento sirve para el panorama original de un recorrido 360?

La lógica de preservar fuentes y comparar sigue siendo útil, pero un panorama necesita las dimensiones, proyección y variantes que exige su visor. No sustituyas su máster por la exportación de una foto plana para el blog.

¿Qué hago después de optimizar?

Prueba una página representativa antes y después con las mismas condiciones, registra qué cambió y revisa que no se deterioró su lectura. Una cifra pequeña de kilobytes es útil cuando conserva la información que el visitante vino a ver.