How to Optimize Images in PrestaShop with Super Speed

Large image files can increase page weight and slow down page loading. Super Speed helps reduce image file sizes, optimize existing and newly added images, convert supported product images to WebP, and delay off-screen images with Lazy Load.

Configure image optimization

Follow the steps below to configure image optimization for your PrestaShop store.

1. From the module configuration page, go to Image optimization > Optimize images.
2. Select the types of images you want to optimize, such as product, category, supplier, manufacturer, banner, home slider, and other supported images.
3. Select one of the available optimization methods: Google WebP, TinyPNG, reSmush, or PHP script.
4. Set the Image quality. A lower value can produce smaller files but may reduce visual quality, while a higher value preserves more detail at the cost of a larger file. 50% is the default recommended value and is a good starting point for most stores.
5. Click Optimize existing images to start the optimization process.

Note: If an image cannot be further reduced without affecting its quality, its file size may remain unchanged. This prevents unnecessary compression when no useful reduction can be achieved.

Image optimization methods

Super Speed provides four image optimization methods. The appropriate choice depends on how you want the images to be processed:

• PHP script - Processes images locally on your server without requiring an external API. This is the module's default optimization method.
• reSmush - Uses the reSmush image optimization service to compress images through its API.
• TinyPNG - Uses the TinyPNG API for image compression. You need to enter an API key before using this method. The documented free tier supports up to 500 image compressions per month.
• Google WebP - Converts supported product images to WebP, a more efficient image format that can reduce transferred image data compared with traditional formats in many cases.

If you prefer local processing without an external service, start with PHP script. TinyPNG or reSmush can be used when you prefer an external compression service. Choose WebP when your goal is specifically to serve supported product images in WebP format.

WebP support in Super Speed is verified for product images. Do not assume that category images, banners, theme images, or every third-party module image will also be converted.

AVIF should not currently be treated as a verified output format of Super Speed.

Whichever method you choose, test several representative images after optimization. The smallest possible file is not always the best result if important product details become visibly degraded.

Types of images to optimize

Super Speed supports optimization for multiple image types, including:

• Product images;
• Category images;
• Supplier and manufacturer images;
• Banners;
• Home slider images;
• Supported blog images;
• Other image types handled by the module.

The module can optimize both existing images and supported new images added later.

Use Optimize existing images for the images already stored on your website. For stores that frequently add new products or replace product photos, you can also enable optimization for newly added images so that you do not need to repeat bulk optimization manually every time new images are uploaded.

Super Speed also supports images from PrestaShop's default home slider and banner modules and integrates with supported PrestaHero BLOG images.

Optimizing Images on CMS Pages and Other Modules

Images stored in CMS content, custom modules, theme-related folders, or other server directories may not appear in the standard bulk image optimization list.

To optimize these images:

1. From the module configuration page, go to Image optimization > Browse images.
2. Select your preferred image optimization method.
3. Browse to the folder containing the images.
4. Select the images you want to optimize.
5. Run the optimization.

After optimization, you can download the processed images or restore them where the restore function is supported.

If an optimized image no longer meets the visual quality you need, restore it instead of repeatedly applying further compression. For the complete restore process, see How to Restore the Original Quality of the Optimized Images in Super Speed in the Super Speed Resource Center.

Optimizing user-uploaded images

You can also optimize images stored on your computer before using them on your website.

1. Go to Image optimization > Upload to optimize.
2. Select your preferred optimization method.
3. Upload the images you want to process.
4. Let Super Speed optimize the selected images.
5. Download the optimized files and use them where needed.

After downloading the processed images, you can remove the temporary uploaded files from the server if they are no longer required, helping avoid unnecessary storage usage.

Tracking Image Optimization Progress

On the Super Speed Dashboard, you can view the number of optimized images compared with the total number of supported images detected by the module.

Use this information to track the progress of a large optimization task and identify whether images are still waiting to be processed.

After optimization, also check several representative storefront pages. Make sure that product thumbnails, larger product photos, banners, and other important images still have acceptable visual quality.

If WebP is enabled, verify that product images display correctly. If you later enable Lazy Load, also check that images appear normally while scrolling.

Image cleaner

Image optimization reduces the file size of active images. Image cleaner has a different purpose: it removes unused image files from the server to recover storage space.

Before cleaning unused images, create a backup of your /img folder.

Then:

1. Go to Image optimization > Image cleaner.
2. Click Clear all unused images.

Only remove detected images after confirming that they are no longer required.

If the problem is instead that an optimized image needs its original quality restored, use the restore function rather than Image cleaner.

Lazy load

Lazy Load complements image compression but does not replace it.

Compression reduces the size of an image file. Lazy Load delays suitable off-screen images so that they are loaded when visitors scroll closer to them instead of loading every image immediately when the page opens.

To enable it:

1. Go to Image optimization > Lazy Load.
2. Turn on Enable Lazy Load.
3. Select a preloading image and the supported image types where Lazy Load should apply.
4. Save your changes.

Lazy Load is particularly useful for images further down long pages or product listings. Images that visitors need to see immediately when the page loads should be checked carefully after enabling it.

By choosing an appropriate optimization method and quality level, optimizing both existing and future images, you can reduce unnecessary image data while maintaining the visual quality required by your store. Super Speed applies your chosen method automatically to both existing and future images once configured.