¿Qué es un JPEG progresivo?

JPEG progresivo es un método de codificación de imágenes JPEG en el que los datos se almacenan de tal manera que la imagen se muestra de forma progresiva al cargar. Primero se carga una versión de baja resolución o menos detallada, y luego, a medida que se reciben nuevos datos, la calidad mejora.

Diferencias con el JPEG básico (Baseline):

JPEG progresivo	JPEG básico
La imagen se muestra de forma progresiva, mejorando.	La imagen se carga de arriba hacia abajo, en bloques.
Adecuado para conexiones lentas.	Adecuado para conexiones rápidas.
El archivo es un poco más grande.	El archivo es un poco más pequeño.
Requiere más tiempo de procesamiento para decodificar.	Requiere menos tiempo de procesamiento para decodificar.

Aplicación en Frontend:

• Mejorar la experiencia del usuario en internet lento.
• Sensación visual de una carga más rápida del contenido.
• Se puede combinar con lazy loading para optimización.

Técnicamente, JPEG progresivo divide los coeficientes de frecuencia de la imagen en varias pasadas. Primero se transmiten los coeficientes de baja frecuencia (estructura general), luego los de alta frecuencia (detalles).

Ejemplo de conversión de JPEG básico a progresivo usando ImageMagick:

# base.jpg - archivo original
# progresivo.jpg - archivo resultante
convert base.jpg -interlace Plane progresivo.jpg

El uso en CSS o HTML no difiere del JPEG normal, ya que es un formato de codificación interno:

<img src="progresivo.jpg" alt="Imagen progresiva">

.background {
  background-image: url('progresivo.jpg');
}