Upng.js: Use dithering

Criado em 27 mar. 2018  ·  5Comentários  ·  Fonte: photopea/UPNG.js

É importante para imagens coloridas.

Imagem de origem [174285 B]
firefox-512

Após a atualização, interface da web [69927 B]
firefox-512 upng

O resultado do pngquant parece melhor. [69932 B]
firefox-512 pngquant

Comentários muito úteis

Sim, o pngquant calcula o erro quadrático médio e aplica pontilhamento apenas em áreas com alto erro. Dessa forma, as áreas que não precisam de pontilhamento não recebem o ruído extra.

pngquant também faz detecção de bordas (semelhante ao algoritmo de Prewitt) e desabilita o pontilhamento nas bordas. Isso evita que o anti-aliasing pareça pele.

Em pngquant, 90% do tempo é gasto em corridas extras de K-means. Se você usar --speed 10 toda a recompressão (em i7 2.3 Ghz) leva ~ 80ms pontilhados, 50ms não combinados.

(BTW, TinyPNG não tem seu próprio algoritmo. É apenas uma GUI para pngquant).

Todos 5 comentários

Implementei a hesitação Floyd-Steinberg no passado, mas não valeu a pena.

Acho que precisamos de um dithering amigável de compressão. Você conhece alguém que poderia nos ajudar?

pngquant usa Floyd-Steinberg modificado para melhor manuseio de cores.

Eu acredito que o dithering sempre aumentará o tamanho do arquivo por causa de sua natureza aleatória.
Único objetivo desse recurso - para dar prazer aos nossos olhos.
O pontilhamento pode ser escondido sob a bandeira, assim como em Ps. Os usuários decidirão.

Acho que precisamos de um dithering amigável de compressão. Você conhece alguém que poderia nos ajudar?

Acho que podemos perguntar a @kornelski.

Quer dizer, fiz três versões de imagem:

  • A: 50 cores: 15 kB
  • B: 50 cores + Dithering: 23 kB
  • C: 100 cores: 22 kB

B parecia tão bom quanto C, mas era um pouco maior, então pensei que permitir mais cores é melhor do que pontilhar (ambos aumentam o tamanho do arquivo).

Acho que precisamos de pontilhamento, que consiste em alguns padrões repetitivos, ou seja, deve ser "amigável" para o algoritmo Esvaziar - fazer B ter apenas 20 kB (por isso ainda é tão bom quanto C, mas menor).

POR FALAR NISSO. Eu também acho que o pngquant executa um deflate melhor (que também leva cerca de 100 vezes mais tempo do que UPNG.js: por exemplo, 30ms vs. 3000ms), então ele pode fazer B ter apenas 20 kB, usando o mesmo dithering que eu usei.

Oh, eu vejo.
Não conheço o algoritmo de dithering, que pode lidar com este caso.

pngquant calcula o erro de mse, tem configurações de qualidade mín. e máx. e não grava o arquivo se seu tamanho for muito grande ou a qualidade diminuir drasticamente.

Talvez você ache este tópico útil
https://encode.ru/threads/1757-Lossy-DEFLATE-lossy-PNG

E este projeto em particular
https://github.com/foobaz/lossypng

Sim, o pngquant calcula o erro quadrático médio e aplica pontilhamento apenas em áreas com alto erro. Dessa forma, as áreas que não precisam de pontilhamento não recebem o ruído extra.

pngquant também faz detecção de bordas (semelhante ao algoritmo de Prewitt) e desabilita o pontilhamento nas bordas. Isso evita que o anti-aliasing pareça pele.

Em pngquant, 90% do tempo é gasto em corridas extras de K-means. Se você usar --speed 10 toda a recompressão (em i7 2.3 Ghz) leva ~ 80ms pontilhados, 50ms não combinados.

(BTW, TinyPNG não tem seu próprio algoritmo. É apenas uma GUI para pngquant).

Esta página foi útil?
0 / 5 - 0 avaliações

Questões relacionadas

MartinMuzatko picture MartinMuzatko  ·  6Comentários

HRK44 picture HRK44  ·  9Comentários

mn4367 picture mn4367  ·  16Comentários

iklementiev picture iklementiev  ·  3Comentários

andrewchch picture andrewchch  ·  3Comentários