使用 Google PageSpeed Insights 和 Apache mod_pagespeed 进行图像优化答案

【问题标题】：Image Optimization Using Google PageSpeed Insights and Apache mod_pagespeed使用 Google PageSpeed Insights 和 Apache mod_pagespeed 进行图像优化
【发布时间】：2016-06-30 06:42:17
【问题描述】：

我希望尽可能接近 100/100 的页面速度得分。

此时唯一阻止这种情况的问题是图像。

如下图所示，原生图像大小为 500x500，但渲染为 327x327，问题是这些图像是响应式的，因此根据视口，它们可以是 210x210 到 500x500 之间的任何位置。谷歌正在抓取这些图像以 267x267 呈现的网站，我在下载谷歌 PageSpeed 优化内容时发现了这一点。但根据视口，此图像可能需要为 500 像素 x 500 像素。

我该如何解决这个问题？理想情况下，我想使用 mod_pagespeed 来解决这个问题，这样我就可以在我的服务器上重用这个解决方案。然而，在这一点上，我对任何允许我通过编程使这个图像大小不同的解决方案持开放态度，即不为每个大小创建一个图像，除非这可以在没有用户参与的情况下动态完成。

任何帮助将不胜感激。顺便说一句，如果没有这些图片，我的得分是 96-98/100

Site in Question Magento 响应式站点/Apache w/mod_pagespeed

Google PageSpeed Results Link

mod_pagespeed 设置

############################################
## mod_pagespeed

<IfModule pagespeed_module>
    ModPageSpeed on
    ModPagespeedDisallow "*index.php/admin/*"
    ModPagespeedCriticalImagesBeaconEnabled true
    ModPagespeedEnableFilters insert_image_dimensions
    ModPagespeedEnableFilters insert_dns_prefetch
    ModPagespeedEnableFilters pedantic
    ModPagespeedEnableFilters prioritize_critical_css
    ModPagespeedRewriteLevel CoreFilters
    ModPagespeedEnableFilters defer_javascript
    ModPagespeedEnableFilters sprite_images
    ModPagespeedEnableFilters rewrite_images
    ModPagespeedEnableFilters convert_png_to_jpeg,convert_jpeg_to_webp
    ModPagespeedEnableFilters resize_rendered_image_dimensions
    ModPagespeedEnableFilters collapse_whitespace,remove_comments
    ModPagespeedAddOptionsToUrls on
    #This caches scripts and images in your local storage, so to flush you cache, flush your local storage as well.
    ModPagespeedEnableFilters local_storage_cache
</IfModule>

【问题讨论】：

没有得到任何回应，我需要提供更多信息吗？我已经尝试了数百个 mod_pagespeed 设置。必须有一种方法可以以特定请求所需的大小呈现图像。
似乎没有人知道这类问题的答案。我也有同样的问题。
@BobChip 我绝对同意。我有点放弃了，但如果我遇到任何事情，我一定会回帖。

标签： javascript php image frontend mod-pagespeed

【解决方案1】：

您的问题可能是由于您的图像未正确优化造成的。

我最近为 PHP 网站开发了一个 BULK 图像优化器，它 100% 符合 Google Insights 的指南。

唯一的要求是您的网络服务器上安装了 imagick。

您可以在此处下载优化器： https://www.genius-webdesign.com/image-optimizer/

【讨论】：