How can I compress images,so that google pagespeed test won't recommend to compress that image again?

Question

Whenever I run pagespeed test , it gives possible optimization of images in bytes & percentage like,
Compressing and resizing https://example.com/ …ts/AMP.jpg?6750368613317441460 could save 530KiB (91% reduction).

Compressing https://example.com/ …AMP.png?12287830358450898504 could save 4.4KiB (31% reduction).

I am using ImageMagick to compress the images.

I have tried convert AMP.gif_or_png -strip [-alpha Remove] OUTPUT.png for png images and

 convert INPUT.jpg -sampling-factor 4:2:0 -strip [-quality 85] [-interlace JPEG] [-colorspace RGB] OUTPUT.jpg

for jpg images, but none of the above commands gives me the same reduction as suggested by google pagespeed. So, let me know if i am missing any parameters or I have passed wrong values of parameters.

The pack of compressed contents are available on google pagespeed page but,I want to compress images using ImageMagick or any other sources .

Answer 1

If you are looking for a commercial tool, JPEGmini can be used. You can also use imagemin if you are going to use Grunt task runner. You can also use command lines tools that are provided with imagemin such as jpeg-tran and opti-png , and they are open source as well.

Answer 2

可能是没有可用的工具来动态地执行任务。您应该进行一些计算，或者如果您使用任何语言来执行任务，那么就会有很多内置的类可用，因此您可以使用这些类来压缩图像，例如在Java Imagescalr中，Thumbnail或ImageWriteParam，或者您也可以使用Matlab。

Answer 3

Compressing and resizing https://example.com/ …ts/AMP.jpg?6750368613317441460 could save 530KiB (91% reduction).

530 KiB reduction is quite a lot. Verify that the image size is congruous. I mean, if you have a 400x200 image and you show it at 200x100, then serving it at the correct resolution (or resolutions) could be what PageSpeed is after.

For PNG images, often color reduction is possible: if you have a 12 colors image (eg a schematic), having it in 24-bit, 8-bit or 4-bit format makes a significant difference, while changing nothing in what people see once it's displayed. Good call removing unneeded alpha channel, though.

The rest you can do with tools like pngopt , pngcrush or advpng . JPEG quality parameter or suitable tools ( tinyjpg , or google 'JPEG compression optimizer') can be used to improve JPEG size. There are some tools that are capable of selectively encoding different areas of the image, or rewrite a PNG palette to leverage zLib compression features.

Another possibility with JPEG is using the progressive format, that allows quickly displaying a raw image, and refine it iteratively. More overall bandwidth but also more apparent speed (less browser support also; check it out).

It is not automatic that any of this can be done with ImageMagick - after all, ImageMagick is not directly tasked with file manipulation but with image manipulation. It may well be that its file-compression functions are not as complete or as advanced as other tools'.

Answer 4

您可以从该页面下载压缩包，其中包含图像和针对其喜好而优化的代码...这几乎是最好的图像压缩。

Answer 5

I would recommend thumbor.org . It's a open source imaging service which you can simply start using a docker container on Amazon Elastic Beanstalk. It has some pretty nice features like smart cropping and face detection.

To start it, just create a elastic beanstalk environment with docker as predefined configuration. Then you provide a JSON-File with following content in the application version tab.

{
  "AWSEBDockerrunVersion": "1",
  "Image": {
    "Name": "apsl/thumbor"
  },
 "Ports": [
    {
      "ContainerPort": "8000"
    }
  ]
}

You can then configure thumbor with elastic beanstalk environment variables. For optimizing JPG you should add the jpegtran optimizer.

OPTIMIZERS=['thumbor.optimizers.jpegtran']

We use it at Storyblok.com to optimize the images and Google Pagespeed is happy with the result: https://www.storyblok.com/docs/Guides/how-to-resize-images