Upng.js: 디더링 사용

과거에 Floyd-Steinberg 디더링을 구현했지만 그만한 가치가 없었습니다.

압축 친화적인 디더링이 필요하다고 생각합니다. 우리를 도울 수 있는 사람을 알고 있습니까?

pngquant는 더 나은 색상 처리를 위해 수정된 Floyd-Steinberg를 사용합니다.

나는 디더링이 무작위적인 특성 때문에 항상 파일 크기를 증가시킬 것이라고 믿습니다.
이 기능의 유일한 목적은 우리의 눈을 즐겁게 하는 것입니다.
디더링은 Ps와 마찬가지로 플래그 아래에 숨길 수 있습니다. 사용자가 결정할 것입니다.

압축 친화적인 디더링이 필요하다고 생각합니다. 우리를 도울 수 있는 사람을 알고 있습니까?

@kornelski에게 물어볼 수 있을 것 같습니다.

세 가지 버전의 이미지를 만들었습니다.

• A: 50색: 15kB
• B: 50색 + 디더링: 23kB
• C: 100색: 22kB

B는 C만큼 멋져 보이지만 약간 더 컸기 때문에 더 많은 색상을 허용하는 것이 디더링보다 낫다고 생각했습니다(둘 다 파일 크기 증가).

몇 가지 반복적인 패턴으로 구성된 디더링이 필요하다고 생각합니다. 즉, Deflate 알고리즘에 "친숙해야" 합니다. B가 20kB만 갖도록 합니다(그래서 여전히 C만큼 훌륭하지만 더 작음).

ㅅㅂ. 나는 또한 pngquant가 더 나은 Deflate(UPNG.js보다 약 100배 더 많은 시간이 소요됨: 예: 30ms 대 3000ms)를 수행하므로 내가 했던 것과 동일한 디더링을 사용하면서 B가 20kB만 갖도록 할 수 있다고 생각합니다.

알 겠어요.
이 경우를 처리할 수 있는 디더링 알고리즘을 모르겠습니다.

pngquant는 mse 오류를 계산하고 최소 및 최대 품질 설정을 가지며 크기가 너무 크거나 품질이 크게 저하되는 경우 파일을 쓰지 않습니다.

이 스레드가 유용하다고 생각할 수도 있습니다.
https://encode.ru/threads/1757-Lossy-DEFLATE-lossy-PNG

그리고 이 프로젝트는 특히
https://github.com/foobaz/lossypng

예, pngquant는 평균 제곱 오차를 계산하고 오류가 높은 영역에만 디더링을 적용합니다. 이렇게 하면 디더링이 필요하지 않은 영역에 추가 노이즈가 발생하지 않습니다.

pngquant는 또한 에지 감지(Prewitt 알고리즘과 유사)를 수행하고 에지에서 디더링을 비활성화합니다. 이것은 앤티 앨리어싱이 모피처럼 보이는 것을 방지합니다.

pngquant에서 시간의 90%는 K-평균의 추가 실행에 사용됩니다. --speed 10 하는 경우 전체 재압축(i7 2.3Ghz에서)은 ~80ms 디더링, 50ms 비디더링이 걸립니다.

(BTW, TinyPNG에는 자체 알고리즘이 없습니다. 그냥 pngquant용 GUI일 뿐입니다.)