Prestashop 1.7.4.2 - How to fix image not showing due to pagespeed

What is pagespeed module?

The pagespeed module is responsible for image compression that makes it load faster on Prestashop and thus increase the speed performance of your store significantly.

The problem of pagespeed module in Prestashop

However, not many people realize that the mod_pagespeed module use by the PrestaShop actually can cause very much headache to the user when uploading new images to their e-commerce site. Some people tweak image permission from 775 to 664 or whatsoever and clear cache including clearing cache of the pagespeed module via SSH console. All of these eventually solve the problem once and after reloading the image is not showing again.

This is what happens when upload image to the Store Contact and About us page of the store. After uploading the new image through the back office it works once when browsing the page - but it will be gone missing when reloading the same page again. After searching tutorial solution on Google like changing the CHMOD permission of the image from 775 to 664 or the other way around including clear cache as well as clearing cache of the pagespeed via SSH. After performing those action it fixed the first time reload but the next it will be missing again.

From the Chrome or Mozilla developer tools I can see that the image URL has been modified by the pagespeed like so with 404 ERROR on the browser alert.

<img src="http://xx.xxx.xxx.xxx/img/st/x1-stores_default.jpg.pagespeed.ic.NxmzWLdzMI.webp" alt="product" title="product">



Notice the image becomes like this: x1-stores_default.jpg.pagespeed.ic.NxmzWLdzMI.webp - due to the pagespeed compression. And if I change the URL to the actual image URL like so 1-stores_default.jpg on the developer debugging it will load correctly.

<img src="http://xx.xxx.xxx.xxx/img/st/1-stores_default.jpg" alt="product" title="product" data-pagespeed-url-hash="377239180" onload="pagespeed.CriticalImages.checkImageForCriticality(this);">

This is how I found out the pagespeed compression module is the real problem in this missing image case for Prestashop 1.7.4.2

How to solve the pagespeed image not showing?:

In order to fix the problem, we need to use FTP to access the directory where the file of pagespeed is located. In this case, I am using FileZilla to access the public location of the file in bitnami Google Cloud server.

1. Login to the server via FileZilla FTP

2. Local /opt/bitnami/apache2/conf/httpd.conf file in the directory

3. Edit the file using NotePad++

4. Now comment out these two lines in the httpd.conf file

Include conf/pagespeed.conf to read like so #Include conf/pagespeed.conf
Include conf/pagespeed_libraries.conf to read like so #Include conf/pagespeed_libraries.conf

5. Save the file and re-upload to the server via FTP again

6. Now open the Bitnami Virtual Machine Vault and Launch the SSH Console in a new browser

7. Once the console loaded restart the apache server using this command: sudo /opt/bitnami/ctlscript.sh restart apache

8. Now reload the page of Prestashop that having the missing image it should show all the time no matter how many times you visited or load the site.

Now if you inspect the element using developer tools on chrome or mozilla firefox you will the image is now loading its normal url without the compressed pagespeed element in it like so

<img src="http://xx.xxx.xxx.xxx/img/cms/product%20cctv%20and%20computers.jpg" alt="kuching cctv" width="400" height="400" />

There could be a better solution than this rather than disable the pagespeed but I am not too sure what it is. Perhaps tweaking the php logic in the one of those file might do the trick but you need it to work urgently the above solution is the fastest you can do.