title: Image Optimization Using Google PageSpeed Insights and Apache mod_pagespeed
body: <p>I'm looking to get as close to a 100/100 page speed score as possible.  </p>
  
  <p>The only issue preventing this is images at this point. </p>
  
  <p>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. </p>
  
  <p>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 i.e. not creating an image for every size, unless this can be done dynamically without user involvement. </p>
  
  <p>Any help would be greatly appreciated. BTW, without these images I score a 96-98/100  </p>
  
  <p><a href="http://ledhabitats.com" rel="nofollow noreferrer">Site in Question</a>  Magento Responsive Site / Apache w/ mod_pagespeed</p>
  
  <p><a href="https://developers.google.com/speed/pagespeed/insights/?url=http%3A%2F%2Fledhabitats.com%2F&amp;tab=desktop" rel="nofollow noreferrer">Google PageSpeed Results Link</a></p>
  
  <p><a href="https://i.stack.imgur.com/f6w1d.jpg" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/f6w1d.jpg" alt="Images Causing Issue"></a></p>
  
  <p><a href="https://i.stack.imgur.com/H7bkS.png" rel="nofollow noreferrer"><img src="https://i.stack.imgur.com/H7bkS.png" alt="enter image description here"></a></p>
  
  <p>mod_pagespeed Settings </p>
  
  <pre><code>############################################
  ## mod_pagespeed
  
  &lt;IfModule pagespeed_module&gt;
      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
  &lt;/IfModule&gt;
  </code></pre>