138

当您在网站上为 Firebug/Firefox 运行 Google 的 PageSpeed 插件时，它会建议可以无损压缩图像的情况，并提供下载此较小图像的链接。

例如：

这适用于 JPG 和 PNG 文件类型（我没有测试过 GIF 或其他文件类型。）

还要注意 Flickr 缩略图（所有这些图像都是 75x75 像素。）它们是一些相当大的节省。如果这真的很棒，为什么雅虎不将这个服务器端应用到他们的整个图书馆并减少他们的存储和带宽负载呢？

甚至 Stackoverflow.com 也代表着一些非常小的节省：

我已经看到 PageSpeed 建议在我使用 Photoshop 的“保存为 Web”功能创建的 PNG 文件上节省相当可观的费用。

所以我的问题是，他们对图像进行了哪些更改以将它们减少这么多？我猜对不同的文件类型有不同的答案。这对JPG来说真的是无损的吗？他们怎么能打败 Photoshop？我应该对此有点怀疑吗？

4

9 回答 9

83

如果您真的对技术细节感兴趣，请查看源代码：

对于 PNG 文件，他们使用 OptiPNG 和一些试错法

// we use these four combinations because different images seem to benefit from
// different parameters and this combination of 4 seems to work best for a large
// set of PNGs from the web.
const PngCompressParams kPngCompressionParams[] = {
  PngCompressParams(PNG_ALL_FILTERS, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_ALL_FILTERS, Z_FILTERED),
  PngCompressParams(PNG_FILTER_NONE, Z_DEFAULT_STRATEGY),
  PngCompressParams(PNG_FILTER_NONE, Z_FILTERED)
};

当应用所有四种组合时，将保留最小的结果。就那么简单。

（注意：如果您通过optipng提供，命令行工具也会这样做）-o 2-o 7

对于 JPEG 文件，他们使用jpeglib和以下选项：

 JpegCompressionOptions()
     : progressive(false), retain_color_profile(false),
       retain_exif_data(false), lossy(false) {}

同样，WEBP 是使用libwebp压缩的，带有以下选项：

  WebpConfiguration()
      : lossless(true), quality(100), method(3), target_size(0),
        alpha_compression(0), alpha_filtering(1), alpha_quality(100) {}

还有用于无损转换为最小格式的image_converter.cc 。

于 2012-12-05T06:19:30.887 回答
46

我jpegoptim用来优化 JPG 文件和optipng优化 PNG 文件。

如果你在bash，无损优化目录中所有 JPG 的命令（递归）是：

find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim --strip-all {} \;

您可以添加-m[%]到jpegoptim有损压缩 JPG 图像，例如：

 find /path/to/jpgs/ -type f -name "*.jpg" -exec jpegoptim -m70 --strip-all {} \;

要优化目录中的所有 PNG：

find /path/to/pngs/ -type f -name "*.png" -exec optipng -o2 {} \;

-o2是默认优化级别，您可以将其从 更改o2为o7。请注意，更高的优化级别意味着更长的处理时间。

于 2013-11-16T15:37:38.250 回答
29

看看http://code.google.com/speed/page-speed/docs/payload.html#CompressImages描述了一些技术/工具。

于 2011-03-27T19:07:20.647 回答
15

这是一个用编码器的 CPU 时间换取压缩效率的问题。压缩是搜索更短的表示，如果你更努力地搜索，你会找到更短的。

还有一个问题是要充分利用图像格式功能，例如用 PNG8+a 代替 PNG24+a，在 JPEG 中优化 Huffman 表等。

在为网络保存图像时，Photoshop 并没有真正努力做到这一点，因此任何工具都能胜过它也就不足为奇了。

看

于 2011-12-15T01:16:18.873 回答
13

在 Windows 中复制 PageSpeed 的 JPG 压缩结果：

我能够使用 Windows 版本的 jpegtran 获得与 PageSpeed 完全相同的压缩结果，您可以在www.jpegclub.org/jpegtran获得。我使用 DOS 提示符运行可执行文件（使用 Start > CMD）。为了获得与 PageSpeed 压缩完全相同的文件大小（精确到字节），我指定了 Huffman 优化，如下所示：

jpegtran -optimize source_filename.jpg output_filename.jpg

有关压缩选项的更多帮助，请在命令提示符处键入：jpegtran

或者在 Firebug 的 PageSpeed 选项卡中使用自动生成的图像：

我能够按照 Pumbaa80 的建议访问 PageSpeed 的优化文件。希望此处的屏幕截图为 FireFox 环境提供了进一步的清晰度。（但我无法在 Chrome 中访问这些优化文件的本地版本。）

并使用 Adob​​e Bridge 和正则表达式清理凌乱的 PageSpeed 文件名：

虽然 FireFox 中的 PageSpeed 能够为我生成优化的图像文件，但它也将它们的名称更改为简单的名称，例如：

nice_picture.jpg

进入

nice_picture_fff5e6456e6338ee09457ead96ccb696.jpg

我发现这似乎是一个常见的抱怨。由于我不想手动重命名所有图片，因此我使用了 Adob​​e Bridge 的重命名工具和正则表达式。您可以使用其他接受正则表达式的重命名命令/工具，但我怀疑 Adob​​e Bridge 对于我们大多数处理 PageSpeed 问题的人来说很容易使用！

  1. 启动 Adob​​e Bridge
  2. 选择所有文件（使用控件 A）
  3. 选择工具 > 批量重命名（或 Control Shift R）
  4. 在预设字段中选择“字符串替换”。新文件名字段现在应该显示“字符串替换”，然后是“原始文件名”
  5. 启用名为“使用正则表达式”的复选框</li>

  6. 在“查找”字段中，输入正则表达式（它将选择从最右边的下划线分隔符开始的所有字符）：

    _(?!.*_)(.*)\.jpg$

  7. 在“替换为”字段中，输入：

    .jpg

  8. 或者，单击预览按钮查看建议的批量重命名结果，然后关闭

  9. 单击重命名按钮

请注意，处理后，Bridge 会取消选择未受影响的文件。如果要清理所有 .png 文件，则需要重新选择所有图像并修改上面的配置（使用“png”而不是“jpg”）。您还可以将上述配置保存为“清理 PageSpeed jpg 图像”等预设，以便日后快速清理文件名。

配置屏幕截图/故障排除

如果您遇到问题，可能是某些浏览器可能无法正确显示上面的 RegEx 表达式（怪我的转义字符），因此有关配置的屏幕截图（以及这些说明），请参阅：

如何使用 Adob​​e Bridge 的批量重命名工具清理文件名混乱的优化 PageSpeed 图像

于 2012-12-23T10:15:43.533 回答
10

在我看来，有效处理大多数图像格式的最佳选择是triage。它有效利用基于图像格式的optipng、pngcrush、advpng 和 jpegoptim ，并提供近乎完美的无损压缩。

如果使用命令行，实现非常简单。

sudo apt-get install trimage    
trimage -d images/*

瞧！:-)
此外，您会发现一个非常简单的界面也可以手动完成。

于 2014-02-27T00:36:49.597 回答
2

有一个非常方便的批处理脚本，它使用 OptiPNG 递归优化文件夹下的图像（来自此博客）：

FOR /F "tokens=*" %G IN ('dir /s /b *.png') DO optipng -nc -nb -o7 -full %G

一条线！

于 2015-07-08T19:08:23.503 回答
0

如果您正在寻找批处理，请记住如果您没有 Xserver 可用，则会出现 triage 抱怨。在这种情况下，只需编写一个 bash 或 php 脚本来执行类似的操作

<?php
    echo "Processing jpegs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.jpg' -exec jpegoptim --strip-all {} \;");
    echo "Processing pngs<br />";
    exec("find /home/example/public_html/images/ -type f -name '*.png' -exec optipng -o7 {} \;");
?>

更改选项以满足您的需求。

于 2014-10-27T02:26:28.197 回答
0

对于 Windows，有几个拖放界面便于访问。

https://sourceforge.net/projects/nikkhokkho/files/FileOptimizer/

对于 PNG 文件，我发现这个是为了享受，显然 3 个不同的工具包含在这个 GIU 中。只需拖放，它就会为您完成。

https://pnggauntlet.com/

不过，尝试压缩一个 1MB 的 png 文件需要时间——我很惊讶有多少 CPU 进入了这个压缩比较，这一定是这里发生的事情。似乎图像被压缩了 100 种方式，最好的一种获胜：D

关于 JPG 压缩，我觉得去除颜色配置文件和所有额外信息是有风险的 - 但是 - 如果每个人都这样做 - 它是商业标准，所以我自己做了：D

我今天在 WP 安装上的 5500 个文件上节省了 113MB，所以它绝对值得！

于 2016-10-12T15:10:35.623 回答