Cómo Comprimir Imágenes Sin Perder Calidad: Guía Definitiva

El peso de las imágenes es uno de los factores que más condicionan la velocidad de carga de un sitio web. Una página lenta frustra a quien la visita y juega en contra del posicionamiento en buscadores. Saber comprimir imágenes sin perder calidad visible es, por tanto, una destreza básica para quien diseña, programa o publica contenido. En esta guía tienes los métodos que funcionan, la diferencia real entre compresión con pérdida y sin pérdida, el papel de cada formato y un flujo de trabajo que puedes repetir con el compresor de imágenes de GlobalTool, que procesa el archivo dentro de tu propio navegador.

Por qué el peso de las imágenes decide la velocidad de tu web

En la mayoría de páginas, las imágenes son el bloque de bytes más grande que el navegador tiene que descargar: pesan más que el HTML, más que las hojas de estilo y, con frecuencia, más que el JavaScript. Si subes fotografías tal como salen del móvil o de un banco de imágenes, cada archivo puede ocupar varios megabytes. Multiplica eso por las seis u ocho imágenes de una portada y tendrás una página que castiga a quien la abre con datos móviles y una conexión regular.

El efecto no se queda en la sensación de lentitud. El navegador dedica ancho de banda, memoria y tiempo de CPU a descargar y decodificar cada imagen. Mientras la imagen principal de la parte superior no termina de pintarse, el usuario mira un hueco vacío o un bloque de color. Las métricas de experiencia de carga que usan los buscadores miden precisamente eso: cuánto tarda en aparecer el elemento visible más grande y cuánto se mueve el contenido mientras llega. Una imagen enorme y sin dimensiones declaradas empeora las dos cosas a la vez.

Hay un segundo motivo, menos comentado y muy real: el coste. Cada megabyte servido consume transferencia del hosting o del CDN. En un blog personal da igual; en una tienda con miles de fichas y tráfico constante, la diferencia entre servir fotos de 2 MB o de 200 KB se nota en la factura y en la capacidad del servidor para aguantar picos.

Y un tercero: la accesibilidad efectiva. No todo el mundo navega con fibra. Quien entra desde una zona con cobertura débil, desde un móvil antiguo o desde una conexión con datos limitados es quien más sufre las imágenes pesadas, y es también quien antes abandona. Optimizar imágenes no es un refinamiento técnico, es ampliar a quién puedes llegar.

Qué significa de verdad «sin perder calidad»

El título de este artículo repite una expresión muy buscada, pero conviene afinarla antes de seguir, porque de ella depende todo lo demás. Existen dos familias de algoritmos y solo una conserva el archivo íntegro.

Compresión sin pérdida (lossless)

Reorganiza los datos de forma más eficiente sin descartar ninguno. Si descomprimes el resultado, recuperas exactamente los mismos píxeles con los que empezaste: la operación es reversible. Funciona buscando repeticiones y patrones —zonas de color plano, líneas rectas, bordes limpios— y describiéndolos de manera más compacta. Por eso rinde muy bien con capturas de pantalla, logotipos, iconos, diagramas y texto renderizado, y bastante peor con fotografías, donde apenas hay dos píxeles contiguos idénticos. Formatos sin pérdida habituales: PNG, WebP en su modo lossless, GIF dentro de su paleta y TIFF sin comprimir o con LZW.

Compresión con pérdida (lossy)

Descarta información de forma deliberada, eligiendo la que el sistema visual humano percibe con menos precisión. Sabemos que el ojo distingue mucho mejor los cambios de luminosidad que los cambios finos de color, y que tolera mal los bordes duros pero perdona las variaciones suaves. Los algoritmos con pérdida aprovechan esos sesgos: recortan detalle cromático, simplifican las zonas de textura compleja y redondean valores. El archivo ya no es reversible —lo que se tira no vuelve—, pero el ahorro de peso es de otro orden. JPEG, WebP en modo lossy y AVIF pertenecen a esta familia.

Entonces, ¿«sin perder calidad» es un mito?

No es un mito, es una imprecisión útil. Lo que casi todo el mundo busca cuando escribe «comprimir imágenes sin perder calidad» no es integridad matemática del fichero, sino que la foto se siga viendo igual de bien. Y eso sí se consigue: una fotografía guardada con un ajuste de calidad razonable resulta indistinguible del original cuando se mira en una pantalla, a tamaño normal, sin comparar píxel a píxel. El término técnico correcto sería «sin pérdida perceptible» o «visualmente sin pérdidas».

La distinción importa en un caso concreto: los archivos que vas a seguir editando. Un original que vas a retocar, recortar y volver a exportar varias veces debe conservarse sin pérdida (o en el formato nativo de tu editor). La compresión con pérdida se aplica al final, sobre la copia que publicas, y nunca sobre el maestro.

Guarda sin pérdida lo que vas a volver a tocar y con pérdida lo que vas a publicar. Si haces al revés, cada exportación se come un poco de la anterior y al cabo de unas cuantas la degradación ya no se puede deshacer.

Cómo funciona JPEG por dentro (y de dónde salen los artefactos)

Entender el mecanismo de JPEG te ahorra mucho ensayo y error, porque explica por qué algunas imágenes aguantan compresiones agresivas y otras se rompen enseguida.

Bloques de 8×8 y transformada de coseno

JPEG no trata la imagen como un conjunto de píxeles sueltos. Primero separa la información de brillo (luminancia) de la de color (crominancia). Después divide la imagen en cuadrículas de 8×8 píxeles y convierte cada bloque en una suma de patrones de onda mediante la transformada discreta del coseno. Los patrones suaves describen el tono general del bloque; los patrones finos describen el detalle. A continuación llega el paso donde ocurre la pérdida: la cuantización, que redondea los coeficientes y descarta los más finos. Cuanto más bajas el parámetro de calidad, más agresivo es ese redondeo y más detalle desaparece.

El submuestreo de color

Además, JPEG suele guardar la información de color con menos resolución que la de brillo, porque el ojo la percibe con menos detalle. Ese ajuste aparece en los exportadores como 4:4:4 (color a resolución completa), 4:2:2 o 4:2:0 (color a la mitad en una o dos dimensiones). Para una fotografía de paisaje, 4:2:0 es invisible y ahorra bastante. Para una imagen con texto rojo sobre fondo blanco, o con líneas finas de colores saturados, el submuestreo produce bordes sucios y halos de color muy visibles. Si tu exportador te deja elegir, sube a 4:4:4 en esos casos.

Qué son los artefactos y dónde se ven primero

Los defectos típicos de una compresión JPEG excesiva tienen nombre y sitio propio:

• Bloques (blocking). La cuadrícula de 8×8 se hace visible como un mosaico. Aparece antes que nada en cielos, degradados y paredes lisas, justo donde uno esperaría que «no hay detalle que perder».
• Ondas o halos (ringing). Franjas fantasma alrededor de los bordes de alto contraste: el filo de un edificio contra el cielo, una letra negra sobre blanco. Son el residuo de intentar describir un salto brusco con ondas suaves.
• Sangrado de color. El color se escapa fuera de su contorno. Es la firma del submuestreo agresivo y se ceba con los rojos y los magentas.
• Posterización. Un degradado continuo se convierte en escalones de color. Delatora en amaneceres, fondos con desenfoque y sombras suaves.

La regla que se deduce de todo esto: las imágenes con mucha textura irregular (follaje, grava, tejidos, multitudes) esconden muy bien los artefactos y admiten compresión fuerte. Las imágenes con grandes superficies planas, degradados largos, texto o líneas nítidas los delatan enseguida y hay que tratarlas con más cuidado, o directamente sacarlas de JPEG.

La recompresión se acumula

Cada vez que abres un JPEG y lo vuelves a guardar como JPEG, se repite el ciclo completo de cuantización sobre una imagen que ya había perdido información. El daño no se reparte: se suma. Es el motivo por el que una foto que ha pasado por cuatro grupos de mensajería y dos ediciones rápidas acaba pareciendo un cuadro impresionista. Trabaja siempre desde el original de mayor calidad que tengas y exporta una sola vez al formato final.

PNG, GIF y SVG: cuándo son la respuesta correcta

PNG, el formato de los gráficos limpios

PNG comprime sin pérdida y admite canal alfa, es decir, transparencia con niveles intermedios: un borde puede ser medio transparente y fundirse bien con cualquier fondo. Eso lo hace la opción natural para logotipos, iconos, capturas de pantalla, diagramas y cualquier imagen con texto.

Tiene dos variantes que conviene distinguir. PNG-24 guarda color real completo y es el que usan por defecto casi todos los exportadores. PNG-8 reduce la imagen a una paleta de como mucho 256 colores; para un icono plano o un logotipo con cuatro tintas es una elección excelente, porque el archivo se queda en una fracción del tamaño sin que se note la diferencia. Para una fotografía, PNG-8 destroza los degradados y PNG-24 produce archivos desproporcionadamente grandes. Si estás guardando una foto en PNG, casi seguro te has equivocado de formato.

GIF y sus límites

GIF es un formato veterano limitado a 256 colores por fotograma y con transparencia binaria: un píxel es opaco o invisible, sin grados intermedios, lo que produce bordes dentados sobre fondos que no sean el previsto. Su único argumento actual es la animación corta y la compatibilidad universal. Para cualquier animación con degradados, fotografía o más de unos pocos segundos, un vídeo en MP4 o WebM produce un archivo mucho más ligero y con mejor imagen; WebP animado y AVIF animado también superan a GIF con holgura. Si heredas un GIF pesado en una página, convertirlo a vídeo suele ser la optimización más rentable de toda la plantilla.

SVG para gráficos vectoriales

SVG no guarda píxeles: guarda instrucciones de dibujo en formato de texto. Un círculo es un círculo, no una rejilla de puntos, así que la imagen se ve perfecta a cualquier tamaño y en cualquier densidad de pantalla sin pesar más. Para logotipos, iconos, gráficos de barras, mapas esquemáticos e ilustraciones planas es imbatible: archivos diminutos, nitidez absoluta y la posibilidad de cambiar colores con CSS.

No sirve para fotografías, y tiene dos cuidados propios. Primero, conviene limpiarlo: los SVG exportados por editores gráficos arrastran metadatos, capas ocultas y decimales innecesarios que multiplican su tamaño. Segundo, un SVG es código; si lo insertas en línea desde una fuente que no controlas, estás insertando etiquetas ajenas en tu página. Usa archivos de origen conocido.

WebP y AVIF: qué aportan realmente

Los dos formatos modernos resuelven el mismo problema: los algoritmos de JPEG y PNG tienen décadas y desde entonces se ha aprendido mucho sobre cómo describir una imagen con menos datos.

WebP es, en la práctica, el reemplazo directo y sin fricción. Tiene modo con pérdida y modo sin pérdida, admite transparencia con canal alfa (algo que JPEG no puede) y permite animación. A igualdad de aspecto visual genera archivos claramente más ligeros que JPEG en fotografías y que PNG en gráficos con transparencia. Su soporte en navegadores actuales es general, así que hoy es una elección segura para la mayoría de sitios.

AVIF deriva del códec de vídeo AV1 y aprieta todavía más, sobre todo en imágenes grandes y en degradados, donde produce menos posterización que JPEG al mismo peso aparente. Admite transparencia, animación, color de amplio gamut y alto rango dinámico. A cambio, codificar un AVIF consume bastante más tiempo de CPU que codificar un JPEG, lo que importa si procesas miles de imágenes en un servidor, y el ecosistema de editores y plugins todavía va por detrás del de WebP.

La estrategia sensata no es elegir uno y renunciar al resto, sino servir el mejor formato que cada navegador entienda usando la etiqueta <picture>, con JPEG o PNG como último recurso. Lo verás más abajo.

Cambiar de formato da un salto de peso de una vez. Ajustar bien las dimensiones lo da en todas las imágenes, todos los días, sin depender de qué navegador tenga enfrente. Si solo vas a hacer una cosa, haz la segunda.

Peso y resolución no son lo mismo

Es la confusión más extendida y la que más bytes cuesta. Son dos propiedades distintas de una misma imagen:

• Resolución o dimensiones: cuántos píxeles tiene de ancho y de alto. Se mide en píxeles, por ejemplo 1600 × 1067.
• Peso o tamaño de archivo: cuántos bytes ocupa en disco. Se mide en KB o MB y depende de las dimensiones, del formato y del nivel de compresión.

Dos archivos con las mismas dimensiones pueden pesar diez veces distinto según cómo se hayan guardado. Y una imagen puede pesar poco y seguir siendo ineficiente si es mucho más grande de lo que necesita.

Densidad de píxeles: por qué 800 no siempre son 800

Las pantallas modernas empaquetan más de un píxel físico por cada píxel CSS. En una pantalla de alta densidad, un hueco declarado en 800 píxeles de ancho se pinta con 1600 píxeles reales, o incluso más. Por eso la práctica habitual es preparar la imagen a aproximadamente el doble del tamaño de visualización y dejar que el navegador la reduzca, o —mejor todavía— ofrecer varias versiones y dejar que elija con srcset.

El matiz importante: ese factor tiene techo. Pasado cierto punto, el ojo deja de distinguir más resolución, y lo único que aumenta es el peso. Servir una imagen a tres o cuatro veces el tamaño de su hueco no mejora nada que nadie pueda ver.

El error más caro: 6.000 px para un hueco de 800

Subir una foto tal cual sale de la cámara —seis mil píxeles de ancho— para mostrarla en una columna de ochocientos es, con diferencia, el fallo que más peso innecesario genera en la web. El navegador descarga la imagen entera, la decodifica entera en memoria y luego la reescala para pintar una fracción del detalle. El usuario paga los megabytes completos y no ve ni una décima parte de la información que ha descargado.

Ningún ajuste de calidad arregla eso. Puedes bajar la calidad JPEG hasta que la foto se llene de bloques y seguirá pesando más de lo razonable, porque el problema no es cómo está comprimida sino cuántos píxeles tiene. Redimensionar primero es el paso que ninguna otra medida sustituye.

Redimensionar antes de comprimir: la medida que más pesa

El número de píxeles crece con el cuadrado de las dimensiones. Reducir el ancho a la mitad no deja la mitad de píxeles: deja la cuarta parte. Ese es el motivo aritmético de que redimensionar gane siempre a cualquier otro ajuste.

Para decidir el ancho correcto, mide el hueco real donde va la imagen en tu diseño. En un blog con columna de lectura, el contenido suele ocupar entre 700 y 800 píxeles CSS; con el factor de densidad, una imagen de unos 1600 píxeles de ancho cubre bien el caso. Una miniatura de listado que se ve a 300 píxeles no necesita más de 600. Un fondo a pantalla completa es el único caso que justifica anchos grandes, y aun así conviene servir varias versiones.

Un detalle que se olvida: declara siempre width y height en la etiqueta <img>, con las dimensiones reales del archivo. No cambian cómo se ve la imagen si tu CSS la hace responsive, pero le dan al navegador la proporción antes de que el archivo llegue, y así reserva el hueco en lugar de empujar el texto hacia abajo cuando la imagen aparece. Es una línea de código que elimina saltos de maquetación.

En GlobalTool puedes hacer el recorte de dimensiones con la herramienta de redimensionar: indicas ancho y alto y descarga el resultado en PNG, todo dentro del navegador. Si lo que quieres es quedarte con una parte del encuadre en lugar de escalarlo entero, la herramienta de recortar te deja fijar el punto de origen y el tamaño de la zona que conservas.

Metadatos EXIF: qué guardan y por qué conviene quitarlos

Las cámaras y los móviles incrustan en cada archivo un bloque de metadatos llamado EXIF. Ahí van el modelo de cámara u objetivo, la fecha y la hora exactas del disparo, los parámetros de exposición, el perfil de color, la orientación del sensor y, en los móviles con la geolocalización activada, las coordenadas GPS del lugar donde se tomó la foto.

Al margen de la privacidad, el EXIF ocupa espacio —a veces bastante, si incluye una miniatura incrustada y un perfil de color extenso— y en una imagen web no aporta nada a quien la ve. Quitarlo es una optimización pequeña pero gratuita.

Hay dos excepciones que conviene conocer antes de borrar a ciegas. La primera es la etiqueta de orientación: muchas fotos de móvil se guardan giradas y llevan una marca que indica al visor cómo rotarlas. Si eliminas el EXIF con una herramienta que no aplica esa rotación primero, la foto aparecerá tumbada. La segunda es el perfil de color: si la imagen está en un espacio distinto de sRGB y borras el perfil sin convertirla antes, los colores se verán apagados o virados. Cualquier flujo que pase la imagen por un lienzo del navegador —como hacen las herramientas de esta web— resuelve las dos cosas de paso, porque reescribe el archivo ya rasterizado y en sRGB.

Un último apunte: la autoría y los derechos también viven en los metadatos (campos IPTC y XMP). Si eres fotógrafo y te interesa conservar el crédito, limpia las coordenadas y la información técnica pero mantén los campos de autoría.

El parámetro de calidad: dónde empieza a notarse

Casi todos los exportadores ofrecen un control de calidad de 0 a 100. No es un porcentaje de nada: es un mando que regula lo agresiva que será la cuantización. Tampoco es comparable entre programas: el 80 de un editor no produce exactamente el mismo archivo que el 80 de otro. Lo que sí se mantiene es el comportamiento general por tramos.

El método práctico es bajar desde arriba, no subir desde abajo. Empieza en un valor alto, reduce en saltos y para en cuanto veas el primer defecto; después sube un par de puntos y quédate ahí. Y hazlo por tipo de imagen: una foto de bosque aguanta mucho más que una captura de pantalla con texto, que directamente no debería ser un JPEG.

Imágenes responsive: srcset, sizes y picture

Todo lo anterior optimiza un archivo. Lo siguiente optimiza qué archivo recibe cada persona, que es donde está el salto grande.

srcset y sizes

Con srcset declaras varias versiones de la misma imagen con su ancho real, y con sizes le dices al navegador qué anchura ocupará el hueco en cada situación. Con esos dos datos y la densidad de la pantalla, el navegador elige el archivo antes de descargar nada:

<img src="foto-800.jpg"
     srcset="foto-400.jpg 400w,
             foto-800.jpg 800w,
             foto-1600.jpg 1600w"
     sizes="(max-width: 600px) 100vw, 800px"
     width="1600" height="1067"
     alt="Descripción real de la imagen"
     loading="lazy" decoding="async">

El descriptor w es el ancho real en píxeles de cada archivo, no el tamaño al que se mostrará. El atributo sizes se lee de izquierda a derecha y se queda con la primera condición que se cumple. Y src sigue ahí como red de seguridad para navegadores que no entiendan srcset.

picture para servir formatos modernos

Cuando quieres ofrecer AVIF o WebP sin dejar fuera a nadie, <picture> es la herramienta. El navegador recorre las fuentes en orden y usa la primera que sabe decodificar:

<picture>
  <source srcset="foto.avif" type="image/avif">
  <source srcset="foto.webp" type="image/webp">
  <img src="foto.jpg" width="1600" height="1067"
       alt="Descripción real de la imagen" loading="lazy">
</picture>

El orden importa: de más moderno a más compatible. Y el <img> final no es opcional, es el que realmente se muestra y el que lleva los atributos de accesibilidad y dimensiones.

Carga diferida y prioridad

El atributo loading="lazy" retrasa la descarga de una imagen hasta que se acerca a la zona visible. Es la línea que más ahorra en páginas largas y funciona en todos los navegadores actuales sin JavaScript. Con una excepción que se incumple constantemente: no pongas lazy en la imagen principal de la parte superior. Esa la quieres cuanto antes; marcarla como diferida retrasa justo lo que el usuario está esperando ver.

Para esa imagen destacada, el planteamiento contrario: loading="eager" y, si tu plantilla lo permite, fetchpriority="high" para que el navegador la coloque por delante en la cola de descargas. decoding="async" es buen acompañante en el resto, porque evita que la decodificación bloquee el pintado del texto.

Si quieres profundizar en la comparación entre formatos, tienes el detalle en la guía sobre las diferencias entre PNG, JPG y WebP, y los pasos de conversión en cómo convertir archivos de imagen online.

Tabla de decisión: qué formato para cada caso

Flujo de trabajo paso a paso

Este es el orden que produce el archivo más ligero con el menor daño. Cambiarlo cuesta bytes o calidad.

1. Parte del original de mayor calidad. Nunca de una copia que ya haya pasado por mensajería, redes sociales o una exportación previa con pérdida.
2. Recorta el encuadre si sobra imagen. Quitar márgenes vacíos reduce píxeles sin tocar nada de lo que importa. Con la herramienta de recortar defines la zona por coordenadas y tamaño.
3. Redimensiona al ancho de destino. Mide el hueco real de tu diseño y multiplícalo por el factor de densidad que quieras cubrir. Usa la herramienta de redimensionar. Este es el paso que más peso elimina.
4. Elige el formato con la tabla de decisión. Foto sin transparencia, a JPEG o WebP; gráfico, a PNG o SVG. Si vienes de un PNG que en realidad es una fotografía, el conversor de PNG a JPG hace ese cambio y te deja fijar la calidad de salida.
5. Comprime. En el compresor de imágenes subes el archivo, mueves el control de calidad y descargas el resultado en JPEG. Todo el proceso ocurre en tu navegador: el archivo no se envía a ningún servidor.
6. Comprueba antes de dar por bueno. Abre original y resultado al 100 % de zoom y mira las zonas delicadas.
7. Nombra el archivo con sentido. silla-oficina-ergonomica-gris.jpg dice algo; IMG_4021.jpg no. El nombre es una de las pocas pistas de contexto que tiene un buscador sobre el contenido de una imagen.
8. Escribe el texto alternativo. Describe lo que se ve para quien no puede verlo. Si la imagen es puramente decorativa, deja alt="" en lugar de rellenarlo con palabras clave.
9. Publica con las dimensiones declaradas y con loading="lazy" en todo salvo en la imagen principal de la parte superior.

Si manejas volúmenes grandes, la parte repetitiva se puede automatizar: los editores de escritorio tienen procesos por lotes, existen utilidades de línea de comandos que redimensionan y convierten carpetas enteras, y la mayoría de gestores de contenido tienen extensiones que optimizan cada imagen al subirla a la biblioteca de medios. Para conversión a WebP o AVIF necesitarás una de esas vías: las herramientas de esta web trabajan con JPEG y PNG.

Cómo comprobar el resultado sin engañarte

Comparar mal es la causa de que mucha gente crea que «se nota» cuando no se nota, o al revés. Tres reglas sencillas:

• Compara al 100 %, no al ajuste de ventana. Cuando el visor reduce la imagen para que quepa, está suavizando los defectos y ocultando exactamente lo que buscas.
• Mira las zonas correctas. Cielos y degradados para detectar bloques y posterización; bordes de alto contraste para los halos; rojos saturados para el sangrado de color; caras y piel para la pérdida de detalle fino.
• Alterna en el mismo sitio de la pantalla. Abre las dos versiones en pestañas y cambia de una a otra sin mover el ratón. Las diferencias saltan mucho más que poniendo las imágenes una al lado de la otra.

Y una comprobación que nada sustituye: mira la página terminada en un móvil real, no solo en el simulador del navegador. El tamaño de pantalla, el brillo y la velocidad de la conexión cambian por completo la percepción de si una imagen está bien o mal.

Para medir el peso, el panel de red de las herramientas de desarrollo de cualquier navegador te muestra cuánto ocupa cada recurso de la página y en qué orden se descarga. Ordena por tamaño y verás en dos segundos cuáles son las tres imágenes que te están arruinando la carga.

Errores frecuentes al comprimir imágenes

• Comprimir sin redimensionar. El orden correcto es dimensiones primero, calidad después. Al revés desperdicias el ajuste fino.
• Guardar fotografías en PNG. Producen archivos enormes sin ninguna ventaja. PNG es para gráficos, no para fotos.
• Reexportar JPEG desde JPEG una y otra vez. El deterioro se acumula y no tiene vuelta atrás.
• Poner loading="lazy" en la imagen destacada de la cabecera. Retrasa justo el elemento que define la sensación de rapidez.
• Omitir width y height. El contenido salta cuando la imagen llega y la lectura se interrumpe.
• Escalar hacia arriba. Ampliar una imagen pequeña no crea detalle: crea borrosidad con más peso.
• Usar un solo archivo para todos los dispositivos. Un móvil no necesita la versión de escritorio y la está pagando en datos.
• Publicar fotos de móvil con el EXIF intacto. Puedes estar publicando coordenadas sin querer.
• Rellenar el alt con palabras clave. No ayuda al posicionamiento y estorba a quien navega con lector de pantalla.
• Convertir a WebP y olvidarse del resto. Un WebP de 4.000 píxeles de ancho sigue siendo un archivo mal dimensionado.
• Medir solo con una herramienta de puntuación. La nota orienta, pero la decisión la toma tu ojo mirando la imagen.

Glosario rápido

• Artefacto: defecto visible introducido por la compresión que no estaba en la imagen original.
• Canal alfa: información de transparencia por píxel, con valores intermedios además de opaco e invisible.
• Cuantización: paso de JPEG en el que se redondean los coeficientes y se descarta detalle. Es donde ocurre la pérdida.
• Submuestreo de crominancia: guardar el color con menos resolución que el brillo. Se indica como 4:4:4, 4:2:2 o 4:2:0.
• DPR (device pixel ratio): cuántos píxeles físicos usa la pantalla por cada píxel CSS.
• EXIF: metadatos que la cámara incrusta en el archivo, incluida la geolocalización.
• Lazy loading: aplazar la descarga de una imagen hasta que se acerca a la zona visible.
• Lossless / lossy: sin pérdida / con pérdida.
• Posterización: conversión de un degradado suave en escalones de color.
• Rasterizar: convertir un gráfico vectorial en una rejilla de píxeles.
• sRGB: espacio de color estándar de la web; lo seguro para publicar.
• srcset: atributo que ofrece varias versiones de una imagen para que el navegador elija.

Preguntas frecuentes

¿Se puede comprimir una imagen sin perder absolutamente nada de calidad?

Sí, con compresión sin pérdida: PNG, WebP en modo lossless o utilidades que reoptimizan un JPEG sin recodificarlo. El archivo resultante es idéntico píxel a píxel. El ahorro es modesto en fotografías y notable en gráficos con colores planos. Si lo que buscas es un recorte grande de peso en una foto, necesitarás compresión con pérdida bien ajustada, que no es lo mismo que no perder nada pero sí es indistinguible en pantalla.

¿Cuánto debería pesar una imagen en una web?

No hay una cifra universal, porque depende del papel de la imagen. La forma correcta de plantearlo es al revés: fija el ancho que realmente necesita, elige el formato adecuado y baja la calidad hasta justo antes de que se vea el primer defecto. El peso resultante es el correcto para esa imagen. Como referencia de comportamiento, una miniatura debe pesar una fracción mínima de lo que pesa la imagen destacada de la cabecera.

¿Es mejor WebP o JPEG?

Para fotografías en web, WebP a igualdad de aspecto visual genera archivos más ligeros y además admite transparencia y animación, cosas que JPEG no hace. JPEG mantiene la ventaja de la compatibilidad absoluta con cualquier programa, dispositivo o sistema antiguo. La solución que no obliga a elegir es servir WebP con <picture> y dejar un JPEG como alternativa.

¿Y AVIF? ¿Ya se puede usar?

En navegadores actuales sí. Comprime mejor que WebP, sobre todo en imágenes grandes y en degradados. Las pegas están en el otro extremo: codificarlo consume bastante más tiempo de proceso y el soporte en editores, plugins y flujos de trabajo va por detrás. Lo razonable hoy es ofrecerlo como primera fuente dentro de <picture>, con WebP detrás y JPEG al final.

¿Qué nivel de calidad JPEG debo usar?

Para la mayoría de imágenes de un sitio web, un valor intermedio-alto funciona bien y es el punto de partida sensato. Sube si la imagen tiene degradados amplios, texto o se va a poder ampliar; baja si es una miniatura pequeña o un fondo decorativo. Lo importante es que el número no es transferible entre programas: comprueba siempre el resultado con tus ojos en lugar de fiarte del valor.

¿Comprimir imágenes mejora el SEO?

De forma indirecta, sí. Los buscadores tienen en cuenta la experiencia de carga, y las imágenes son el componente más pesado de casi cualquier página. Una web que carga rápido retiene mejor a quien llega, y eso también cuenta. Lo que no hay es un premio por comprimir en sí mismo: el beneficio viene de la página más rápida y de la mejor experiencia, no del acto de comprimir.

¿Hay que subir las imágenes a un servidor para comprimirlas?

No hace falta. El compresor, el redimensionador, el recortador y el conversor de PNG a JPG de esta web trabajan íntegramente en tu navegador mediante el lienzo de JavaScript: el archivo no sale de tu equipo. Es la opción recomendable cuando las imágenes contienen información personal, documentos o material de un cliente.

¿Puedo recuperar la calidad de una imagen ya comprimida?

No. La compresión con pérdida descarta información de forma definitiva, y volver a guardar con calidad alta solo produce un archivo más pesado con los mismos defectos. Existen filtros que suavizan artefactos o reconstruyen detalle plausible, pero están inventando píxeles, no recuperando los originales. La única solución real es volver al archivo de partida.

¿Por qué mi PNG pesa más que el JPEG original?

Porque PNG comprime sin pérdida y una fotografía es prácticamente ruido: apenas hay patrones que repetir, así que el algoritmo casi no puede ahorrar nada. Convertir una foto de JPEG a PNG suele multiplicar su peso sin mejorar la imagen, porque los artefactos que ya tenía se conservan intactos. Para fotos, quédate en JPEG o pasa a WebP.

¿Debo quitar los metadatos EXIF de todas las fotos?

De las que publicas en internet, sí en lo que respecta a la geolocalización: las coordenadas de dónde se tomó la foto rara vez deben ser públicas. Los datos técnicos también sobran en una imagen web y ocupan espacio. Si eres fotógrafo, conserva los campos de autoría y derechos. Ten en cuenta la etiqueta de orientación: si la eliminas sin aplicar antes la rotación, la foto aparecerá girada.

¿Cómo comprimo muchas imágenes a la vez?

Las herramientas de esta web están pensadas para archivos sueltos. Para lotes grandes tienes tres caminos: el procesamiento por lotes de un editor de escritorio, una utilidad de línea de comandos que recorra una carpeta aplicando la misma receta, o una extensión de tu gestor de contenido que optimice cada imagen en el momento de subirla. Sea cual sea, prueba primero la receta con cinco imágenes representativas antes de lanzarla sobre quinientas.

¿Redimensionar y comprimir es lo mismo?

No. Redimensionar cambia cuántos píxeles tiene la imagen; comprimir cambia cuántos bytes hace falta para describir esos píxeles. Son operaciones independientes y complementarias, y el orden correcto es redimensionar primero. Si solo comprimes una imagen sobredimensionada, seguirá siendo demasiado pesada por mucha calidad que le quites.

¿Los GIF animados se pueden comprimir?

Se pueden reducir quitando fotogramas, recortando la paleta o bajando las dimensiones, pero el techo es bajo por el propio formato. La medida que de verdad cambia las cosas es convertirlo a vídeo MP4 o WebM, que para el mismo contenido produce un archivo mucho más ligero y con mejor imagen. En una página con varios GIF pesados, esa conversión suele ser la optimización más rentable.

Resumen para llevarse

Comprimir bien no es dar con un ajuste mágico, es seguir un orden. Redimensiona a lo que de verdad se va a mostrar, elige el formato por el tipo de imagen y no por costumbre, baja la calidad hasta justo antes del primer defecto visible, limpia los metadatos antes de publicar y deja que el navegador elija la versión adecuada con srcset y <picture>. Con ese orden interiorizado, la diferencia entre una página pesada y una ligera deja de ser cuestión de suerte.

Puedes recorrer todo el flujo sin instalar nada: recortar, redimensionar, convertir de PNG a JPG y comprimir, todo dentro de tu navegador y sin que los archivos salgan de tu equipo.