Las imágenes son lo que más pesa en una página. Qué cambia de verdad el ajuste de calidad, cuándo trabajar con un peso objetivo, qué hace el compresor en cada formato y por qué redimensionar antes de comprimir marca la diferencia.
Para comprimir imágenes sin perder calidad visible, sigue este orden: reduce primero la imagen al tamaño real con el que se va a mostrar, comprime las fotos con una calidad de entre 75 y 85 y, si es para la web, pásalas a WebP. Con esos tres pasos, una foto suele quedar varias veces más ligera sin que nadie note la diferencia. En esta guía verás qué controla realmente el ajuste de calidad, cuándo conviene fijar un peso en KB, qué hace el compresor con cada formato y por qué el orden de los pasos cambia el resultado.
Cuando una página tarda en abrirse, la culpa casi nunca es del texto y pocas veces del código: suele ser de imágenes que pesan mucho más de lo necesario. Una imagen bien comprimida no se distingue del original; la única diferencia es que aparece en pantalla mucho antes.
Para la parte práctica, comprimir imagen y redimensionar imagen funcionan en pareja. Si además necesitas cambiar de formato, usa convertir JPG a WebP o convertir PNG a AVIF. Ajustar el encuadre también ahorra bytes, y para eso recortar imagen suele ser más eficaz que cualquier compresión. En todas estas herramientas el archivo se sube al servidor, se procesa en la misma petición y se te devuelve; no se guarda.
Mientras el elemento más grande de la pantalla no se ha dibujado, el visitante siente que la página sigue cargando. Las métricas Core Web Vitals miden ese momento como LCP (Largest Contentful Paint), y en la mayoría de las páginas ese elemento es una imagen. Por eso una imagen de portada de 220 KB en lugar de 1,8 MB se nota directamente en la velocidad percibida. La cuenta es sencilla: la diferencia, unos 1,5 MB, equivale a 12 megabits; con una conexión móvil que descarga 10 megabits por segundo, eso supone más de un segundo de espera adicional.
Hay un segundo efecto menos visible. Las imágenes pesadas no solo se retrasan a sí mismas: también dejan en cola a las fuentes y hojas de estilo que viajan por la misma conexión. Si reduces a la mitad el peso total de las imágenes de una página, verás que elementos que no tienen nada que ver con ellas también llegan antes.
La calidad no es un porcentaje de nada que puedas ver. Es un umbral que indica al codificador cuánto detalle puede descartar. En el compresor va de 20 a 95, con 82 por defecto, y la escala no es lineal: bajar de 95 a 85 recorta una buena parte del archivo sin cambio visible, mientras que por debajo de 60 empiezan a aparecer manchas en las zonas planas y bordes borrosos en el texto. En PNG el mismo ajuste funciona de otra forma: no hay codificador con pérdida, así que al bajar la calidad se reduce la paleta de colores.
Un método que funciona: guarda la misma imagen con calidad 85, 75 y 65, ábrelas al tamaño en que se verán y quédate un escalón por encima de la primera que te moleste. El umbral depende del tipo de imagen. Un retrato puede verse limpio a 70, mientras que una portada con letras finas se deshace por debajo de 85.
A veces “que se vea bien” no basta: hay un límite estricto. Una tienda en línea admite fotos de hasta 500 KB, un formulario de trámite pide menos de 200 KB. En el modo de peso objetivo no eliges la calidad; la herramienta la ajusta según los kilobytes que indiques, con un máximo de 5120 KB. Tómalo como un objetivo aproximado, no como una garantía: la calidad nunca baja de 20, así que con un objetivo muy pequeño el resultado puede quedar algo por encima.
La trampa de este modo es que, con objetivos poco realistas, la calidad se hunde sin avisar. Meter una foto de 3000 píxeles de ancho en 80 KB puede ser técnicamente posible y, en la práctica, inservible. Si te ves en esa situación, la solución no es comprimir más, sino tener menos píxeles: redimensiona primero.
El compresor nunca cambia el formato: si entra un JPG, sale un JPG; si entra un PNG, sale un PNG. Lo que hace por dentro, en cambio, depende del tipo de archivo:
| Formato de entrada | Cómo se comprime | Ten en cuenta |
|---|---|---|
| JPG | Se vuelve a codificar con pérdida a la calidad elegida | Si el JPG ya tenía calidad baja, se gana poco |
| WebP | Recodificación con pérdida, conserva la transparencia | En logotipos e iconos, mantén calidad alta |
| AVIF | Recodificación con pérdida | Tarda más que los otros formatos |
| PNG | Se reduce la paleta de colores | En degradados suaves pueden aparecer bandas |
| GIF | Compresión de paleta | De un GIF animado solo queda el primer fotograma |
Un detalle más: el compresor elimina los metadatos, incluido el EXIF. Eso borra datos personales como la ubicación donde se tomó la foto, algo positivo para tu privacidad, y ahorra unos kilobytes. Pero también puede desaparecer el perfil de color, de modo que las fotos tomadas con una gama de color amplia pueden cambiar ligeramente de tono. Si el color es crítico, por ejemplo en una foto de producto, compara el resultado con el original.
No es lo mismo dejar una foto con 4000 píxeles de ancho y bajar la calidad a 50 que reducirla a 1600 píxeles y mantener la calidad en 85. La segunda opción gana casi siempre, en peso y en aspecto. Así se prepara una foto tomada con el teléfono para un artículo:
La lógica es que cada paso deja menos trabajo al siguiente. Y cambia de formato una sola vez: pasear un archivo entre formatos con pérdida quema calidad en cada viaje.
Enviar el mismo archivo a todas las pantallas es cómodo y caro: el teléfono descarga la versión preparada para un monitor grande. Generar un archivo por cada punto de corte del diseño, en cambio, se vuelve imposible de mantener. En la práctica, tres tamaños cubren la mayoría de los proyectos: unos 640 píxeles de ancho para teléfonos, 1280 para pantallas de escritorio y 1920 para pantallas de alta densidad.
También tiene sentido subir uno o dos puntos la calidad en las versiones pequeñas. Cuanto más pequeña es la imagen, más información lleva cada píxel, y defectos invisibles en un archivo grande se vuelven evidentes en uno pequeño. Guardar la copia de 1920 a 80 y la de 640 a 88 mantiene ambas limpias sin disparar el peso total.
| Paso | Ahorro típico | Riesgo visible | Cuándo aplicarlo |
|---|---|---|---|
| Reducir las dimensiones a la mitad | 60 % – 75 % | Ninguno, si el tamaño de visualización es correcto | Siempre, como primer paso |
| Bajar la calidad de 95 a 82 | 35 % – 50 % | Muy bajo | En fotografías |
| Cambiar JPG por WebP con pérdida | 25 % – 35 % | Ninguno | Fotos que se publican en la web |
| Cambiar PNG por WebP sin pérdida | Alrededor del 26 % | Ninguno | Gráficos y capturas |
| Bajar la calidad por debajo de 60 | 15 % – 25 % | Alto | Mejor nunca |
Reducir las dimensiones a la mitad deja una cuarta parte de los píxeles, así que la primera fila es pura geometría; las filas de WebP recogen los valores típicos de las comparativas publicadas por Google. En tus archivos las cifras variarán, pero lo importante es el orden: el mayor ahorro llega con el menor riesgo. Muchos equipos lo hacen al revés, bajan la calidad primero, no tocan las dimensiones y terminan con imágenes feas y, aun así, pesadas.
Si trabajas con muchos archivos, la cola admite 20 a la vez, cada uno de hasta 24 MB, y ninguna imagen puede superar los 50 megapíxeles ni los 16.384 píxeles por lado. Si partes de originales de cámara, dedica una primera pasada solo a reducir dimensiones; la segunda tendrá mucho menos trabajo.
Para saber si el esfuerzo ha valido la pena bastan tres cifras: el peso total de las imágenes de la página, el peso de la imagen más grande y el momento en que esa imagen se vuelve visible. La pestaña de red de las herramientas para desarrolladores del navegador te da las dos primeras directamente. Para la tercera, carga la página simulando una conexión lenta: es lo más parecido a lo que vive un visitante real.
Ponerse metas también ayuda. Que el total de imágenes de una página de contenido quede por debajo de 500 KB y que ninguna supere los 150 KB es alcanzable en la mayoría de los proyectos. Casi nunca se logra con un solo ajuste: hace falta que dimensiones, formato y calidad empujen en la misma dirección.
Medir una vez tampoco basta. El contenido nuevo no deja de llegar y una biblioteca que limpiaste vuelve a engordar, porque la compresión rara vez forma parte fija del proceso de publicación. La solución más barata es añadir una línea a la lista de comprobación antes de publicar: “¿La imagen de portada pesa menos de 150 KB?” Si la respuesta es no, el artículo espera.
Porque, en una gran variedad de imágenes, está cerca del valor más bajo que nadie llega a notar. Por encima, el archivo engorda; por debajo, algunas imágenes empiezan a mostrar huellas. Si con tus fotos encuentras otro número, úsalo: el valor por defecto es un punto de partida, no una regla.
No. La compresión reduce los datos necesarios para describir los píxeles, no la cantidad de píxeles. Cambiar el ancho y el alto es otra operación, y debe hacerse antes.
El codificador ajusta la calidad en pasos enteros, y cada paso equivale a una cantidad de kilobytes distinta según la imagen, así que el resultado puede quedar un poco por debajo o por encima. Con objetivos muy pequeños la calidad toca el mínimo de 20 y el archivo puede seguir siendo grande; en ese caso, reduce las dimensiones.
El archivo se sube al servidor, se comprime dentro de esa misma petición y se te devuelve; no se almacena ni se comparte. Aun así, con documentos que contienen datos personales, es buena costumbre recortar las zonas sensibles antes de subirlos a cualquier servicio.
Si quieres ver cómo el formato modifica estas cifras, lee cómo elegir el formato de imagen; si vas a procesar decenas de archivos, la guía de conversión de imágenes por lotes te ayuda a organizar el trabajo. Para dejar una foto por debajo de un límite concreto en un formulario, consulta cómo reducir el tamaño de una imagen, y antes de pasarte a WebP, qué es WebP.
