如何壓縮圖像，以使Google Pagespeed Test不建議再次壓縮該圖像？

Question

每當我運行pagespeed test時，它都會以字節和百分比的形式提供圖像的可能優化，例如，
壓縮並調整大小https://example.com/…ts / AMP.jpg？6750368613317441460可以節省530KiB（減少91％）。

壓縮https://example.com/…AMP.png？12287830358450898504可以節省4.4KiB（減少31％）。

我正在使用ImageMagick壓縮圖像。

我已經嘗試convert AMP.gif_or_png -strip [-alpha Remove] OUTPUT.png為png圖像，

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

對於jpg圖像，但上述命令均不能像google pagespeed那樣為我提供相同的降低效果。 所以，讓我知道我是否缺少任何參數，或者我傳遞了錯誤的參數值。

壓縮內容包可在google pagespeed頁面上找到，但是，我想使用ImageMagick或任何其他來源來壓縮圖像。

Answer 1

如果您正在尋找商用工具， 則可以使用JPEGmini 。 如果要使用Grunt任務運行程序，也可以使用imagemin 。 您還可以使用imagemin附帶的命令行工具，例如jpeg-tran和opti -png ，它們也是開源的。

Answer 2

可能是沒有可用的工具來動態地執行任務。您應該進行一些計算，或者如果您使用任何語言來執行任務，那么就會有很多內置的類可用，因此您可以使用這些類來壓縮圖像，例如在Java Imagescalr中，Thumbnail或ImageWriteParam，或者您也可以使用Matlab。

Answer 3

壓縮並調整大小https://example.com/…ts / AMP.jpg？6750368613317441460可以節省530KiB（減少91％）。

530 KiB減少很多。 驗證圖像大小是否一致。 我的意思是，如果您有一個400x200的圖片，並且以200x100的比例顯示，那么PageSpeed所追求的就是以正確的分辨率（或多個分辨率）進行投放。

對於PNG圖像，通常可以減少顏色：如果您有12色圖像（例如原理圖），則以24位，8位或4位格式顯示圖像會有很大的不同，而人們所看到的卻沒有任何改變一旦顯示出來。 不過，移除不必要的Alpha通道的通話效果不錯。

其余的您可以使用pngopt ， pngcrush或advpng類的工具advpng 。 可以使用JPEG質量參數或合適的工具（ tinyjpg或google'JPEG壓縮優化器'）來提高JPEG大小。 有一些工具能夠選擇性地編碼圖像的不同區域，或重寫PNG調色板以利用zLib壓縮功能。

JPEG的另一種可能性是使用逐行格式，該格式允許快速顯示原始圖像並對其進行迭代優化。 更多的總帶寬也更明顯的速度（以下瀏覽器支持也;檢查出來）。

使用ImageMagick可以自動完成所有這些操作不是自動的-畢竟，ImageMagick並不直接負責文件操作，而是直接負責圖像操作。 它的文件壓縮功能可能不如其他工具那么完善或先進。

Answer 4

您可以從該頁面下載壓縮包，其中包含圖像和針對其喜好而優化的代碼...這幾乎是最好的圖像壓縮。

Answer 5

我會推薦thumbor.org 。 這是一個開源映像服務，您可以簡單地開始在Amazon Elastic Beanstalk上使用docker容器。 它具有一些不錯的功能，例如智能裁剪和面部檢測。

要啟動它，只需使用docker作為預定義配置創建一個彈性beantalk環境。 然后，在“應用程序版本”選項卡中提供具有以下內容的JSON文件。

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

然后，可以使用彈性beantalk環境變量配置thumbor。 為了優化JPG，您應該添加jpegtran優化器。

OPTIMIZERS = ['thumbor.optimizers.jpegtran']

我們在Storyblok.com上使用它來優化圖像，而Google Pagespeed對結果感到滿意： https ://www.storyblok.com/docs/Guides/how-to-resize-images