PrestaShop Optimization: Working on Your Product Page Images
[Update : originally published on June 16, 2020, this post was updated on September 11, 2023]
Managing the images on your pages plays a critical role in your PrestaShop store’s overall performance. The images on your product pages, while they vary in number and size, need particular care to guarantee a professional visual result without compromising page load speed.
It’s essential to understand that overly heavy images have a direct impact on page display time, which can overload your site’s hosting infrastructure. A longer load time also increases the risk that visitors will leave the page before it has even fully loaded.
Reducing an image’s file size is often associated with a loss of visual quality, especially for users with little experience in image management. However, it’s possible to optimize image weight while preserving quality, by applying best practices and using the appropriate settings available in the PrestaShop back office.
With that in mind, we’re going to review the key characteristics of your product images, while also not overlooking the importance of proper configuration in your PrestaShop back office to maximize the positive impact of images on your site’s overall performance.
Choosing your product images
If you take your own product photos, the images you get will depend on your camera’s resolution quality. Nowadays, many cameras or mobile phones offer high-quality visual results. That’s great in itself, but it’s also something to keep in check. The size and resolution of images straight from a camera, unprocessed, are very often far too large for a web or mobile format.
Once your photos are taken and loaded onto your computer, check the files’ dimensions and resolution.
Dimensions (in pixels), or size, correspond to the total number of pixels across the width and height of the image.
Resolution (in ppi or dpi) expresses the fineness of detail in an image. The higher the dpi count, the higher the resolution.
In all cases, an image with large dimensions and high resolution will have a very large file size, especially for the web.
For example, an image 2000 pixels wide with a resolution of 300 dpi will easily reach a file size of several MB, which can lead to an unnecessarily long load time.
If your product images come directly from your suppliers, there’s a good chance they’re already processed for the web. Even so, take the time to check their size and weight before adding them to your catalog.
Retouch your images
Many pieces of software are available for working on image size and file weight. The goal is to reduce an image’s file size while keeping dimensions suited to showcasing your products and maintaining a resolution that guarantees a sharp result.
If you have Photoshop, one of the most popular image-editing programs, you know it offers features for making these adjustments when saving images. However, you don’t need to be an image-editing expert to accomplish this task. There are cheaper, even free, solutions that are just as effective for these operations, such as XnView, PhotoFiltre, GIMP, Pixlr X, etc.
You can also set up batch transformations to process several images at once, which saves time in the process.
The right dimensions
When you add your image to a product, you upload a single image and PrestaShop takes care of generating the various thumbnail formats.
On average, the images shown to present an item on the product page are around 350 to 450 pixels wide.
For a nice visual effect, you need to upload an image with dimensions equal to or greater than the largest size displayed on your site. If that’s not the case, your image’s visual quality won’t be good.
On your PrestaShop site, image areas are generally defined as squares.
If your product images aren’t square, they’ll be scaled proportionally to fit into the display area.
The product image on the blue background is landscape-oriented, with starting width and height of 1000px by 600px. When added, these values are automatically recalculated to display the image correctly within the square on the white background.
For a harmonious result, the ideal is to have images that always keep the same proportions, whether square, portrait, or landscape, ideally with consistent backgrounds.
The right image format
There’s a wide range of image formats. Not all of them will be accepted in your back office, depending on the PrestaShop versions and themes you use.
In your dashboard, you’ll be offered the use of PNG or Jpeg formats.
PNG is often used if you need transparency in your image (a logo, for example).
Jpeg has a very good compression rate but often reveals visual flaws in images.
PNG is less efficient at compression, but its rendering will be higher quality.
Also keep in mind that you can upload several images to a product page, and each image counts toward the page’s total weight. The more you work at trimming a few KB off each image, the more you ensure a proper load time for your product page.
 [Update : The WEBP format]
WebP is an image technology developed by Google, designed to reduce image file size while preserving visual quality. Here are its key features:
Although WebP isn’t natively supported by PrestaShop, there are modules that let you use it. However, it’s important to note that certain conditions must be met, notably having a PHP version of 5.6 or higher. |
PrestaShop dashboard settings
In your dashboard (Menu Preferences > Images), you can manage image size preferences.
Here’s an overview of all the image types and their sizes automatically managed by PrestaShop: 
For product images, there are 5 default image types:
Small: in the cart
Medium: on the product page, in the new products and recently viewed sections
Home: category detail, featured products on the store’s homepage, or a product search
Large: large display of the product on the product page
Thickbox: detailed product display, zoom.
Default values may vary depending on the PrestaShop version or theme you use.
If the automatic resizing value applied to images shown on product pages doesn’t suit you, you can change it.
Once changed, you’ll then need to regenerate the thumbnails by going to the last section of the Preferences > Images menu.
It’s a good idea to carefully choose which format to regenerate, starting by selecting the image category (in this case, “Products”) and then specifying the specific format (for example, “large_default” as shown in the screenshot above).
Keep in mind that this operation can become complex depending on the volume of images to process, which can put a significant load on the server. We therefore recommend contacting your agency or provider to carry out this operation in a controlled and efficient way.
Managing image generation options
Beyond the different image types and the ability to regenerate thumbnails, you have additional options you can configure.
This is notably where we recommend selecting the option “Use PNG only if the base image is in PNG format.”
This helps limit any quality loss caused by a format change.
To maintain a satisfactory resolution, it’s recommended to select a JPEG compression above 80 and a PNG compression of 7 or lower.
It’s essential to find a balance between a visually appealing result and a reasonable image file size, so as to avoid overloading the page. We encourage you to run tests with various image sizes and formats to assess the differences and check how these images will display on your site. This approach will help you get the best trade-off between visual quality and load performance.
Use a CDN (Content Delivery Network)
Beyond processing your images, consider making use of additional options to optimize your online store’s performance.
In your PrestaShop dashboard, this is called the media server, and it requires first enabling CCC — that is, concatenation, compression, and caching.
Menu: Advanced Parameters > Performance > Media Servers
The goal here is to optimize file loading, including images, by allowing your browser to distribute them efficiently across 3 subdomains of the same server, or by using external CDN servers. In theory, this approach should result in a noticeable improvement in page load performance.
However, it’s important to note that setting up a CDN can be more complex than other adjustments in PrestaShop. We therefore recommend calling on our teams to carry out this type of work.
If you’d like to learn more or have any questions, feel free to CONTACT US. Our team will be happy to help.
Contact us!