Google PageSpeed和ImageMagick的JPG压缩

14
给定一个用户上传的图像,我需要创建各种缩略图以在网站上显示。 我正在使用ImageMagick并尝试使Google PageSpeed满意。 不幸的是,无论我在转换命令中指定什么质量值,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这样的无损格式。有时,这可以为您提供更好的压缩效果,特别是对于小图像;但这确实取决于您的用户上传的图像类型。 - Tim Fountain
1
PageSpeed 是指 JPG(它实际上提供了可保存的 JPG)。用户正在上传照片。 - StackOverflowNewbie
嗯,奇怪啊,它提供的JPEG文件比你自动创建的还要小? - Tim Fountain
@Tim,是的,确实如此。试试使用Firebug的PageSpeed来看看OP的意思。我在这里提出了一个相关的问题:https://dev59.com/-m035IYBdhLWcg3wYe8F - Drew Noakes
根据我的经验,Google Page Speed 对JPEG图像进行的唯一优化是删除不必要的元数据。虽然这是不必要的,但在大多数图像中,这只占用相对较少的字节 - 不足以在大型图像中产生影响,如果您正在使用小型图像,则应该使用精灵图。通常,Page Speed 的JPEG建议和优化关注的是错误的问题。 - Chris Moschini
3个回答

9
  • JPEG文件中可能包含注释、缩略图或元数据,这些可以被删除。
  • 有时候可以在保持相同质量的情况下压缩JPEG文件更多。如果生成图像的程序没有使用最优算法或参数来压缩图像,则可以实现这一点。通过重新压缩相同的数据,优化器可以减小图像的大小。这是通过使用特定的哈夫曼表进行压缩实现的。

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


我查看了ImageMagick生成的图像属性。它似乎保留了元数据。那么,你知道我如何使用ImageMagick删除这些元数据吗?此外,似乎ImageMagick使用霍夫曼表。请参阅http://www.imagemagick.org/script/formats.php中有关JPEG的条目。这是否使我无需探索jpegtran或jpegoptim? - StackOverflowNewbie
mogrify -strip input.jpg 似乎有效。不确定这是否是最佳方法。 - StackOverflowNewbie
3
每个 JPEG 文件都使用霍夫曼表。ImageMagick 可能总是使用相同的霍夫曼表,而 jpegoptim 则尝试寻找最佳的自定义霍夫曼表。 - Sjoerd
mogrify -strip input.jpg 似乎已经满足了 PageSpeed 的要求。谢谢! - StackOverflowNewbie
1
根据ImageMagick的文档(http://www.imagemagick.org/script/formats.php),JPEG格式默认情况下会计算最佳的哈夫曼编码表。@Sjoerd - Joe Lencioni

4
为了进一步减小图像的大小,你应该删除所有元数据。ImageMagick可以通过在命令行中添加“-strip”来实现这一点。
你是否考虑将缩略图映像作为内联-基于64位编码数据放入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(许多现代浏览器都支持)能够使用单个连接同时进行多个请求。 - JP.

2

网页内容由stack overflow 提供, 点击上面的
可以查看英文原文,
原文链接