Como funciona o PNG

O Portable Network Graphics (PNG) tornou-se um marco no desenvolvimento de aplicativos nas últimas décadas. Ele está arrepiado em todos os lugares, desde desenvolvimento de jogos, desenvolvimento da Web e desenvolvimento do Android, o que significa que é amplamente adotado, mas também tem a oportunidade de ser amplamente utilizado .

E como já discuti anteriormente , o PNG fornece um formato de imagem agradável e de alta resolução, mas isso significa que há muito espaço para melhorias na compactação de dados. Mas antes que possamos começar a falar sobre como comprimir arquivos PNG ainda mais, temos que primeiro falar sobre como o formato funciona .

Entendendo a Compressão

O processo de compressão do PNG é totalmente sem perdas; o que significa que o arquivo compactado pode reconstruir a imagem de origem exatamente. Feito em dois estágios: Previsão (também conhecido como filtro) e, em seguida, Compactação.

# 1 Filtragem (previsão)

A codificação delta é um dos métodos de compactação numérica mais poderosos que existem. A ideia básica é que você pode representar qualquer valor como uma diferença do valor anterior. Assim,

[2,3,4,5,6,7,8] pode se tornar [2,1,1,1,1,1,1], onde

[2, 3–2 = 1, 4–3 = 1, 5–4 = 1, 6–5 = 1, 7–6 = 1, 8–7 = 1]

A razão pela qual isso é tão poderoso, é que se os dados são linearmente correlacionados (ou seja, o valor tem alguma baixa diferença em relação ao valor anterior), você acaba transformando os valores do seu conjunto de dados em muitos valores duplicados e baixos, que são mais compressível.

O formato PNG usa a codificação delta em um formato que chama de "filtragem". Basicamente, para cada linha de varredura de pixels, um pixel atual é codificado em alguma relação com o pixel à esquerda, o pixel acima e o pixel acima à esquerda.

Por exemplo, se codificássemos um determinado pixel listando sua diferença entre a média de A e B (X – ((A + B) / 2), obteríamos:

A filtragem leva ABC e usa isso para prever qual é o valor de x. O valor com o qual substituímos x é a diferença entre a previsão e o valor real.

Agora, vale a pena notar que cada linha pode ser um pouco diferente, e é por isso que o PNG permite que 1 de 5 modos diferentes sejam escolhidos, por linha:

  • Sem filtragem
  • Diferença entre X e A
  • Diferença entre X e B
  • Diferença entre X e (A + B) / 2 (aka média)
  • Paeth predictor (função linear de A, B, C)

A intenção aqui é que cada linha possa escolher o melhor método de filtragem, por si só, de modo que possa produzir o menor número de símbolos únicos. Aqui está o nosso exemplo original com cada modo:

Um exemplo de aplicação de filtragem a duas linhas de valores de pixel. Os pixels afetados são destacados em azul.

E é importante notar que esses filtros são feitos, por canal e não por pixel. Isso significa que o filtro é aplicado a todos os valores vermelhos de um pixel para uma linha de varredura e, em seguida, separadamente para todos os valores azuis de uma linha de varredura (embora todas as cores em uma linha usem o mesmo filtro).

E o formato PNG tem algumas maneiras bacanas de escolher qual filtro usar em um canal; Enquanto a força bruta é a mais direta, é simplesmente o fim. Em vez disso, os desenvolvedores experimentaram diferentes tipos de imagens e criaram algumas regras práticas que estão próximas do ideal; como usar Nenhum filtro para imagens de paleta e imagens de escala de cinza sub 8 bits. E para as outras imagens, escolha o filtro que minimiza a soma das diferenças absolutas; Em vez de usar o módulo 256, em vez da matemática com assinatura padrão, pegue o valor de abs e adicione-os todos juntos para uma determinada linha e compare as somas dos outros tipos de filtro. Escolha o filtro que dá a menor soma.

Compressão # 2 (DEFLATE)

Uma vez que a filtragem ocorreu em uma linha de varredura, ela é passada para um descendente do algoritmo LZ77, conhecido como DEFLATE; Este algoritmo combina a codificação LZ77 ao lado de um codificador Huffman. O que é quase idêntico a compressores como PKWARE, PKZIP, GZip, etc. A implementação é padrão fora da caixa, mas tem algumas advertências interessantes quando se trata de dados de imagem.

  1. Deflate limita os comprimentos de correspondência entre 3 e 258 símbolos; o que coloca a máxima taxa de compressão concebível em torno de 1032: 1.
  2. Se a partida tiver menos de 3 símbolos, você incorrerá em alguma sobrecarga para representar o símbolo

O resultado desses dois significa que o tamanho da sua imagem pode ter um impacto se as correspondências forem encontradas em uma linha de varredura.

Considere esta imagem abaixo, A versão 270×90 é de apenas 20k, no entanto, a versão 270×92 é 2x maior.

Logicamente isso parece errado. Adicionar 540 pixels a uma imagem não deve causar um aumento de 2x na compactação. No entanto, quando olhamos um pouco mais de perto, podemos ver porque isso está ocorrendo; O mapa de calor a seguir das imagens representa o quão compactado é um determinado pixel. Azul profundo = muito comprimido, amarelo / vermelho = não muito comprimido

O que está ocorrendo aqui é que, na imagem menor, há mais correspondências nas linhas de varredura e, portanto, há melhor compactação. No entanto, ajustar ligeiramente o tamanho altera o tipo de correspondência que pode ocorrer; alguns candidatos em potencial para correspondência estão agora fora da nossa janela LZ e, portanto, não são correspondidos, resultando em um arquivo maior.

Se você está procurando ver como suas próprias imagens são compactadas com PNG, confira PNGThermal .

Entendendo o formato

Agora, vale a pena notar que o PNG é mais do que apenas os estágios de filtragem e compactação. É um formato de contêiner bastante extensível, que pode suportar todos os tipos de tipos de imagem e dados adicionados.

Vamos primeiro começar com o fato de que o formato de arquivo PNG pode suportar uma série de partes dentro dele, que podem incluir vários tipos de dados. Por exemplo, você tem o bloco PNG Header, que contém informações simples sobre a imagem, como largura, altura, profundidade de bits e tipo de cor.

O bloco de dados de imagem contém as informações de imagem propriamente ditas (oh, e observe, essas informações podem existir em vários blocos). Então, para imagens com cores, há um pedaço separado para isso.

E finalmente um pedaço de fim de arquivo . E esses são os principais pedaços, mas há também uma grande quantidade de outros pedaços como:

  • Cor de fundo padrão
  • Coordenadas de croma sobre como exibir pontos brancos
  • Especificação Gamma
  • Informação do histograma
  • Dados de texto, com idioma ou informações de metadados
  • Informação de espaço de cor
  • Dados de imagem estéreo
  • Um trecho que registra a última vez que o arquivo foi alterado
  • E dados de transparência.

Agora, esses pedaços são onde você precisa ficar atento, porque muito lixo é colocado lá pelo aplicativo de edição de fotos. Por exemplo, salvar um arquivo PNG do Photoshop resulta em um trecho que diz “ essa imagem foi feita no photoshop. Esse pedaço não tem nada a ver com os dados de pixel visíveis, mas está incluído no próprio arquivo. Como tal, REMOVER partes inúteis é fundamental para garantir tamanhos pequenos de arquivos. A imagem abaixo mostra uma imagem de 16×16 pixels, salva do Photoshop como um PNG normal, e a outra, usando a opção “ exportar para a web ” do photoshop, que remove todos os problemas.

A imagem da esquerda foi salva regularmente pelo Photoshop, a imagem da direita foi salva por meio de “exportar para a web”. A diferença nos tamanhos vem da remoção de metadados do arquivo.

Formato de pixel

O formato PNG também pode suportar vários tipos de formatos de pixel para que você possa criar

Indexado = 1 canal, pode ser 1,2,4,8 bpc

Escala de cinza = 1 canal, pode ser 1,2,4,8,16 bpc

Cinza + Alfa = 2 canais, pode ser 8 ou 16 bpc

Truecolor (RGB) = 3 canais, pode ser 8 ou 16 bpc

RGBA = 4 canais, pode ser 8 ou 16 bpc

Os formatos de pixel são selecionados pelo autor do arquivo de imagem. Portanto, não é muito interessante discutir, além de ter certeza de que você escolheu o formato de pixel correto; Armazenar uma imagem em escala de cinza como truecolor w / alpha é uma má ideia.

História: GIF e o nascimento do PNG

Quando se trata do volume implacável de conteúdo da Web, as imagens são, de longe, o maior portador de carga atualmente (embora haja um argumento a ser feito de que os vídeos se tornaram rei ultimamente).

Mas o que é realmente interessante é que, por mais que as informações de compactação possam ajudar a resolver parte do congestionamento, há uma enorme quantidade de problemas humanos que impedem que a compactação chegue às mãos de todos.

Vamos fazer uma viagem de volta a 1985, quando a Unisys registrou uma patente para o algoritmo de compressão LZW, nada muito interessante na época. Alguns anos mais tarde, quando a CompuServe inventou o formato 89a (que mais tarde se tornou o formato GIF), eles usaram o LZW como seu backbone, sem perceber que ele era um patenteado. A Unisys não se importou com isso até 1993, quando o navegador Netscape adicionou suporte à tag HTML do IMG, juntamente com suporte para o formato 89a. Em um ano, imagens animadas tornaram-se todas as manias na internet, e a Unisys começou a aplicar sua patente. A CompuServe e a Unisys finalmente chegaram a um acordo judicial em dezembro de 1994, anunciando que a Unisys começaria a coletar royalties de todos os softwares que usassem o formato gráfico 89a. Nos meses seguintes a essa decisão, um grupo de engenheiros desenvolveu um formato totalmente novo, livre de patentes, conhecido como formato Portable Network Graphics ou PNG.

Em 2004, a patente do LZW finalmente expirou, mas por uma década, o debate sobre o formato de imagem do GIF / PNG foi muito caloroso entre os internautas.

No fechamento

O PNG é um tipo de formato de imagem muito flexível e poderoso que se tornou popular na Web devido à sua capacidade de oferecer suporte à transparência. Mas não é certo para toda a situação; Basicamente, verifique se você está usando a melhor ferramenta para o trabalho. Se a sua imagem for fotográfica e não for necessária perda absoluta, o JPG ou um método equivalente com perdas seria mais eficiente do que qualquer abordagem sem perdas. Por outro lado Se você precisa de um formato de bits menor, ou precisa de transparência, o PNG seria uma vitória dominante sobre o JPG.

E se você estiver interessado em ver a implementação mais simples de um programador PNG, confira esta incrível essência , que embala a coisa toda em ~ 40 linhas de código.

Claro, então há o WebP, que lhe dará ambos .. Mas esse artigo é separado;)

HEY !

Quer diminuir seus arquivos PNG ainda menores? Confira o post de acompanhamento dos Arquivos PNG Menores .

Quer saber como funcionam os arquivos JPG e como reduzi-los ?

Quer mais bondade de compressão de dados? Compre meu livro !