O que é um JPEG progressivo?

JPEG progressivo é um método de codificação de imagens JPEG em que os dados são armazenados de forma que a imagem seja exibida de forma progressiva ao carregar. Primeiro, carrega-se uma versão de baixa resolução ou menos detalhada, e depois, à medida que novos dados são recebidos, a qualidade melhora.

Diferenças em relação ao JPEG básico (Baseline):

JPEG progressivo	JPEG básico
A imagem é exibida de forma progressiva, melhorando.	A imagem é carregada de cima para baixo, em blocos.
Adequado para ligações lentas.	Adequado para ligações rápidas.
O arquivo é um pouco maior.	O arquivo é um pouco menor.
Requer mais tempo de processamento para decodificação.	Requer menos tempo de processamento para decodificação.

Aplicação em Frontend:

• Melhorar a experiência do utilizador em internet lenta.
• Sensação visual de carregamento mais rápido do conteúdo.
• Pode ser combinado com lazy loading para otimização.

Tecnicamente, o JPEG progressivo divide os coeficientes de frequência da imagem em várias passagens. Primeiro, são transmitidos os coeficientes de baixa frequência (estrutura geral), depois os de alta frequência (detalhes).

Exemplo de conversão de JPEG básico para progressivo usando ImageMagick:

# base.jpg - ficheiro original
# progressivo.jpg - ficheiro resultante
convert base.jpg -interlace Plane progressivo.jpg

O uso em CSS ou HTML não difere do JPEG normal, pois é um formato de codificação interno:

<img src="progressivo.jpg" alt="Imagem progressiva">

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