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

Question

I'm looking to get as close to a 100/100 page speed score as possible.

The only issue preventing this is images at this point.

As seen in the below image, the native image size is 500x500 but rendered at 327x327, the problem is that these images are responsive, so depending on view port they can be anywhere from 210x210 to 500x500. Google is crawling the site where these images are rendered at 267x267, I found this out when downloading the Google PageSpeed optimized content. But depending on viewport this image may need to be 500px x 500px.

How do I go about solving this problem? Ideally, I'd like to use mod_pagespeed to solve this problem, so I can reuse this solution across my servers. However, at this point, I'm open to about any solution that allows me to have this image vary in size via programming ie not creating an image for every size, unless this can be done dynamically without user involvement.

Any help would be greatly appreciated. BTW, without these images I score a 96-98/100

Site in Question Magento Responsive Site / Apache w/ mod_pagespeed

Google PageSpeed Results Link

mod_pagespeed Settings

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

Answer 1

Your problem may be caused by your images not being optimized properly.

I have recently developed a BULK image optimizer for PHP websites that is 100% compliant with Google Insights´ guidelines.

The only requirement is that you have imagick installed on your webserver.

You can download the optimizer here: https://www.genius-webdesign.com/image-optimizer/