White paper on product photo files in PrestaShop

Where to find PrestaShop product photos

Let's take any product whose identifier is the number 68.

Supposing you associate two photos with it, MYSQL will increment an automatic counter (an automatic identifier) in the ps_image table (assuming that the prefix chosen for this database is the default value ps_. To be adapted to your case), giving two image identifiers (IDs), for example 513 and 514.

In this ps_image table of the database are therefore added two rows containing the product id (88) and the image ids (513 and 514). It's thanks to this info that PrestaShop can know which files to fetch from the /img/p folder for each product.

This table will contain two other pieces of information:

-which of the two photos is the cover photo (in principle the 1st one added, so 513), which will have a 1 in the "cover" column of this table

-The order in which the photos will be displayed on the site, thanks to the values in the "position" column. 0 or 1 for the 1st, 1 or 2 for the second depending on the version of PrestaShop.

Example below: The ID 7 product has 4 photos in this base, numbers 20, 21, 22, 23. Its main (cover) photo is 20. Its photos will be displayed in this order: 23, 21, 22, 24 (ascending order of "position" values)

Rem: product 8 is not compliant, it has two photos but neither is declared as cover photo. Fairly common PrestaShop bug that you can fix either manually via PHPMyAdmin or automatically thanks to Merlin Backoffice.

Next, PrestaShop creates thumbnails of these two images and stores them in folders built from the image IDs:
/img/p/5/1/3 for 513
and
/img/p/5/1/4 for 514

The files themselves are named after the image number, for example:
513.jpg
513-small.jpg
513-small_default.jpg
etc...

There is therefore no information in these folders to tell which product they belong to.

Although this is another debate, with a slight modification to the database structure, this system can be hijacked to allow the same set of thumbnails (the same subfolder) to be used by several products. I did this once for a very large site that wanted to have the same photo (a logo) associated with all their products, without exploding the size consumed by the photos on the disk.

small indicates the size of the thumbnail. Several sizes are available (medium, large etc...). These sizes are customizable in PrestaShop settings.

If you change them, remember to "re-generate" the thumbnails using a button present on the same page.

When there are too many images, re-generation can fail (time out). In this case, you'll need to purchase and use a module dedicated to this task.

PrestaShop's "Preferences/Images" page (here in 1.6), allowing you to set thumbnail size, file format (png or jpg), legacy mode (see below), re-generate files, etc:

The file named with just the image number (e.g. 513.jpg) contains a copy of the image in its largest size. It's this file that Merlin BackOffice points to when you ask it to export the list of product images, for example to send them to a marketplace or migrate them to another PrestaShop store.

What is the optimum file resolution to send to PrestaShop?

The answer is simple, the same as the one you chose for the "checkbox" size, because PrestaShop will never display photos in a larger size. We often choose 800x800 pixels, but very "graphic" sites (jewelry sales, for example) may choose a higher resolution.

If you send images smaller than "checkbox", creating the checkbox thumbnail will degrade the image (pixelation effect or impression of blur, lack of detail).

And there's no point in sending images larger than "checkbox", as they will be reduced in size during the process. You will therefore have unnecessarily increased transfer time.

And no need to send images larger than "checkbox", as they will be reduced in size during the process.

_default ? what is that ?

_default comes from the theme name. If you use a theme other than the default or rename it, it's possible (it's not always the case and it's still a bit of a mystery to me) that the thumbnail name indicates this.

Note that in Merlin's "Display" settings, you can precisely tell it whether or not the file names contain the theme name and what that name is. An error at this level is often the 1st cause of photos not being displayed in Merlin.

How to avoid duplicates?

You will also have understood that the original image file name, supplied to PrestaShop, is not retained by PrestaShop. So there's no way of knowing whether a particular photo has already been associated with a product. No duplicate management is therefore possible when adding photos using PrestaShop admin.

This is why I encourage you to always use the image addition tool from Merlin Backoffice, as it takes care to keep the original image in the /img/p folder (in /p directly, not in a subfolder).

So in Merlin Backoffice we were able to set up an automatic system to avoid image duplicates.

Update (29/04/2019): Merlin Backoffice V1.4 now integrates a table memorizing all image associations and enabling duplicate avoidance management, but also mass photo updating

The legacy PrestaShop image storage model:

Note that this model of storage in subfolders was introduced as of PS 1.4, but it's still possible today to use the old model, called the "Legacy model".

In the old model, there are no subfolders in img/p, all thumbnails there are stored in bulk at the root of p. The big drawback: you can reach the authorized limit of the number of files per folder.
The file names are also different, containing both the product ID and the image ID, which had a more practical side, for example:
68-513-small.jpg (image ID 513 of product ID 68).

Another difference was that the theme name was never included in the file names.

Example taken on an old PrestaShop 1.3, product images are loose in img/p. Product No. 1 has two photos, Nos. 37 and 38:

Merlin Backoffice is of course compatible with both models and adapts itself according to your PrestaShop configuration.

The img/tmp/ folder and synchronization problems.

For completeness on the subject, it's worth pointing out that there's another folder that also contains a copy of product images, in a very small size, it's the img/tmp folder.

These mini thumbnails are only used by PrestaShop's back office and are not always updated when a product photo is replaced (it's a hook and cache thing, too long to detail here).

So if you notice any differences between the product photos displayed on the site or in Merlin Backoffice and those in the PrestaShop administration, simply empty the /tmp folder, it will be automatically rebuilt by PrestaShop. Alternatively, you can ask Merlin to execute the hooks on session exit.

And where are the image captions (ALT tags) stored?

They're stored in the database, in the ps_image_lang table. Just three columns, one indicating the language ID, the other the image ID and the last the caption itself.

Yes, it's important to fill them in, they contribute in no small part to the good SEO of your product pages.

A little reminder: in Merlin Backoffice, the "Legend" menu of the "Grouped actions" button in the image table allows you to automatically fill in ALT tags based on translated product names for any set of products and images, in any language. This saves hours of work.

Updated (29/04/2019): Merlin Backoffice V1.4 now integrates a free SEO extension enabling smart, parameterized caption filling, with, for example, the attributes of declinations associated with photos.

Case of multi boutiques?

In fact, from PS 1.5 onwards, the ps_image table has been split with the addition of the ps_image_shop table, which basically tells you whether or not such and such an image is usable in such and such a store of a multi-shop configuration.

But even if you've never activated multi-shop mode, this table is still populated with one row per image and with a default value of 1 for the store number.

The structure of this table has evolved with PrestaShop updates (addition of the "cover" column from PS 1.5.1 then "id_product" from 1.6.1, modification of unique indexes,...), often with inconsistencies and an obvious lack of rigor. Even today I regularly have to troubleshoot by hand PrestaShop in which this table has been incorrectly upgraded by "Migration en 1 clic", which generates SQL error messages in Merlin Backoffice when you want to add a photo.

.

Note that Merlin Backoffice allows you to see these links and with one click associate or de-associate a set of photos to the various stores:

I give it .PNGs, ask for .PNGs and only find .JPGs in the folders, why?

In fact, although the thumbnails produced always carry the .jpg extension, even when the original files are .png, the thumbnail format is indeed png, with transparency preserved, but whose suffix has simply been renamed .jpg for purely technical reasons. It's not a bug, just another PrestaShop inconsistency.

I've deleted my base, redone my products and the photos displayed in the store don't match the right products, what can I do?

It's a classic case that has boosted paracetamol sales.

To start with, clear all caches, PrestaShop's (Smarty), the browser's and any other caching modules. Although this probably won't be enough, because:

When PrestaShop is asked to start all over again from a new base, the image ID counter restarts at 1. Logical.

But if you've forgotten (a forgivable mistake, as it's not or poorly documented by PrestaShop) to delete the subfolders present in img/p, there are already photos there corresponding to IDs from 1 to xx (xx= the number of images added before emptying the base).

In this case, when you add a photo to a product, PrestaShop will simply give it the photo already present on the disk, bearing the same ID (as long as the number XX has not been reached). There's no replacement, just re-use of files already stored.

To sum up, when you want to restart a blank site, remember to delete the subfolders of img/p (and the contents of img/c, and img/tmp, it doesn't hurt anyone).

Be careful, however, not to delete the "modeles" files that are located by default at the root of /img/p/. These are the ones that allow you to display a question mark or a "This product has no photo" thumbnail on products without an image.

Same concern, but it's in Merlin that the photos that appear seem to be the old ones. how to refresh them?

This is because Merlin Backoffice also has its own local cache, which avoids having to re-download images every time it needs to display a product, declination or category.

After deleting/replacing all the photos on a site, it's therefore necessary to clear this cache too. It's quick and easy to do, just click on "Grouped actions" in this table ("Declinations and images" tab then "Images" sub-tab, bottom right) and choose "Cache", you'll then be able to clear the entire cache or just the part concerning the selected images. :

Where are these cache images if we want to delete them manually?

On your C: drive in the MPR_Comon_Data/cache_img folder. A subfolder for each site:

Warning: do not consider this cache as an archive or backup of your photos, you would be disappointed, as they are only small thumbnails, unusable to remake a site.

And where are the photos of the variations? :

There is no dedicated file for the declinations, they always use the images and therefore the files of their parent product.

This is why, for example, to associate a particular photo with a declination with Merlin Backoffice, you must first associate that photo with that declination's product.

The association between the photo and the declination is stored in the database, in the ps_product_attribute_image table. Very basic, just two columns, the declination ID and the image ID. As you can see, if the image ID doesn't correspond to the ID of one of the photos associated with the product, it won't work.

Updated (29/04/2019): Merlin Backoffice V1.4 now allows you to create declinations directly containing their corresponding color photos.

What about category photos? :

This is more simplistic. Their photos have no ID, they're stored loose in the img/c folder and named after the ID of the category itself.

Ex, for the category numbered 105, we'll find in the img/p folder a file 105-small.jpg for example, or of the style 105-small_default.jpg depending on the theme name.

As with products, you can redefine the size of these images via the back office and re-generate them.

Updated (29/04/2019): Merlin Backoffice V1.4 now handles the new "Thumbnails" format for categories.

And the scenes? :

Scenes, which were category images with clickable areas (pointing to other pages), didn't meet with much success and disappeared with PrestaShop version 1.7. So there's no need to dwell on them, even if Merlin continues to offer their management for older versions of PrestaShop....

Does using Merlin Backoffice change anything in terms of photo placement, size or format?

No in the main principles, because it's never Merlin Backoffice that makes and stores the thumbnails. It "just" uploads the raw images to img and then uses PrestaShop scripts to create the subfolders and thumbnails. This ensures compliance with the size and format guidelines set in PrestaShop.

This means, for example, that if you vonfigure prestaShop so that images receive a watermark, photos added via Merlin Backoffice will also have the same watermark, automatically.

However, as already mentioned above, it keeps a copy of each file transferred to img/p, under the original name. This avoids the need to re-download an image that has already been transferred, and above all it helps to avoid creating duplicate images in products.

But the big difference is, as always, the time saved by using Merlin Backoffice, because instead of having to add images one by one and wait for them to be uploaded before processing the next one, you can add a very large number of them in a single operation and across an infinite number of products.

Transfers take place in the background, with the program returning your hand immediately so you can continue without waiting to add more photos or perform any other task.

Moreover, Merlin features a range of tools for automatically searching and associating products with a stock of images, for example (but this isn't the only method) by comparing file names with product references. To put it simply, by structuring/preparing your work well, it's possible to totally automate the addition of photos to thousands of products, in just a few minutes:

There's also the option, for photographers of sporting or cultural events, weddings, the possibility of asking Merlin to automatically create as many new products as you have images in a folder. You don't have to spend time creating products and then associating photos with them, you just take your stock of photos, drag them into the tool and it creates 1 virtual product per photo (of course with this associated photo), and if you wish bearing as name and url the name of the file, ready to be sold.

.

Have you found this article useful? let us know with a little share thanks to the social buttons below. Thanks in advance.

I've probably not been totally complete, the subject is vast, but I'll be happy to complete this little dossier according to your questions. Don't hesitate.

Updated (29/04/2019): Merlin Backoffice V1.4 is now available, packed with some very numerous unique new features concerning image management for PrestaShop, such as the automatic search for images to associate with product declinations. We invite you to browse this other article detailing the most important ones.

Previous articles or discussions on the same subject:

What to do if item photos don't display?

How to quickly fill in the caption of product images?

Product-images-don't-match (in French)