Tutorial · Herramientas de imagen
Cómo comprimir imágenes para web sin perder calidad
Una página que tarda 8 segundos en cargar pierde a la mitad de sus visitantes antes de que vean el contenido. Y en la mayoría de los casos, el culpable no es el servidor ni el diseño: son las imágenes. Una foto de 5 MB subida directamente desde el móvil puede pesar 25 veces más de lo necesario para mostrarse en una pantalla.
Comprimir imágenes para web consiste en reducir su peso al mínimo sin que se note visualmente. En este tutorial aprenderás a elegir el tamaño correcto en píxeles, el formato adecuado para cada tipo de imagen y el nivel de calidad ideal, con números reales que puedes aplicar hoy mismo usando la herramienta gratuita de comprimir imágenes de Tótem (usatotem.com/herramientas-imagen/comprimir-imagen/).
El tamaño en píxeles: el ajuste que más peso ahorra
El error más común es subir la imagen tal como sale de la cámara o del móvil: 4000 × 3000 píxeles y 5 MB de peso, para mostrarla en un espacio de 800 píxeles de ancho. El navegador descarga los 5 MB completos y luego reduce la imagen visualmente: pagas todo el coste sin ningún beneficio.
La regla es servir la imagen al tamaño real de visualización, con un pequeño margen para pantallas de alta densidad. Si la foto se muestra a 800 píxeles de ancho, sírvela a 1200-1600 píxeles: suficiente para que se vea nítida en pantallas retina sin desperdiciar peso. Como referencia rápida: una foto de 1600 píxeles de ancho en JPEG con calidad 70 pesa unos 200-300 KB; la misma foto a 4000 píxeles pesa 3-5 MB.
Antes de comprimir, redimensiona. Es el ajuste que más peso ahorra de todos: reducir las dimensiones a la mitad divide el número de píxeles —y aproximadamente el peso— entre cuatro. Ningún ajuste de calidad compensa no haber redimensionado primero.
Elige el formato correcto para cada imagen
Cada formato tiene su territorio y usar el equivocado cuesta peso o calidad. El JPEG es el rey de las fotografías: comprime muy bien las imágenes con muchos colores y degradados, y con calidad 70-80 ofrece un equilibrio excelente. Su limitación: no admite transparencia.
El PNG es para gráficos con zonas de color plano, texto, logos y cualquier imagen que necesite transparencia. Para fotos es un desastre en términos de peso —una foto en PNG puede pesar 5 veces más que en JPEG—, pero para un logo con fondo transparente es insustituible.
WebP es el formato moderno que combina lo mejor de ambos: comprime fotos casi tan bien como JPEG con un 25-35 % menos de peso, y admite transparencia como el PNG. Hoy lo soportan todos los navegadores modernos, así que es la opción recomendada para casi todo. La herramienta gratuita de comprimir imágenes te permite convertir entre formatos mientras comprimes, en una sola operación.
El nivel de calidad: encuentra tu punto dulce
El nivel de calidad es el dial fino después de haber acertado con el tamaño y el formato. En JPEG y WebP se expresa en una escala de 0 a 100, y la relación entre calidad y peso no es lineal: pasar de 100 a 80 reduce el peso a la mitad con una pérdida visual imperceptible, mientras que pasar de 80 a 60 apenas ahorra un 20 % más a cambio de artefactos visibles.
El punto dulce para web está entre 70 y 80 para fotografías. Por debajo de 60 aparecen bloques de color en los degradados —el cielo de una foto es el primer delator— y bordes borrosos alrededor del texto. Por encima de 90, pagas mucho peso por una mejora que nadie puede ver en pantalla.
El método fiable es el comparador visual: comprime la misma imagen a calidad 80, 70 y 60, míralas al 100 % de tamaño una al lado de otra y quédate con la más ligera en la que no aprecies diferencias. Tus ojos son el mejor medidor de calidad que existe.
Técnicas avanzadas: progresivo, srcset y metadatos
Con la imagen al tamaño correcto, en el formato adecuado y con la calidad ajustada, hay dos técnicas avanzadas que separan a los aficionados de los profesionales. La primera es la carga progresiva: los JPEG progresivos se muestran por fases, de borroso a nítido, dando sensación de velocidad aunque el tiempo total sea el mismo. La percepción de rapidez importa tanto como la rapidez real.
La segunda es servir varios tamaños con el atributo srcset de HTML: el navegador descarga automáticamente la versión adecuada a cada pantalla —pequeña para el móvil, grande para el monitor—. Así un visitante desde el teléfono no descarga la imagen de 1600 píxeles pensada para el escritorio, ahorrando datos y tiempo.
Tu flujo de trabajo: el proceso repetible
El flujo de trabajo profesional, resumido en un proceso que puedes repetir con cada imagen: primero, redimensiona al tamaño de visualización más un margen para retina; segundo, elige el formato —WebP para fotos, PNG para gráficos con transparencia—; tercero, ajusta la calidad al punto dulce entre 70 y 80; cuarto, verifica visualmente al 100 %; quinto, elimina metadatos.
Aplícalo de forma sistemática: cada imagen que subas a tu web debería pasar por este proceso. Con la herramienta gratuita de comprimir imágenes de Tótem puedes hacer los pasos de redimensionar, convertir y comprimir en una sola pasada, directamente en el navegador.
Mide el resultado con una herramienta de velocidad como PageSpeed Insights antes y después de optimizar tus imágenes. Ver cómo la puntuación sube 20 o 30 puntos solo con este cambio es la mejor motivación para no volver a subir una foto de 5 MB jamás.
Herramientas gratuitas mencionadas
Compresor de imágenes
Comprime tus fotos al instante: reduce el peso sin perder calidad visible, en JPG, PNG o WebP.
Usar gratisRedimensionar imagen
Cambia el tamaño de tus fotos por píxeles o porcentaje, con o sin mantener la proporción.
Usar gratisRecortar imagen
Recorta tus fotos online con precisión: arrastra la selección y fija proporciones como 1:1 o 16:9.
Usar gratisPreguntas frecuentes
¿Cuánto debería pesar una imagen para web?
Como orientación: una foto para un artículo de blog debería pesar entre 80 y 200 KB; una imagen de cabecera a pantalla completa, entre 200 y 400 KB; un icono o miniatura, menos de 50 KB. Si tus imágenes pesan varios MB, hay un enorme margen de mejora.
¿Comprimir una imagen le quita calidad para siempre?
Sí, pero con matices. La compresión con pérdida reduce la calidad de forma permanente, así que trabaja siempre sobre una copia y conserva el original. Con niveles de calidad de 70-80 en JPEG, la pérdida es invisible en pantalla para el ojo humano.
¿Qué formato es mejor para web: JPEG, PNG o WebP?
Para fotos e imágenes con muchos colores, WebP; para logos e ilustraciones con transparencia, PNG o WebP; para iconos simples, SVG. El JPEG clásico sigue siendo válido, pero WebP ofrece la misma calidad con un 25-35 % menos de peso.
En resumen
Comprimir imágenes para web es una disciplina de tres decisiones: el tamaño en píxeles que realmente se va a mostrar, el formato adecuado para cada tipo de imagen y un nivel de calidad que equilibre peso y nitidez. Con esos tres ajustes, una web puede pasar de tardar 8 segundos a tardar 2 sin cambiar ni una sola foto visible.
Empieza hoy mismo con la herramienta gratuita de comprimir imágenes: sube la foto más pesada de tu web, compruébalo tú mismo con el comparador visual y mide la diferencia en la velocidad de carga. Los números te convencerán más que cualquier tutorial.