Question

我在Photoshop中为我的网站创建了一个设计，并将所有图像导出为24位PNG图像。之后，在网站上运行PageSpeed测试表明，无损压缩可以将图像进一步缩小至50％。怎么会这样？ Photoshop不会尽可能地压缩图像吗？ Google PageSpeed在内部使用什么图像压缩程序，我可能想尝试一下。

Answer 1

看看pngcrush，它是一个命令行工具，可让您使用多种方法优化PNG文件。如果您更喜欢使用GUI，Mac的ImageOptim会嵌入pngcrush，但可以执行更多操作。

Answer 2

您可以使用TinyPng服务将您的png压缩高达60％。图像质量的变化对于人眼来说并不明显。 Service有一个Web界面，WP插件和Photoshop插件。

Answer 3

实际上，压缩PNG比例如纯文本压缩更复杂。有许多不同的因素决定了图像的最终尺寸。

例如，您说，您使用的是24位PNG。如果您的图像只有256种颜色，那么使用8位PNG（在保存之前转换为索引颜色）可能会更好。

然后，PNG可以包含元数据（比如谁和创建它们的程序）。这可以剥夺。等等。

如果您想真正最小化PNG文件大小，请查看optipng手册以了解要转动哪个轮子的基本知识。

我的猜测是，Google Pagespeed使用的实际二进制文件无关紧要。如果PNG 可以缩小更多（OptiPNG甚至是linked there），它宁可检查PNG的某些属性来决定。

修改：有一天，我发现了各种PNG类型的有趣主题：http://calendar.perfplanet.com/2010/png-that-works/

Answer 4

我使用这些工具对PNG图像进行后期处理：

Google PageSpeed可能会在幕后使用上述（或类似的开源）工具之一。这些工具使用各种技术来减小文件大小，例如：

色彩还原：如果真彩色PNG图像使用256色或更少，则可以通过将图像尺寸转换为索引图像来缩小图像尺寸。
删除元数据：PNG图像可以包含浏览器经常忽略的元数据（例如，Photoshop会在PNG图像中存储伽玛信息和软件名称）。删除此数据可以节省几个字节或千字节。
预压缩：PNG数据分两个阶段进行压缩。第一阶段称为过滤。它将无损转换数据转换为更可压缩的形式;和一些软件（例如旧版本的Photoshop）很糟糕。这些工具会重新分析数据并使用启发式或强力来确定产生最大可压缩输出的滤波器。
DEFLATE ：使用DEFLATE压缩过滤后的数据。该算法本身允许各种级别的压缩（例如快速与高压缩）。

重新压缩（上面的第3和第4项）可能会将文件大小减少5-50％，具体取决于原始压缩的差异。

Answer 5

我正在使用OptiPNG和pngcrush实用程序。

我写了一个小的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 "%";'

Answer 6

你可能想在photoshop中考虑“Save for web”，因为在最新的几个版本中他们已经大大改进了压缩算法。

顺便说一下，你真的没有必要在PageSpeed中实现所有的东西。我建议使用css sprites来获得或多或少相同颜色的背景图像。如果您的网站背景为白色，您甚至可以使用jpg比较进一步缩小精灵的大小。

祝你好运

Answer 7

我从文档中读到：

PNG - 必须为8位或更低（没有24位PNG通过）

（在http://www.webpagetest.org/上，从PageSpeed链接）

PNG优化 - 可以进一步优化PNG

7 个答案: