JPEG é o tipo de imagem mais comum usado na Web e, por um bom motivo, há décadas, ele é quase sempre a escolha certa para codificar fotografias. O caso de uso está logo ali no nome: JPEG significa "Joint Photographic Experts Group", o comitê responsável por emitir a primeira norma em 1992. Você verá a extensão do arquivo JPEG como .jpg ou .jpeg, embora esse último seja raro em uso moderno.
Enquanto a compressão sem perda compacta passivamente os dados da imagem da melhor forma possível, a compressão com perdas do JPEG busca oportunidades para tornar a compactação mais eficiente com mudanças pequenas e muitas vezes imperceptíveis nos dados da imagem. O JPEG codifica os dados de imagem como blocos de 8 por 8 pixels e descreve os blocos, e não os pixels individuais dentro deles, de forma algorítmica.
Pode parecer uma distinção acadêmica no papel: "GIF usa uma grade feita de pixels, enquanto JPEG usa uma grade formada por grades menores de pixels". Na prática, o uso de blocos em vez de pixels faz com que o JPEG seja adequado para um caso de uso muito mais comum para imagens: o tipo de gradientes sutis em camadas que compõem uma fotografia real.
Descrever até mesmo um gradiente de pixel único muito simples usando a codificação no estilo GIF seria extremamente detalhado:
Linha um, colunas de um a nove são #00CC00. A primeira linha, a coluna dez é #00BB00. Linha um, coluna onze é #00AA00. Linha 1, coluna 12 é #009900. Linha 1, coluna 13 é #008800. Linha um, coluna 14 é #007700. Linha um, coluna 15 é #006600. Linha um, coluna dezesseis é #005500.
Descrever um gradiente usando codificação no estilo JPEG é muito mais eficiente:
O bloco um é #00CC00. O bloco dois é um gradiente de #00CC00 a #005500.
O ponto forte do JPEG é quantificar o nível de detalhes de "alta frequência" de uma imagem, muitas vezes de forma imperceptível. Como resultado, salvar uma imagem como JPEG geralmente significa reduzir a qualidade dela de maneiras mensuráveis, mas não necessariamente visíveis. Como você aprendeu, a quantização da paleta no estilo GIF é uma operação relativamente simples: reduzir o número de cores em uma imagem resulta em arquivos menores, mas de uma maneira que pode ser facilmente detectada pelo olho humano.
O JPEG, por outro lado, é inteligente sobre como a quantização é realizada: a compressão com perdas do JPEG tenta quantificar uma fonte de imagem de uma maneira que corresponde vagamente à maneira como nossos próprios sistemas psico-visuais quantificam o mundo ao nosso redor. Na verdade, o JPEG tenta eliminar detalhes que provavelmente não seriam vistos, para que possa passar por uma compactação adicional.
O sistema psicovisual humano faz um ótimo trabalho para "compactar" as imagens que você recebe constantemente. Quando olho para fora, para meu pequeno jardim, posso processar imediatamente uma enorme quantidade de informações: por exemplo, flores individuais de cores brilhantes se destacam. Eu me registro imediatamente que o solo está cinza e empoeirado e as folhas estão cavando. Minhas plantas precisam de água. O que eu vejo, mas não processo totalmente, são a forma, o tamanho, o ângulo e o tom de verde exatos de qualquer uma das folhas soltas. Posso procurar ativamente esse nível de detalhe, é claro, mas seria simplesmente muitas informações para serem absorvidas passivamente, sem nenhum benefício real. Então meu sistema psicovisual faz uma pequena quantização por conta própria, destilando essa informação para "as folhas estão caíndo".
Na verdade, o JPEG funciona da mesma forma. A compressão com perda do JPEG reduz o nível de detalhe de uma imagem de uma maneira que talvez não seja registrada em nossos sistemas psicovisuais com "perda" naturalmente, se feito dentro da razão, e apresenta muito mais oportunidades de economia de largura de banda do que a compressão sem perdas sozinha.
Por exemplo, JPEG se beneficia de um dos nossos principais pontos fracos psicovisual: nossos olhos são mais sensíveis às diferenças de brilho do que às diferenças de matiz. Antes de aplicar qualquer compactação, o JPEG usa um processo chamado "transformação discreta de cosseno" para dividir a imagem em frequências separadas, ou seja, "camadas", representando a luminância (brilho) e a crominância (cor), ou "luma" e "chroma".
A camada de luma é minimamente compactada, descartando apenas pequenos detalhes que não são perceptíveis ao olho humano.
As camadas cromáticas são reduzidas significativamente. Em vez de simplesmente quantificar a paleta das camadas de chroma, como o GIF, o JPEG pode executar um processo chamado "subamostragem", em que uma camada é armazenada em uma resolução mais baixa. Quando é recombinada esticando efetivamente as camadas cromáticas de resolução mais baixa sobre a camada de luma, a diferença costuma ser imperceptível. Pequenas diferenças na tonalidade podem ser perceptíveis se compararmos a fonte da imagem original e nosso JPEG lado a lado, mas somente quando soubermos exatamente o que procurar.
Dito isso, JPEG não é perfeito. Por mais astuto que o JPEG tenha como objetivo ignorar a compactação, ela pode se tornar extremamente óbvia se for levado longe demais. Na verdade, se você passou muito tempo na Web, principalmente dias atrás, pode ter notado que o resultado da compactação de JPEG foi muito longe:
Compactar dados de imagem de maneira muito agressiva significa que o nível de detalhe é ainda mais reduzido do que nossos sistemas psicovisuais naturalmente ignorariam, de modo que a ilusão é quebrada. Fica óbvio que falta um detalhe. Como o JPEG opera em termos de blocos, as emendas entre esses blocos podem começar a aparecer.
JPEG progressivo
JPEG progressivo (PJPEG) reordena efetivamente o processo de renderização de um JPEG. Os JPEGs "de referência" são renderizados de cima para baixo à medida que a transferência avança, enquanto o JPEG progressivo divide a renderização em um conjunto de "verificações" de tamanho original, que também são feitas de cima para baixo, a cada verificação aumentando a qualidade da imagem. A imagem inteira aparece imediatamente, embora desfocada, fica mais clara à medida que a transferência continua.
Parece uma diferença estritamente técnica no papel, mas há um grande benefício perceptível: ao entregar uma versão em tamanho original da imagem imediatamente em vez de espaço vazio, o PJPEG pode ficar mais rápido do que um JPEG de referência para o usuário final. Além disso, com exceção das imagens menores, codificar uma imagem como PJPEG quase sempre significa um tamanho de arquivo menor em comparação com um JPEG de referência. Não muito, mas cada byte ajuda.
No entanto, há uma pequena desvantagem: a decodificação de PJPEG é mais complexa no lado do cliente, o que significa colocar um pouco mais de sobrecarga sobre o navegador e o hardware de um dispositivo durante a renderização. Essa sobrecarga de renderização é difícil de quantificar em termos exatos, mas é muito pequena e improvável que seja perceptível, exceto no caso de dispositivos com muita capacidade. É uma troca que vale a pena e, no geral, o progressivo é uma abordagem padrão adequada ao codificar uma imagem como JPEG.
Como usar JPEG
Talvez você se sinta um pouco sobrecarregado por todas essas informações. No entanto, há boas notícias para o seu trabalho diário: as especificações mais técnicas da compactação de JPEG são abstraídas e, em vez disso, expostas como uma única configuração de "qualidade": um número inteiro de 0 a 100. O valor "0" oferece o menor tamanho de arquivo possível e, como esperado, a pior qualidade visual possível. Conforme você avança de 0 para 100, a qualidade e o tamanho do arquivo aumentam. Essa configuração é subjetiva, obviamente. Nem todas as ferramentas vão interpretar um valor de "75" da mesma maneira, e a qualidade perceptiva sempre varia de acordo com o conteúdo da imagem.
Para entender como essa configuração de compactação funciona, vamos usar uma ferramenta comum baseada na Web para otimizar arquivos de imagem: o Squoosh.
O Squoosh, mantido pela equipe do Chrome, oferece uma comparação lado a lado entre diferentes métodos de codificação e configuração de saídas de imagem, com opções de configuração que variam de um controle deslizante de "qualidade" global de 0 a 100, até a capacidade de ajustar detalhes de crominância e reamostragem de luminância. Quanto menor o número de "qualidade", maior a compactação e menor será o arquivo resultante.
Aqui, com a "qualidade" definida como 60, o tamanho do arquivo é reduzido em 79%. Não se engane com as implicações desse rótulo: as diferenças de qualidade na maior parte da escala serão imperceptíveis ao olho humano, mesmo ao realizar uma comparação lado a lado.
Para converter a imagem de origem em um JPEG progressivo, marque a caixa intitulada "renderização progressiva" em "Opções avançadas". Algumas dessas opções de configuração quase certamente são um detalhamento maior do que o projeto médio da Web exigiria, mas elas podem fornecer uma visão mais detalhada de como as coisas que você aprendeu sobre a codificação JPEG afetam o tamanho e a qualidade do arquivo em casos de uso reais.
Não há muito isso em termos práticos, apesar da complexidade que agora sabemos que o JPEG é internamente. O Squoosh é apenas um dos incontáveis métodos de salvar JPEGs otimizados. Todos usam um método semelhante para determinar o nível de compactação: um único número inteiro entre 0 e 100.
Determinar o nível ideal de compactação para imagens é um jogo refinado, já que toda a complexidade da codificação JPEG é destilada em um único número inteiro, especialmente quando tudo depende do conteúdo de uma imagem. Assim como quando pensamos em piscar ou respirar, considerar que as configurações de compressão JPEG mudam a maneira como as interpretamos.
Olhando para trás, depois de escrever tudo isso, meu processamento psicovisual se tornou mais manual. Agora estou olhando para as folhas individuais, mesmo que a imagem em si não tenha mudado. Isso torna a configuração da compactação de JPEG um pouco trabalhosa: você sabe exatamente que tipos de defeitos visuais procurar. Ao pensar na compressão de imagem em primeiro lugar, você foca em folhas individuais. Estamos nos preparados para detectar um leve desfoque e o artefato de compressão ocasional. Quanto mais difícil você procurar artefatos ao ajustar suas configurações de compactação de JPEG, maior será a probabilidade de encontrá-los, quando um usuário provavelmente não os encontraria. Mesmo que esse usuário saiba exatamente o que procurar, ele provavelmente não acessará uma página com a compactação de JPEG em mente.
Por esse motivo, evite o instinto de aprimorar uma imagem à procura de artefatos, ou até mesmo olhar muito de perto as partes das imagens em que você sabe que os artefatos aparecerão primeiro. Para os usuários, artefatos fracos se misturam aos minúsculos detalhes que os sistemas psicovisual com perda geralmente encobrem. Na verdade, mesmo entendendo os truques que o JPEG tenta jogar, você não notará esses mesmos artefatos ao navegar na Web, a menos que procure por eles. Por esse motivo, é quase sempre uma aposta segura incentivar a compactação de JPEG um pouco menor do que você acha que pode ser perceptível, especialmente quando essa imagem vai ser exibida menor que o tamanho intrínseco devido ao estilo direto ou às restrições definidas pelo layout ao redor.