With PrestaShop version 8.1, support for the WebP image format has been introduced, greatly improving site performance. However, this feature is still experimental, so it requires manual setup to enable.
Why is the WebP format important?
WebP is an image format developed by Google that reduces the size of images without significant loss in quality. This helps speed up page load times, which is especially important for mobile users and websites with a lot of images. Faster loading improves SEO and enhances user experience.
PrestaShop notes:
“Version 8.1 allows users to convert existing images to WebP and the newly-supported Avif format. Images are now saved with the appropriate extension (.webp for WebP, .png for PNG, and so on). This new release also introduces support for multiple image format generation, allowing browsers to choose the best format for the browser. This feature may require some extra work to get it functioning on your theme.”
How to enable WebP support in PrestaShop 8.1?
WebP support in PrestaShop 8.1 is experimental and turned off by default. To activate it:
- Go to "Advanced Parameters" in your admin panel.
- Navigate to the "New & Experimental Features" tab.
- Enable WebP support.
Regenerating thumbnails
After enabling WebP, your images won’t be automatically converted to the new format. To start using WebP, follow these steps:
- Go to "Design" -> "Image Settings".
- Click on "Regenerate thumbnails" and select WebP for image generation.
Theme support for new image formats
If your theme supports new formats like WebP and Avif, it may use the <picture>
tag, which allows browsers to choose the best image format. Here's an example of how such a theme might look:
<picture>
{if !empty($product.default_image.bySize.large_default.sources.avif)}<source srcset="{$product.default_image.bySize.large_default.sources.avif}" type="image/avif">{/if}
{if !empty($product.default_image.bySize.large_default.sources.webp)}<source srcset="{$product.default_image.bySize.large_default.sources.webp}" type="image/webp">{/if}
<img
class="js-qv-product-cover img-fluid"
src="{$product.default_image.bySize.large_default.url}"
{if !empty($product.default_image.legend)}
alt="{$product.default_image.legend}"
title="{$product.default_image.legend}"
{else}
alt="{$product.name}"
{/if}
loading="lazy"
width="{$product.default_image.bySize.large_default.width}"
height="{$product.default_image.bySize.large_default.height}"
>
</picture>
This markup allows browsers to select between WebP, Avif, and other formats if supported by the user's device.
WebP support in PrestaShop 8.1 is a powerful tool for optimizing image loading on your site, but requires minimal setup. However, if your theme doesn’t support automatic image generation, you may need to manually configure the display of images in multiple formats.
Have you tried using this feature? Share your experience in the comments!