Upng.js: Usar difuminado

Creado en 27 mar. 2018  ·  5Comentarios  ·  Fuente: photopea/UPNG.js

Es importante para imágenes coloridas.

Imagen de origen [174285 B]
firefox-512

Después de subir, interfaz web [69927 B]
firefox-512 upng

El resultado de pngquant se ve mejor. [69932 B]
firefox-512 pngquant

Comentario más útil

Sí, pngquant calcula el error cuadrático medio y aplica difuminado solo en áreas con alto error. De esta manera, las áreas que no necesitan difuminado no reciben el ruido adicional.

pngquant también realiza detección de bordes (similar al algoritmo de Prewitt) y deshabilita el difuminado en los bordes. Esto evita que el suavizado parezca piel.

En pngquant, el 90% del tiempo se dedica a ejecuciones adicionales de K-medias. Si usa --speed 10 la recompresión completa (en i7 2.3Ghz) toma ~ 80ms difuminado, 50ms sin atenuar.

(Por cierto, TinyPNG no tiene su propio algoritmo. Es solo una GUI para pngquant).

Todos 5 comentarios

Implementé el dithering de Floyd-Steinberg en el pasado, pero no valió la pena.

Creo que necesitamos un tramado compatible con la compresión. ¿Conoces a alguien que pueda ayudarnos?

pngquant utiliza Floyd-Steinberg modificado para un mejor manejo del color.

Creo que el dithering siempre aumentará debido a su 'naturaleza aleatoria'.
El único propósito de esta función: complacer nuestros ojos.
El tramado se puede ocultar debajo de la bandera, al igual que en el Sal. Los usuarios decidirán.

Creo que necesitamos un tramado compatible con la compresión. ¿Conoces a alguien que pueda ayudarnos?

Creo que podemos preguntarle a @kornelski.

Quiero decir, hice tres versiones de la imagen:

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

B se veía tan bien como C, pero era un poco más grande, así que pensé que permitir más colores es mejor que difuminar (ambos aumentan el tamaño del archivo).

Creo que necesitamos dithering, que consiste en algunos patrones repetitivos, es decir, debería ser "amigable" para el algoritmo Deflate: hacer que B tenga solo 20 kB (por lo que sigue siendo tan bueno como C, pero más pequeño).

POR CIERTO. También creo que pngquant realiza un mejor desinflado (que también toma alrededor de 100 veces más tiempo que UPNG.js: por ejemplo, 30 ms frente a 3000 ms), por lo que puede hacer que B tenga solo 20 kB, mientras usa el mismo tramado que yo.

Oh ya veo.
No conozco el algoritmo de difuminado, que pueda manejar este caso.

pngquant calcula el error mse, tiene configuraciones de calidad mínima y máxima y no escribe archivos si su tamaño es demasiado grande o la calidad se degrada drásticamente.

Tal vez encuentres útil este hilo
https://encode.ru/threads/1757-Lossy-DEFLATE-lossy-PNG

Y este proyecto en particular
https://github.com/foobaz/lossypng

Sí, pngquant calcula el error cuadrático medio y aplica difuminado solo en áreas con alto error. De esta manera, las áreas que no necesitan difuminado no reciben el ruido adicional.

pngquant también realiza detección de bordes (similar al algoritmo de Prewitt) y deshabilita el difuminado en los bordes. Esto evita que el suavizado parezca piel.

En pngquant, el 90% del tiempo se dedica a ejecuciones adicionales de K-medias. Si usa --speed 10 la recompresión completa (en i7 2.3Ghz) toma ~ 80ms difuminado, 50ms sin atenuar.

(Por cierto, TinyPNG no tiene su propio algoritmo. Es solo una GUI para pngquant).

¿Fue útil esta página
0 / 5 - 0 calificaciones

Temas relacionados

mn4367 picture mn4367  ·  16Comentarios

HRK44 picture HRK44  ·  9Comentarios

MartinMuzatko picture MartinMuzatko  ·  6Comentarios

exortech picture exortech  ·  3Comentarios

AaronAcerboni picture AaronAcerboni  ·  3Comentarios