【问题标题】:Google PageSpeed & ImageMagick JPG compressionGoogle PageSpeed 和 ImageMagick JPG 压缩
【发布时间】:2010-10-10 10:20:02
【问题描述】:

鉴于用户上传的图像,我需要创建它的各种缩略图以显示在网站上。我正在使用 ImageMagick 并试图让 Google PageSpeed 满意。不幸的是,无论我在convert 命令中指定什么quality 值,PageSpeed 仍然能够建议进一步压缩图像。

注意http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#quality 提到:

对于 JPEG ... 图像格式, 质量为 1 [提供] 最低 图像质量和最高压缩率 ....

实际上,我什至测试了使用 1 压缩图像(尽管它产生了无法使用的图像),PageSpeed 仍然建议我仍然可以通过“无损压缩”图像来优化此类图像。我不知道如何使用 ImageMagick 压缩图像了。 有什么建议吗?

这是测试我所说的内容的快速方法:

assert_options(ASSERT_BAIL, TRUE);

// TODO: specify valid image here
$input_filename = 'Dock.jpg';

assert(file_exists($input_filename));

$qualities = array('100', '75', '50', '25', '1');
$geometries = array('100x100', '250x250', '400x400');

foreach($qualities as $quality)
{
    echo("<h1>$quality</h1>");
    foreach ($geometries as $geometry)
    {
        $output_filename = "$geometry-$quality.jpg";

        $command = "convert -units PixelsPerInch -density 72x72 -quality $quality -resize $geometry $input_filename $output_filename";
        $output  = array();
        $return  = 0;
        exec($command, $output, $return);

        echo('<img src="' . $output_filename . '" />');

        assert(file_exists($output_filename));
        assert($output === array());
        assert($return === 0);
    }

    echo ('<br/>');
}

【问题讨论】:

  • 我认为它希望您尝试像 PNG 这样的无损格式。有时这可以为您提供更好的压缩,特别是对于小图像;但这实际上取决于您用户上传的图片类型。
  • PageSpeed 指的是 JPG(因为它实际上提供了可以保存的 JPG)。用户正在上传照片。
  • 嗯,奇怪,它提供的 JPEG 比你自动创建的小吗?
  • @Tim,是的。亲自试用 PageSpeed for Firebug 以了解 OP 的含义。我刚刚在这里问了一个相关问题:stackoverflow.com/questions/5451597/…
  • 根据我的经验,Google Page Speed 对 JPEG 的唯一优化是删除不必要的元数据。虽然这确实是不必要的,但在大多数图像中,这占相对较少的字节 - 不足以在大图像中产生影响,如果你使用的是小图像 - 你应该是精灵。一般来说,Page Speed 的 JPEG 建议和优化都是针对错误的问题。

标签: image-processing compression imagemagick jpeg pagespeed


【解决方案1】:
  • JPEG 可能包含 cmets、缩略图或元数据,它们可以被删除。
  • 有时可以更多地压缩 JPEG 文件,同时保持相同的质量。如果生成图像的程序没有使用最佳算法或参数来压缩图像,这是可能的。通过重新压缩相同的数据,优化器可以减小图像大小。这可以通过使用 specific Huffman tables 进行压缩来实现。

您可以在创建的文件上运行jpegtranjpegoptim,以进一步减小它的大小。

【讨论】:

  • 我查看了 ImageMagick 生成的图像的属性。它似乎保留了元数据。所以你知道我如何使用 ImageMagick 删除它吗?此外,ImageMagick 似乎使用 Huffman 表。请参阅imagemagick.org/script/formats.php 上有关 JPEG 的条目。这是否让我不再需要探索 jpegtran 或 jpegoptim?
  • mogrify -strip input.jpg 似乎有效。不过,不确定这是否是最好的方法。
  • 每个 JPEG 都使用 Huffman 表。 Imagemagick 可能总是使用相同的 Huffman 表,而 jpegoptim 试图找到最好的自定义 Huffman 表。
  • mogrify -strip input.jpg 似乎满足了 PageSpeed。谢谢!
  • @Sjoerd:根据 ImageMagick 的文档 (imagemagick.org/script/formats.php),“默认情况下,我们为 JPEG 格式计算最佳霍夫曼编码表”。
【解决方案2】:

要进一步缩小图像大小,您应该删除所有元数据。 ImageMagick 可以通过在命令行中添加-strip 来做到这一点。

您是否也考虑将缩略图图像作为内联-d base64 编码数据放入您的 HTML 中?

这可以使您的网页加载速度大大更快(即使尺寸变大了一点),因为它可以避免浏览器对所有图像运行多个请求HTML 代码中引用的文件(图像)。

此类图像的 HTML 代码如下所示:

 <IMG SRC="data:image/png;base64,
         iVBORw0KGgoAAAANSUhEUgAAAM4AAABJAQMAAABPZIvnAAAABGdBTUEAALGPC/xh
         BQAAAAFzUkdCAK7OHOkAAAAgY0hSTQAAeiYAAICEAAD6AAAAgOgAAHUwAADqYAAA
         OpgAABdwnLpRPAAAAAZQTFRFAAAA/wAAG/+NIgAAAAF0Uk5TAEDm2GYAAAABYktH
         RACIBR1IAAAACXBIWXMAAABIAAAASABGyWs+AAAB6ElEQVQ4y+3UQY7bIBQG4IeQ
         yqYaLhANV+iyi9FwpS69iGyiLuZYpepF6A1YskC8/uCA7SgZtVI3lcoiivkIxu/9
         MdH/8U+N6el2pk0oFyibWyr1Q3+PlO2NqJV+/BnRPMjcJ9zrfJ/U+zQ9oAvo+QGF
         d+npPqFQn++TXElkrEpEJhAtlTBR6dNHUuzIMhFnEhxAmJDkKxlmt7ATXDDJYcaE
         r4Txqtkl42VYSH+t9KrD9b5nxZeog/LWGVHprGInGWVQUTvjDWXca5KdsowqyGSc
         DrZRlGlQUl4kQwpUjiSS9gI9VdECZhHFQ2I+UE2CHJQfkNxTNKCl0RkURqlLowJK
         1h1p3sjc0CJD39D4BIqD7JvvpH/GAxl2/YSq9mtHSHknga7OKNOHKyEdaFC2Dh1w
         9VSJemBeGuHgMuh24EynK03YM1Lr83OjUle38aVSfTblT424rl4LhdglsUag5RB5
         uBJSJBIiELSzaAeIN0pUlEeZEMeClC4cBuH6mxOlgPjC3uLproUCWfy58WPN/MZR
         86ghc888yNdD0Tj8eAucasl2I5LqX19I7EmEjaYjSb9R/G1SYfQA7ZBuT5H6WwDt
         UAfK1BOJmh/eZnKLeKvZ/vA8qonCpj1h6djfbqvW620Tva36++MXUkNDlFREMVkA
         AAAldEVYdGRhdGU6Y3JlYXRlADIwMTItMDgtMjJUMDg6Mzc6NDUrMDI6MDBTUnmt
         AAAAJXRFWHRkYXRlOm1vZGlmeQAyMDEyLTA4LTIyVDA4OjM3OjQ1KzAyOjAwIg/B
         EQAAAA50RVh0bGFiZWwAImdvb2dsZSJdcbX4AAAAAElFTkSuQmCC"
  ALT="google" WIDTH=214  HEIGHT=57  VSPACE=5 HSPACE=5 BORDER=0 />

你会像这样创建 base64 编码的图像数据:

base64  -i image.jpg  -o image.b64

【讨论】:

  • 我不确定这是不是真的。引用外部文件意味着浏览器可以使用多个处理器、内核和网络链接来请求图像(或任何其他资源)。 HTTP/1.1 对新请求有一些开销,这可能会超过好处,但 HTTP/2.0 或 SPDY(在许多现代浏览器中可用)能够使用单个连接一次发出多个请求。
【解决方案3】:

Google 根据其 WebP 图像格式 (https://developers.google.com/speed/webp/) 执行这些计算。

尽管提高了性能,但目前只有 chrome 和 opera (http://caniuse.com/webp) 支持它

【讨论】:

    猜你喜欢
    • 1970-01-01
    • 2013-02-08
    • 1970-01-01
    • 1970-01-01
    • 1970-01-01
    • 2012-10-12
    • 2011-11-07
    • 2016-04-14
    • 2014-08-03
    相关资源
    最近更新 更多