Due to how popular PrestaShop is, being widely used by thousands of online stores, I have decided to give you the opportunity to speed it up considerably.

This e-commerce platform is very dynamic and full of images. So full of images that most of them download around 5 to 10 and even 20 megabytes of images on each page.

Images are crucial for this platform, because that’s what people see when they look at your product. As such, you normally want to upload many images to attract product viewing.

Because of this it’s very hard for you to properly optimise your shop and deliver a pleasant user experience.

Image Resizing for PrestaShop

If you don’t know what Cloudflare Image Resizing is, I will not repeat again here to create duplicated content. Please here about it on the Official Post .

What I have done here is, took the worker I created for WordPress and adapted it for PrestaShop .

Initially it sounded like an easy task, however once I started working on it a huge headache kicked in.

Planning and creating the worker

First of all, PrestaShop has an extreme weird way of handling image URL’s. If you navigate to https://demo.prestashop.com/#/en/front you can see the classic theme.

Inspecting the page source, looking at the slider for example, we can see the following:

1<img src="https://ready-low.demo.prestashop.com/modules/ps_imageslider/images/sample-3.jpg" alt="sample-3" loading="lazy" width="1110" height="340">

Well this is not bad, we can easily match this URL and rewrite it. However, as we scroll below to the products we can see the following:

1<img src="https://ready-low.demo.prestashop.com/1-home_default/hummingbird-printed-t-shirt.jpg" alt="Hummingbird printed t-shirt" loading="lazy" 
2	data-full-size-image-url="https://ready-low.demo.prestashop.com/1-large_default/hummingbird-printed-t-shirt.jpg" width="250" height="250">
3	
4<img src="https://ready-low.demo.prestashop.com/21-home_default/brown-bear-printed-sweater.jpg" alt="Brown bear printed sweater" loading="lazy" 
5	data-full-size-image-url="https://ready-low.demo.prestashop.com/21-large_default/brown-bear-printed-sweater.jpg" width="250" height="250">
6
7<img src="https://ready-low.demo.prestashop.com/3-home_default/the-best-is-yet-to-come-framed-poster.jpg" alt="The best is yet to come' Framed poster" loading="lazy" 
8	data-full-size-image-url="https://ready-low.demo.prestashop.com/3-large_default/the-best-is-yet-to-come-framed-poster.jpg" width="250" height="250">

Auch, that hurts. What is the problem you might ask? The problem is that the images are not inside a “folder”, and instead are simply rewritten via Apache Rewrite.

If you look closely to the images URL, you can see the issue: prestashop.com/1-home_default, prestashop.com/21-home_default, prestashop.com/3-home_default and so on.

Inspecting the .htaccess confirmed this:

 1# Images
 2RewriteRule ^([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$1$2$3.jpg [L]
 3RewriteRule ^([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$1$2$3$4.jpg [L]
 4RewriteRule ^([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$1$2$3$4$5.jpg [L]
 5RewriteRule ^([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$1$2$3$4$5$6.jpg [L]
 6RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$1$2$3$4$5$6$7.jpg [L]
 7RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$1$2$3$4$5$6$7$8.jpg [L]
 8RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$1$2$3$4$5$6$7$8$9.jpg [L]
 9RewriteRule ^([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])([0-9])(\-[_a-zA-Z0-9-]*)?(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/p/$1/$2/$3/$4/$5/$6/$7/$8/$1$2$3$4$5$6$7$8$9$10.jpg [L]
10RewriteRule ^c/([0-9]+)(\-[\.*_a-zA-Z0-9-]*)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2$3.jpg [L]
11RewriteRule ^c/([a-zA-Z_-]+)(-[0-9]+)?/.+\.jpg$ %{ENV:REWRITEBASE}img/c/$1$2.jpg [L]
12# AlphaImageLoader for IE and fancybox
13RewriteRule ^images_ie/?([^/]+)\.(jpe?g|png|gif)$ js/jquery/plugins/fancybox/images/$1.$2 [L]

Frankly, I do not even want to go into it. I will just leave it without commenting. The above is still not so bad and we can rewrite it without problems, we just need a bit of experience in Regular expression .

However looking at different themes out there in the wild, it gets much worse. For example, let’s look at Shopkart which I found on Monsterone themes:

1<img src="https://demo4techies.com/prestashop/shopkart-lite/modules/ps_imageslider/images/8187e2cea6dcd5e1b98a1b1af132211cf94c9a8e_Slider-1.jpg" alt="">
2
3<img src="https://demo4techies.com/prestashop/shopkart-lite/1-home_default/casual-shoes-sneaker.jpg" alt="Casual Shoes Sneaker" 
4	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/1-large_default/casual-shoes-sneaker.jpg">
5
6<img src="https://demo4techies.com/prestashop/shopkart-lite/6-home_default/square-sunglasses-black-frame.jpg" alt="Square Sunglasses Black Frame" 
7	data-full-size-image-url="https://demo4techies.com/prestashop/shopkart-lite/6-large_default/square-sunglasses-black-frame.jpg">
8
9<img src="https://demo4techies.com/prestashop/shopkart-lite/img/cms/testimonial-img-1.jpg" alt="testimonial1">

As you can see, it’s much worse because apparently themes are changing the default image URL structure by including the theme name inside it. To make it even worse, they also point to folders like /img/cms and so on.

Honestly at this point I wanted to give up because it just seemed like a massive headache to support this, but something in my corrupted mind was telling me “no way”.

So I started testing and debugging until I finally supported the Classic theme. Then I grabbed a free theme from ETS and started working on that.

After many hours, I was at the point where my worker supports:

  • PrestaShop Classic theme
  • PrestaShop ETS (any) theme

This was not enough as I encoutered CSS as well that needed to be altered. So again a couple of more hours to test and debug supporting CSS rewrites.

Rewriting products “quick view”

When you visit a shop front store or category, you have the option to “quick view” a product by click a small icon. Rewriting this was a bit of challenge but nevertheless very much possible.

After playing around for a couple of more hours, testing and debugging again I managed to achieve it.

The worker will rewrite on the fly all the images that show up in “quick view” mode.

Removing malicious script

Whilst playing around with the ETS theme, I noticed something strange. A very odd looking JavaScript file was trying to load remotely.

Fortunately the script URL was returning HTTP 404 (Not Found), and unfortunately I could not see what this is about. So I headed to the Web Archive and found a cached version .

Looking over the script looks very suspicious to me so I quickly abandoned investigation and instead wrote a small snippet to automatically remove it from the page.

The worker will remove the script and keep your visitors safe.

Using the PrestaShop Image Resizing worker

Once again I did my best to make a simple one time copy paste code snippet, which is suitable for both technical people but also non-technical.

However this time you need to do a small edit, based on which theme you use. On the top of the worker code you will see:

 1// Edit the below as needed
 2// START EDIT -----------------------------------------------------
 3
 4// Set theme type
 5// 0 = Classic
 6// 1 = All themes by ETS (https://prestahero.com/brand/2-ets)
 7const PS_THEME = 0;
 8
 9// Speed: Set the image quality
10const IMAGE_QUALITY = 90;
11
12// Speed: Append lazy loading to images
13const IMAGE_LAZY_LOAD = true;
14
15// END EDIT -------------------------------------------------------
16// DO NOT EDIT BELOW THIS LINE.

It’s pretty self-explanatory; if you use the PrestaShop Classic theme leave PS_THEME to 0, otherwise set to 1. You can also customise the image quality, but I recommend leaving the default one.

Deploying the worker

Simply deploy the worker on your website, using the route example: examplestore.com/* and enjoy the benefits.

You can find the worker code on my Github as usual.

If you don’t know how to do this please reffer to my other article for WordPress which has instructions.

Image Quality

When using image resizing you normally want to point the original image for Cloudflare to resize, because PrestaShop resizes the images in a weird way and the quality is just shit.

I’m not sure why this is happening, maybe their reasoning was performance or whatever. Point being is that we should point the original image to Cloudflare but we can’t because PrestaShop rewrites the URL’s so they are not accesible directly.

The Cloudflare service resizes images and delivers an exceptional quality, regardless of how high the image resolution or size is. With that being said, you will still gain better quality and compression.

Support

Adapting the worker to different themes is a time consuming task. I might add support for more themes if I have free time but it’s not guaranteed.

If you have a paid or custom PrestaShop theme and would like me to adapt the worker for your shop, I am available for commercial support.

Please use the Consultation page and book a quick chat to discuss your needs.

License

As mentioned in the previous article for WordPress, the new License model used is Apache License 2.0, so please do not re-sell my work.

This does not affect you from using it commercially or personally.

I hope that with this addition your store will flourish.

Do let me know your thoughts below.