WebP and AVIF images in PrestaShop 9: formats, quality and regeneration

Images are, by far, the heaviest part of an online store. PrestaShop 9 can generate product thumbnails in WebP and AVIF as well as JPG, and serve them with the <picture> tag so each browser picks the best format it understands.

What you gain

• WebP: usually 25–35% lighter than a JPG of similar quality. All current browsers understand it.
• AVIF: lighter still, especially for photographs, but slower to generate.

Configuration

In Design > Image Settings you choose the formats to generate and the quality. Internally it is stored in the PS_IMAGE_FORMAT setting, for example webp,avif,jpg.

The trap: the server has to be able to write the format

PHP generates images with the GD library (or Imagick). If you configure AVIF and your server’s GD has no AVIF support, the imageavif() function does not exist. PrestaShop 9 generates missing thumbnails on the fly, and when it tries, the error interrupts the page: the store comes out blank, with a 200 code and nothing in the logs.

Check before enabling a format:

php -r 'var_dump(function_exists("imagewebp"), function_exists("imageavif"));'

Regenerating thumbnails

In Design > Image Settings > Regenerate thumbnails. On large catalogues it can take a long time and be cut off by the execution time limit; in that case, regenerate them by type (products first) or with a command-line script that skips the ones that already exist.

Quality

• JPG: 85–90.
• WebP: 80–85.
• AVIF: 60–75 (its scale is not comparable with JPG’s).

And also

• Upload original images of a reasonable size (2000 px on each side is enough for almost any zoom).
• Define only the image sizes your theme really uses: every extra size multiplies disk space and regeneration time.
• Enable lazy loading (loading="lazy") in listings, but not on the main image of the product page: that one must load as soon as possible.