谷歌 PageSpeed 和ImageMagick JPG 压缩

发布于 2024-09-26 16:12:34 字数 1563 浏览 0 评论 0原文

给定用户上传的图像,我需要创建它的各种缩略图以在网站上显示。我正在使用 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/>');
}

Given a user uploaded image, I need to create various thumbnails of it for display on a website. I'm using ImageMagick and trying to make Google PageSpeed happy. Unfortunately, no matter what quality value I specify in the convert command, PageSpeed is still able to suggest compressing the image even further.

Note that http://www.imagemagick.org/script/command-line-options.php?ImageMagick=2khj9jcl1gd12mmiu4lbo9p365#quality mentions:

For the JPEG ... image formats,
quality is 1 [provides the] lowest
image quality and highest compression
....

I actually even tested compressing the image using 1 (it produced an unusable image, though) and PageSpeed still suggests that I can still optimize such image by "losslessly compressing" the image. I don't know how to compress an image any more using ImageMagick. Any suggestions?

Here's a quick way to test what I am talking about:

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/>');
}

如果你对这篇内容有疑问,欢迎到本站社区发帖提问 参与讨论,获取更多帮助,或者扫码二维码加入 Web 技术交流群。

扫码二维码加入Web技术交流群

发布评论

需要 登录 才能够评论, 你可以免费 注册 一个本站的账号。

评论(3

温柔少女心 2024-10-03 16:12:34
  • JPEG 可能包含可以删除的注释、缩略图或元数据。
  • 有时可以对 JPEG 文件进行更多压缩,同时保持相同的质量。如果生成图像的程序没有使用最佳算法或参数来压缩图像,则这是可能的。通过重新压缩相同的数据,优化器可以减小图像大小。这是通过使用特定霍夫曼表进行压缩来实现的。

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

  • The JPEG may contain comments, thumbnails or metadata, which can be removed.
  • Sometimes it is possible to compress JPEG files more, while keeping the same quality. This is possible if the program which generated the image did not use the optimal algorithm or parameters to compress the image. By recompressing the same data, an optimizer may reduce the image size. This works by using specific Huffman tables for compression.

You may run jpegtran or jpegoptim on your created file, to reduce it further in size.

若无相欠,怎会相见 2024-10-03 16:12:34

为了进一步减小图像大小,您应该删除所有元数据。 ImageMagick 可以通过在命令行中添加 -strip 来实现此目的。

您是否还考虑过将缩略图作为内联 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

To minimize the image sizes even more, you should remove all meta data. ImageMagick can do this by adding a -strip to the commandline.

Have you also considered to put your thumbnail images as inline-d base64 encoded data into your HTML?

This can make your web page load much faster (even though the size gets a bit larger), because it saves the browser from running multiple requests for all the image files (the images) which are referenced in the HTML code.

Your HTML code for such an image would look like this:

 <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 />

And you would create the base64 encoded image data like this:

base64  -i image.jpg  -o image.b64
茶色山野 2024-10-03 16:12:34

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

尽管提供了性能提升,但目前仅 chrome 和 opera 支持它 (http://caniuse.com/webp

Google performs those calculations based on it's WebP image format (https://developers.google.com/speed/webp/).

Despite giving performance gains though, it is currently supported only by chrome and opera (http://caniuse.com/webp)

~没有更多了~
我们使用 Cookies 和其他技术来定制您的体验包括您的登录状态等。通过阅读我们的 隐私政策 了解更多相关信息。 单击 接受 或继续使用网站,即表示您同意使用 Cookies 和您的相关数据。
原文