Upng.js: Π˜ΡΠΏΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚ΡŒ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³

Π‘ΠΎΠ·Π΄Π°Π½Π½Ρ‹ΠΉ Π½Π° 27 ΠΌΠ°Ρ€. 2018  Β·  5ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΈ  Β·  Π˜ΡΡ‚ΠΎΡ‡Π½ΠΈΠΊ: photopea/UPNG.js

Π­Ρ‚ΠΎ Π²Π°ΠΆΠ½ΠΎ для красочных ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠΉ.

Π˜ΡΡ…ΠΎΠ΄Π½ΠΎΠ΅ ΠΈΠ·ΠΎΠ±Ρ€Π°ΠΆΠ΅Π½ΠΈΠ΅ [174285 B]
firefox-512

ПослС ΠΏΠΎΠ΄ΠΊΠ»ΡŽΡ‡Π΅Π½ΠΈΡ Π²Π΅Π±-интСрфСйс [69927 B]
firefox-512 upng

Π Π΅Π·ΡƒΠ»ΡŒΡ‚Π°Ρ‚ pngquant выглядит Π»ΡƒΡ‡ΡˆΠ΅. [69932 B]
firefox-512 pngquant

Π‘Π°ΠΌΡ‹ΠΉ ΠΏΠΎΠ»Π΅Π·Π½Ρ‹ΠΉ ΠΊΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

Π”Π°, pngquant вычисляСт ΡΡ€Π΅Π΄Π½Π΅ΠΊΠ²Π°Π΄Ρ€Π°Ρ‚ΠΈΡ‡Π½ΡƒΡŽ ΠΎΡˆΠΈΠ±ΠΊΡƒ ΠΈ примСняСт Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³ Ρ‚ΠΎΠ»ΡŒΠΊΠΎ Π² областях с высокой ошибкой. Π’Π°ΠΊΠΈΠΌ ΠΎΠ±Ρ€Π°Π·ΠΎΠΌ, области, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹Π΅ Π½Π΅ Π½ΡƒΠΆΠ΄Π°ΡŽΡ‚ΡΡ Π² Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³Π΅, Π½Π΅ ΠΏΠΎΠ»ΡƒΡ‡Π°Ρ‚ лишнСго ΡˆΡƒΠΌΠ°.

pngquant Ρ‚Π°ΠΊΠΆΠ΅ ΠΎΠ±Π½Π°Ρ€ΡƒΠΆΠΈΠ²Π°Π΅Ρ‚ края (Π°Π½Π°Π»ΠΎΠ³ΠΈΡ‡Π½ΠΎ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡƒ Prewitt) ΠΈ ΠΎΡ‚ΠΊΠ»ΡŽΡ‡Π°Π΅Ρ‚ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³ ΠΏΠΎ краям. Π­Ρ‚ΠΎ ΠΏΡ€Π΅Π΄ΠΎΡ‚Π²Ρ€Π°Ρ‰Π°Π΅Ρ‚ появлСниС эффСкта сглаТивания, ΠΏΠΎΡ…ΠΎΠΆΠ΅Π³ΠΎ Π½Π° ΠΌΠ΅Ρ….

Π’ pngquant 90% Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ тратится Π½Π° Π΄ΠΎΠΏΠΎΠ»Π½ΠΈΡ‚Π΅Π»ΡŒΠ½Ρ‹Π΅ ΠΏΡ€ΠΎΠ³ΠΎΠ½Ρ‹ K-срСдних. Если Π²Ρ‹ ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚Π΅ --speed 10 ΠΏΠΎΠ»Π½ΠΎΠ΅ ΠΏΠΎΠ²Ρ‚ΠΎΡ€Π½ΠΎΠ΅ сТатиС (Π½Π° i7 2.3Ghz) Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ~ 80 мс с псСвдонимом ΠΈ 50 мс Π±Π΅Π· псСвдослучайного сигнала.

(ΠšΡΡ‚Π°Ρ‚ΠΈ, Ρƒ TinyPNG Π½Π΅Ρ‚ собствСнного Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ°. Π­Ρ‚ΠΎ просто графичСский интСрфСйс для pngquant).

ВсС 5 ΠšΠΎΠΌΠΌΠ΅Π½Ρ‚Π°Ρ€ΠΈΠΉ

РаньшС я Ρ€Π΅Π°Π»ΠΈΠ·ΠΎΠ²Π°Π» Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³ Π€Π»ΠΎΠΉΠ΄Π°-Π‘Ρ‚Π΅ΠΉΠ½Π±Π΅Ρ€Π³Π°, Π½ΠΎ ΠΎΠ½ΠΎ Ρ‚ΠΎΠ³ΠΎ Π½Π΅ стоило.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для сТатия. Π’Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ, ΠΊΡ‚ΠΎ ΠΌΠΎΠ³ Π±Ρ‹ Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ?

pngquant ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΠ΅Ρ‚ ΠΌΠΎΠ΄ΠΈΡ„ΠΈΠΊΠ°Ρ†ΠΈΡŽ Π€Π»ΠΎΠΉΠ΄Π°-Π‘Ρ‚Π΅ΠΉΠ½Π±Π΅Ρ€Π³Π° для Π»ΡƒΡ‡ΡˆΠ΅ΠΉ ΠΎΠ±Ρ€Π°Π±ΠΎΡ‚ΠΊΠΈ Ρ†Π²Π΅Ρ‚Π°.

Π― ΡΡ‡ΠΈΡ‚Π°ΡŽ, Ρ‡Ρ‚ΠΎ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³ всСгда ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°Π΅Ρ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π° ΠΈΠ·-Π·Π° Π΅Π³ΠΎ «случайности».
ЕдинствСнная Ρ†Π΅Π»ΡŒ этой Ρ„ΡƒΠ½ΠΊΡ†ΠΈΠΈ - Ρ€Π°Π΄ΠΎΠ²Π°Ρ‚ΡŒ Π³Π»Π°Π·.
Π”ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³ ΠΌΠΎΠΆΠ½ΠΎ ΡΠΊΡ€Ρ‹Ρ‚ΡŒ ΠΏΠΎΠ΄ Ρ„Π»Π°Π³ΠΎΠΌ, ΠΊΠ°ΠΊ Π² Ps. ΠŸΠΎΠ»ΡŒΠ·ΠΎΠ²Π°Ρ‚Π΅Π»ΠΈ Π±ΡƒΠ΄ΡƒΡ‚ Ρ€Π΅ΡˆΠ°Ρ‚ΡŒ.

Π― Π΄ΡƒΠΌΠ°ΡŽ, Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³, ΡƒΠ΄ΠΎΠ±Π½Ρ‹ΠΉ для сТатия. Π’Ρ‹ Π·Π½Π°Π΅Ρ‚Π΅ ΠΊΠΎΠ³ΠΎ-Π½ΠΈΠ±ΡƒΠ΄ΡŒ, ΠΊΡ‚ΠΎ ΠΌΠΎΠ³ Π±Ρ‹ Π½Π°ΠΌ ΠΏΠΎΠΌΠΎΡ‡ΡŒ?

Π”ΡƒΠΌΠ°ΡŽ, ΠΌΠΎΠΆΠ½ΠΎ ΡΠΏΡ€ΠΎΡΠΈΡ‚ΡŒ @kornelski.

Π’ΠΎ Π΅ΡΡ‚ΡŒ я сдСлал Ρ‚Ρ€ΠΈ вСрсии изобраТСния:

  • A: 50 Ρ†Π²Π΅Ρ‚ΠΎΠ²: 15 ΠΊΠ‘
  • B: 50 Ρ†Π²Π΅Ρ‚ΠΎΠ² + Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³: 23 ΠΊΠ‘
  • C: 100 Ρ†Π²Π΅Ρ‚ΠΎΠ²: 22 ΠΊΠ‘

B выглядСл Ρ‚Π°ΠΊ ΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΎ, ΠΊΠ°ΠΊ C, Π½ΠΎ Π±Ρ‹Π» Π½Π΅ΠΌΠ½ΠΎΠ³ΠΎ большС, поэтому я ΠΏΠΎΠ΄ΡƒΠΌΠ°Π», Ρ‡Ρ‚ΠΎ Ρ€Π°Π·Ρ€Π΅ΡˆΠ΅Π½ΠΈΠ΅ большСго количСства Ρ†Π²Π΅Ρ‚ΠΎΠ² Π»ΡƒΡ‡ΡˆΠ΅, Ρ‡Π΅ΠΌ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³ (ΠΎΠ±Π° ΡƒΠ²Π΅Π»ΠΈΡ‡ΠΈΠ²Π°ΡŽΡ‚ Ρ€Π°Π·ΠΌΠ΅Ρ€ Ρ„Π°ΠΉΠ»Π°).

Π― Π΄ΡƒΠΌΠ°ΡŽ, Π½Π°ΠΌ Π½ΡƒΠΆΠ΅Π½ Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ состоит ΠΈΠ· Π½Π΅ΡΠΊΠΎΠ»ΡŒΠΊΠΈΡ… ΠΏΠΎΠ²Ρ‚ΠΎΡ€ΡΡŽΡ‰ΠΈΡ…ΡΡ ΠΏΠ°Ρ‚Ρ‚Π΅Ρ€Π½ΠΎΠ², Ρ‚ΠΎ Π΅ΡΡ‚ΡŒ ΠΎΠ½ Π΄ΠΎΠ»ΠΆΠ΅Π½ Π±Ρ‹Ρ‚ΡŒ «друТСствСнным» ΠΊ Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΡƒ Deflate - сдСлайтС B Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 20 ΠΊΠ‘ (Ρ‚Π°ΠΊ Ρ‡Ρ‚ΠΎ ΠΎΠ½ всС Π΅Ρ‰Π΅ Ρ‚Π°ΠΊΠΎΠΉ ΠΆΠ΅ Ρ…ΠΎΡ€ΠΎΡˆΠΈΠΉ, ΠΊΠ°ΠΊ C, Π½ΠΎ мСньшС).

КБВАВИ. Π― Ρ‚Π°ΠΊΠΆΠ΅ Π΄ΡƒΠΌΠ°ΡŽ, Ρ‡Ρ‚ΠΎ pngquant Π»ΡƒΡ‡ΡˆΠ΅ выполняСт Deflate (ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ Ρ‚Π°ΠΊΠΆΠ΅ Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ΠΏΡ€ΠΈΠΌΠ΅Ρ€Π½ΠΎ Π² 100 Ρ€Π°Π· большС Π²Ρ€Π΅ΠΌΠ΅Π½ΠΈ, Ρ‡Π΅ΠΌ UPNG.js: Π½Π°ΠΏΡ€ΠΈΠΌΠ΅Ρ€, 30 мс ΠΏΡ€ΠΎΡ‚ΠΈΠ² 3000 мс), поэтому ΠΎΠ½ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠ΄Π΅Π»Π°Ρ‚ΡŒ B Ρ‚ΠΎΠ»ΡŒΠΊΠΎ 20 ΠΊΠ‘, ΠΈΡΠΏΠΎΠ»ΡŒΠ·ΡƒΡ Ρ‚ΠΎ ΠΆΠ΅ сглаТиваниС, Ρ‡Ρ‚ΠΎ ΠΈ я.

О, я Π²ΠΈΠΆΡƒ.
Π― Π½Π΅ знаю Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ° Π΄ΠΈΠ·Π΅Ρ€ΠΈΠ½Π³Π°, ΠΊΠΎΡ‚ΠΎΡ€Ρ‹ΠΉ ΠΌΠΎΠΆΠ΅Ρ‚ ΡΠΏΡ€Π°Π²ΠΈΡ‚ΡŒΡΡ с этим случаСм.

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) Π·Π°Π½ΠΈΠΌΠ°Π΅Ρ‚ ~ 80 мс с псСвдонимом ΠΈ 50 мс Π±Π΅Π· псСвдослучайного сигнала.

(ΠšΡΡ‚Π°Ρ‚ΠΈ, Ρƒ TinyPNG Π½Π΅Ρ‚ собствСнного Π°Π»Π³ΠΎΡ€ΠΈΡ‚ΠΌΠ°. Π­Ρ‚ΠΎ просто графичСский интСрфСйс для pngquant).

Π‘Ρ‹Π»Π° Π»ΠΈ эта страница ΠΏΠΎΠ»Π΅Π·Π½ΠΎΠΉ?
0 / 5 - 0 Ρ€Π΅ΠΉΡ‚ΠΈΠ½Π³ΠΈ