Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

8-bit PNG #62

Open
Artoria2e5 opened this issue Nov 17, 2016 · 2 comments
Open

8-bit PNG #62

Artoria2e5 opened this issue Nov 17, 2016 · 2 comments

Comments

@Artoria2e5
Copy link
Collaborator

Artoria2e5 commented Nov 17, 2016

目前繪圖所用顏色基本只有一種(加上 Anti-Alias 得到的 Alpha),應該可以考慮將 PNG 轉為 256 索引顏色(8-bit)模式(這麼多灰階很夠用了)。測試將楷體 biangpngquant 轉為 256 索引色(8-bit),檔案大小由 6403 位元組減少至 4967 位元組(77.6% 原大小);轉為 64 索引色(4-bit),檔案大小為 3516 位元組(54.9%)。

要實作的話,StackOverflow 上已有前人經驗

其中 ImageTypeSpecifier.createIndexed 基本上是應該傳入幾個這樣的陣列:

byte[] 紅表 = new byte[256],
       綠表 = new byte[256],
       藍表 = new byte[256],
       透表 = new byte[256];

// 現時都是使用黑色
byte 紅 = 綠 = 藍 = 0x00;

// 只須考慮透明,因此紅綠藍三表各值同色
Array.fill(紅表, 紅);
Array.fill(綠表, 綠);
Array.fill(藍表, 藍); 

// 256 階色,區別全在透明
// 注意若要製作均勻 64 階,應使用 (byte) (i * (255.0 / 63.0) + 0.5)。
for (int i = 0; i < 256; i++)
    透表[i] = (byte) i;

return ImageTypeSpecifier.createIndexed(紅表, 綠表, 藍表, 透表, 8, DataBuffer.TYPE_BYTE);

之後 PNGMetadata 感覺是直接用之前建立的 ImageTypeSpecifierinitialize 一下就好,總之先寫下來有空去做吧。


pngquant 處理的結果如下所示。如果看得出區別的話,應該都是在字邊緣處。

64
biang-fs4
256
biang-fs8
原始
biang

@sih4sing5hong5
Copy link
Owner

這是為了省頻寬嗎?用http header的gz會不會比較單純?

2016/11/18 上午12:30,"Mingye Wang" notifications@github.com寫道:

目前繪圖所用顏色基本只有一種(加上 Anti-Alias 得到的 Alpha),應該可以考慮將 PNG 轉為 256
索引顏色(8-bit)模式(這麼多灰階夠用了)。測試將楷體 biang
http://xn--p8s937b.xn--v0qr21b.xn--kpry57d/%E2%BF%BA%E8%BE%B6%E2%BF%B1%E2%BF%B1%E7%A9%B4%E2%BF%B0%E6%9C%88%E2%BF%B0%E2%BF%B1%EF%95%9F%E2%BF%B2%E9%95%B7%E9%A6%AC%E9%95%B7%E5%88%82%E5%BF%83.png?%E5%AD%97%E9%AB%94=%E6%A5%B7%E9%AB%94
以 pngquant https://pngquant.org/ 轉為 256 索引色(8-bit),檔案大小由 6403 位元組減少至
4967 位元組(77.6% 原大小);轉為 64 索引色(4-bit),檔案大小為 3516 位元組(54.9%)。

要實作的話,StackOverflow 上已有前人經驗 http://stackoverflow.com/a/13310186/3770260。

其中 ImageTypeSpecifier.createIndexed 基本上是應該傳入幾個這樣的陣列:

byte[] 紅表 = new byte[256],
綠表 = new byte[256],
藍表 = new byte[256],
透表 = new byte[256];
// 現時都是使用黑色byte 紅 = 綠 = 藍 = 0x00;
// 只須考慮透明,因此紅綠藍三表各值同色Array.fill(紅表, 紅);Array.fill(綠表, 綠);Array.fill(藍表, 藍);
// 256 階色,區別全在透明// 注意若要製作均勻 64 階,應使用 (byte) (i * (255.0 / 63.0) + 0.5)。for (int i = 0; i < 256; i++)
透表[i] = (byte) i;
return ImageTypeSpecifier.createIndexed(紅表, 綠表, 藍表, 透表, 8, DataBuffer.TYPE_BYTE);

之後 PNGMetadata 感覺是直接用之前建立的 ImageTypeSpecifier 去 initialize

一下就好,總之先寫下來有空去做吧。

pngquant 處理的結果如下所示。

64
[image: biang-fs4]
https://cloud.githubusercontent.com/assets/6459309/20397776/fd5594c0-acb8-11e6-952f-2d7f6a414654.png
256
[image: biang-fs8]
https://cloud.githubusercontent.com/assets/6459309/20397778/fd56a496-acb8-11e6-831a-59b236ed99e8.png
原始
[image: biang]
https://cloud.githubusercontent.com/assets/6459309/20397777/fd567e44-acb8-11e6-8f73-927244828c67.png


You are receiving this because you are subscribed to this thread.
Reply to this email directly, view it on GitHub
#62, or mute
the thread
https://github.com/notifications/unsubscribe-auth/AFuAC3x6CyAQ4wkb4M2JIolcX7ePp9S6ks5q_IEpgaJpZM4K1hJM
.

@Artoria2e5
Copy link
Collaborator Author

Artoria2e5 commented Nov 18, 2016

java 写 PNG 似乎已经 best deflate 了,gz 肯定动不了多少。(本来碰 deflate 之后的档案,gz 肯定也不行啊…)

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment
Labels
None yet
Projects
None yet
Development

No branches or pull requests

2 participants