我在 Photoshop 中为我的网站创建了一个设计,并将所有图像导出为 24 位 PNG 图像。后来,在网站上运行PageSpeed测试表明,通过无损压缩,图像可以进一步缩小 50%。怎么会这样?Photoshop 不会尽可能地压缩图像吗?Google PageSpeed 内部使用什么图像压缩程序,我可能想尝试一下。
7 回答
看看pngcrush,它是一个命令行工具,可让您使用多种方法优化 PNG 文件。如果您更喜欢 GUI,ImageOptim for Mac 嵌入了 pngcrush,但可以做得更多。
您可以使用TinyPng服务将您的 png 压缩到 60%。图像质量的变化对于人眼来说是不明显的。服务有一个网络界面、WP 插件和 Photoshop 插件。
实际上,压缩 PNG 比压缩纯文本更复杂。有许多不同的因素决定了图像的最终大小。
例如,您说您使用 24 位 PNG。如果您的图像只有 256 种颜色,则最好使用 8 位 PNG(在保存之前转换为索引颜色)。
然后,PNG 可以包含元数据(例如谁和哪个程序创建了它们)。那是可以剥离的。等等。
如果您想真正最小化 PNG 文件大小,请查看optipng的手册以获得关于转动哪些轮子的基本概念。
我的猜测是,Google Pagespeed 使用的实际二进制文件是无关紧要的。它宁愿检查PNG的一些属性来决定是否可以进一步缩小PNG(OptiPNG甚至链接在那里)。
编辑:前几天我发现了一个关于各种 PNG 类型的有趣话题:http: //calendar.perfplanet.com/2010/png-that-works/
我使用这些工具对 PNG 图像进行后处理:
Google PageSpeed 可能在幕后使用上述工具之一(或类似的开源工具)。这些工具使用各种技术来减小文件大小,例如:
颜色缩减:如果真彩色 PNG 图像使用 256 色或更少,则通过将其转换为索引图像来减小图像大小。
删除元数据:PNG 图像可以包含浏览器经常忽略的元数据(例如 Photoshop 将 Gamma 信息和软件名称存储在 PNG 图像中)。删除此数据可以节省几个字节或千字节。
预压缩:PNG 数据分两个阶段进行压缩。第一阶段称为过滤。它涉及将数据无损转换为更可压缩的形式;一些软件(例如旧版本的 Photoshop)对此很不满意。这些工具重新分析数据并使用启发式或蛮力来确定产生最可压缩输出的过滤器。
DEFLATE:过滤后的数据使用DEFLATE进行压缩。该算法本身允许各种级别的压缩(例如,快速压缩与高压缩)。
重新压缩(上面的第 3 和第 4 项)可以将文件大小减少 5-50%,具体取决于原始压缩的糟糕程度。
我编写了一个小 bash 脚本,它在当前目录及其子目录中查找所有 png 图像,然后使用等于 CPU 逻辑核心数的并行进程数来优化它们。
cpus=$( ls -d /sys/devices/system/cpu/cpu[[:digit:]]* | wc -w ) # Linux
# cpus=$(sysctl -n hw.ncpu) # OS X
find . -name "*.png" | xargs -n 1 -P $cpus -I % \
sh -c 'pngcrush -ow -rem allb -brute -reduce "%"; optipng -o7 "%";'
好吧,您可能想在 Photoshop 中考虑“保存为网络”,因为在最新的几个版本中,它们已经大大改进了压缩算法。
顺便说一句,你真的不必在 PageSpeed 中实现所有的东西。我建议将 css sprites 用于具有或多或少相同颜色的背景图像。如果您的网站背景是白色的,您甚至可以使用 jpg 比较进一步缩小精灵的大小。
祝你好运