为 google pagespeed 批量优化 PNG

Question

发件人：http://gtmetrix.com/reports/hosting.site.dev.nexwrx.com/OUsrZOCY _include/img/menu-mobile.png 可以节省 1.0KiB（减少 82%）

我尝试过的东西

pngcrush _include/img/menu-mobile.png menu-mobile.png

最佳 pngcrush 方法 = 6 (ws 12 fm 5 zl 9 zs 0) = 215 对于菜单-mobile.pn （1.38% 关键块减少）（文件大小减少 0.24%）

当我尝试 optipng -o7 _include/img/menu-mobile.png _include/img/menu-mobile.png 已经优化

pngquant --quality=75-80 _include/img/logo

pngpngquant: mempool.c:40: mempool_create: 断言`!((uintptr_t)(*mptr + (*mptr)->used) & 15UL)' 失败。中止

pngquant 似乎在所有 (ubuntu 14.04) 版本 2.01

上都失败了

知道如何才能像 .png 上的 google 状态那样减少 82% 吗？

Answer 1

Google 删除了 iTXt 和 tEXt 块，节省了大约 1050 个字节，并将像素从 32-bits/pixel RGBA 减少到 4-bits/pixel 索引，节省了更多字节:

$ pngcheck -v menu-mobile.png
File: menu-mobile.png (1265 bytes)
  chunk IHDR at offset 0x0000c, length 13
    16 x 32 image, 32-bit RGB+alpha, non-interlaced
  chunk iTXt at offset 0x00025, length 1001, keyword: XML:com.adobe.xmp
    uncompressed, no language tag
    no translated keyword, 980 bytes of UTF-8 text
  chunk tEXt at offset 0x0041a, length 25, keyword: Software
  chunk IDAT at offset 0x0043f, length 158
    zlib: deflated, 4K window, maximum compression
  chunk IEND at offset 0x004e9, length 0
No errors detected in menu-mobile.png (5 chunks, 38.2% compression).

$ pngcheck -v menu-mobile-opt.png
File: menu-mobile_opt.png (216 bytes)
  chunk IHDR at offset 0x0000c, length 13
    16 x 32 image, 4-bit palette, non-interlaced
  chunk PLTE at offset 0x00025, length 36: 12 palette entries
  chunk tRNS at offset 0x00055, length 11: 11 transparency entries
  chunk IDAT at offset 0x0006c, length 88
    zlib: deflated, 512-byte window, default compression
  chunk IEND at offset 0x000d0, length 0
No errors detected in menu-mobile_opt.png (5 chunks, 15.6% compression).

Pngcrush 可以通过将像素减少到 16-bits/pixel Gray-alpha:

来做得更好一点

$ pngcrush -s -reduce -rem text menu-mobile.png menu-mobile-pc.png
$ pngcheck -v menu-mobile-pc.png
File: menu-mobile-pc.png (175 bytes)
  chunk IHDR at offset 0x0000c, length 13
    16 x 32 image, 16-bit grayscale+alpha, non-interlaced
  chunk IDAT at offset 0x00025, length 118
    zlib: deflated, 2K window, maximum compression
  chunk IEND at offset 0x000a7, length 0
No errors detected in menu-mobile-pc.png (3 chunks, 82.9% compression).

在这种情况下，包含压缩像素数据的 IDAT 块比 google 的结果大 30 个字节，但由于 Gray-alpha 颜色类型不需要PLTE（36 字节数据加上 12 字节块开销）和 tRNS（11 字节数据 + 12 字节开销）块。对于尺寸较大的图像，这种权衡可能会有所不同。

为 google pagespeed 批量优化 PNG

Batch Optimize PNG for google pagespeed

bash

png

pagespeed